OXO1常识
一. web
1.网页
通常是html格式的文件，通过浏览器来解析。
2.网站
英特网上根据一定的规则，使用html等制作的用于展示特定相关内容的网页集合。
3.web标准的构成
（1）结构：
结构是对页面元素的整理和分类，eg : html
（2）表现
用于设置网页元素的版式，颜色，大小等外观样式，eg : css
（3）行为
是指网页模型的定义以及交互。eg ： js
注 ：
web最佳的体验方案：结构，表现，行为相分离。
二.浏览器
浏览器内核（渲染引擎）：
负责读取网页内容，整理讯息，计算网页显示方法并显示页面。
Trident : IE 猎豹安全 360极速浏览器 百度浏览器
Gecko : firefox
Webkit ： safari(苹果浏览器)
Blink ： chrome Opera
注释 : Blink是webkit的一个分支。
OX02 HTML
一.HTML
1. HTML指的是超文本标记语言（Hyper Text Markup Language)，它不属于编程语言，而是属于一套标签，用来描述网页。
2. HTML文档的后缀为" .html "或者“ .htm ”
3.HTML语法
(1)标签通常是由尖括号括起来关键字的一对标签。(双标签)
<html> </html>
(2)单标签
<br />
3.标签关系
(1）包含关系
<head>
<title></title>
</head>
(2) 并列关系
<head> <body>
<body> </body>
4. HTML基本结构（骨架）标签
<html>
<head>
<title> 第一个页面 </title>
</head>
<body>
键盘敲烂，工资过万
</body>
</html>
注：
<html></html> 跟标签
<head></head> 头部标签
<title></title> 标题标签
<body></body> 主体标签
5.html注释符
<！-- 我是被注释掉的东西 -->
注:
css注释：
/* 我是注释的内容 */
js注释（两种）
// 我是注释的东西
/* 我是注释的东西*/
6.DOCTYPE,lang标签，字符集的作用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
</head>
</html>
注；
（1）<!DOCTYPE> 声明不是 HTML 标签；它是标注HTML版本。
（2）lang标签：用来标注网页的语言
(3) 用来标注所用的字符集。
二.常见标签上
1.标题标签
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标签</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZBDFF2VM-1582779470367)(en-resource://database/478:1)]
2.段落标签和换行标签
段落标签
<p> </p>
换行标签
<br />
3.文本格式化标签
加粗
(推荐) or
<p>这是一个段落，<strong>我是加粗的标签</strong></p>
效果 ：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bsPxpx7L-1582779470368)(en-resource://database/480:1)]
倾斜
<em></em>（推荐） or <i></i>
删除线
<del></del>(推荐) or <s></s>
下划线
<ins></ins> (推荐)or <u></u>
4. 和
<div>我是div，每个div独占一行，每行一个div,我是division的缩写<div>
<span>helle,word 。我是span,</span>
5. 图像标签和路径
<img src="imgal.jpg"/> // srv属性：图片路径，是必须的。
<img src="imgal.jpg" alt="我alt属性，在图片加载不出来的时候可以替换”/>
<img src="imgal.jpg" title="我是提示属性"/>
其他属性：
width height border 分别设置图像的宽度，高度，和图像边框的粗细。
总结：
src alt title width height border
注意点：
（1）图像标签拥有多个属性；
（2）属性之间不分先后顺序，属性之间要用空格隔开；
（3）属性采用键值对的格式，即key="value"的格式，属性=“属性值。
6.链接标签
<a href="跳转的目标" target="目标窗口弹出的方式"> 文本或者图像</a>
注 ：
target : 默认为_self,新窗口打开的方式为_blank
7.链接的分类
<html lange="zh-CN>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<h4>1.外部标签</h4>
<a href="https://www.baidu.com/" target="_self"> 我是一个超链接</a>
<h4>2.内部标签</h4>
<h4>3.空链接</h4>
<a href="#" target="_self">我是一个空链接</a>
<h4>4.下载链接：地址链接是文件，eg:.exe .zip等形式</h4>
<a href="demo.zip" target="_self">我是一个下载链接</a>
<h4>5.网页元素链接：文本，图片，表格，音频，视频等</h4>
<a href="#" target="_self"><img src="https://www.baidu.com/" alt="哦豁 "></img></a>
<h4 id="锚点链接id">6.锚点链接</h4>
<a href="#锚点链接id">我是一个锚点链接</a>
</body>
</html>
三.常见标签下
1.表格标签
(1)表格基本语法
<table>
<tr>
<td>单元格内容 <td>
</tr>
</table>
注释：
| 姓名 | 年龄 | 性别 |
| 小杨 | 永远18 | 男 |
（2）表头单元格 (table head)
<table>
<tr>
<th>单元格内容 <th>
</tr>
</ta>
注释：
表头单元格也是单元格，不过内容居中加粗。
（3）表格属性
表格属性添加在table标签的头标签后面
align 对齐 ：left center right
border 是否拥有边框 ：1 or ""(没有边框)
cellpadding 单元格内容和边框的内容，默认为1像素
cellspacing 单元格边框之间的留白，默认2像素
width 表格的宽度
height 表格的高度
eg ：
<table align="center" border="1" cellpading="1" cellspacing="2">
<tr> <th>姓名</th> <th>年龄</th><th>性别</th></tr>
<tr> <td>小杨</td><td>永远18</td><td>男</td><tr>
</table>
<table>
<tr>
<th>排名</th>
<th>关键字</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>鬼吹灯</td>
<td>100</td>
<td>1000</td>
<td><a href="#">贴吧</a> <a href="#">baidu</a></td>
</tr>
</table>
(4)表格结构标签
<thead></thead> 用于定义表格的头部。<tbody></tbody> 用于定义表格的主体，用于存放数据本体。
（5）合并单元格
跨行合并 ：rowspan=“合并的个数”
最上侧单元格为目标单元格（写合并代码）
跨列合并 ：colspan=“合并的个数”
最左侧单元格为目标单元格
合并三部曲：
1.确定合并的是列还是行
2.在目标单元格添加合并代码
3.删除多余的行
eg :
<table border="1" width="500" height="249" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
效果图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HWWdwHmM-1582779470370)(en-resource://database/482:1)]
2.列表
（1）概述
如果说表格是用来展示数据的，那么列表就是用来布局的，让网页更加的整洁，有序。
（2）无序列表(unordered list)
语法 ：
<ul>
<li>序列一</li>
<li>序列二</li>
</ul>
(3)有序列表（orderly list）
语法 ：
<ol>
<li>我是有序列表1</li>
<li>我是有序列表2</li>
</ol>
（4)自定义列表（definition list）
语法：
<dl>
<dt>名词1</dt>
<dd>名词1衍生1</dd>
<dd>名词1衍生2</dd>
</dl>
注释：
- 标签用来描述自定义列表
- 和
- 一起使用
总结：
（1）和
- 标签里面只能包含
- 标签；
（2） - 标签里面可以放任何元素
（3）- 标签里面只能放
- 标签
(4) - 里面可以放任何标签
- 标签
3.表单
（1）表单的构成 ：表单域，表单控件（表单元素)，提示信息。
（2）表单域 ：标签用于定义表单域，以实现用户信息的收集和传递。
语法：
<form action="url地址" method="提交方式" name="表单域名称">
各种表单插件
</form>
（3）表单控件（表单元素）
表单元素
语法：
<form>
<input 属性=“属性值”/>
</form>
属性：
（1）name ：input 元素的名称。
（2）type ： input元素的类型
type属性值：
text 文本 默认20个字符
radio 定义单选框
checkbox 定义复选框
submit 定义提交按钮
password 定义密码字段
file 定义文件上传
button 一般配合js使用
（3） value ： 规定input元素的值
eg :
<form>
<!-- 实现简单的输入框-->
账号 <input type="text"/><br />
密码 <input type="password"/><br />
验证码 <input type="text" />
<!-- button属性一般配合js实现-->
<input type="button" value="获取验证码"><br />
<!--实现单选框 -->
性别 <input type="radio" name="radio1"/>男<input type="radio" name="radio1"/>女<br />
<!-- 实现复选框-->
绝活 <input type="checkbox" name="checkbox1" checked="checked"/>html<input type="checkbox" name="checkbox1"/>php<input type="checkbox" name="checkbox1"/>python
<!-- 上传file属input性，用于上传文件--><br />
上传头像 <input type="file">
<!-- 提交按钮--><br />
<input type="submit" value="提交"/>
<!-- 清除 按钮-->
<input type="reset" value="清除">
</form>
注：
1.要实现单选和多选，name属性的值要相同。
效果
效果 ：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QCJOBFbC-1582779470371)(en-resource://database/490:1)]
4.
用于绑定一个表单元素，当点击
<label for="nan">男</label>
<input type="radio" id="nan">
5.表单元素
用于下拉选择列表
语法：
<select>
<!-- selected表示默认选中-->
<option selected="selected">选项一</option>
<option>选项二</option>
<option >选项三</option>
</select>
6.表单元素（文本域元素）
当用户输入的内容较多的时候，可以用文本域元素
<textarea>
</textarea>
来源：CSDN
作者：Redemption Read
链接：https://blog.csdn.net/qq_43107752/article/details/104534386