html 标签

定义

• 超文本标记语言（HyperText Markup Language），决定网页内容的含义和结构。
  

常用的标签

<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h6>六级标题标签</h6>

<p>段落标签</p>

<span>容器标签</span>

<div>容器标签</div>

<strong>粗体标签</strong>

<em>斜体标签</em>

<del>中划线标签</del>

<ol type="a" start="2">
  <li>有序列表标签</li>
  <li>type属性为排序方式有(A 1 a i I)等</li>
  <li>reversed="reversed"倒排</li>
  <li>start属性用于设置从第几个开始排</li>
</ol>

<ul type="square">
  <li>无序列表标签</li>
  <li>type="disc"以实心圆为默认初始样式</li>
  <li>type="square"以方块为默认初始样式</li>
  <li>type="circle"为空心圆默认初始样式</li>
</ul>

<address>地址标签</address>

<h3>&lt;br&gt; <br />换行标签</h3>
<h3>水平线标签<hr></h3>
<h3>& n b s p ;&nbsp;空格符</h3>
<h3> & l t ; &lt;符， & g t ; &gt;符</h3>
<h3>html注释格式：<!-- 需要注释的文本，标签或文本注释后不会在页面中显示 --></h3>



<img src="./引入的图片地址" alt="图片未加载成功显示这段文字" title='鼠标hover上图片时，显示这段文字'>
<img src="./引入不正确的图片地址" alt="图片未加载成功显示这段文字" title='鼠标hover上图片时，显示这段文字'>

<br>
<a href="链接的地址">网站的名字</a>
<br>
<a href="https://www.baidu.com" target="_blank">在新标签中打开百度</a>
<br>
<a href="tel:4123211232434">给4123211232434号码打电话（需要在PC和手机上同时登录Chrome）</a>
<br>
<a href="milto:xxxxx@163.com">给xxx发邮件（需要浏览器默认开启邮箱应用）</a>
<br>
<a href="javascript:var num = 1; while(num < 10){alert('还需要再点击'+ (10 - num) +'次确定按钮~'); num++;}">协议限定符（执行js脚本）</a>
<br>

<!-- 文本输入框 当 type 的值为 number 时，输入框里的数字会转为一个十进制的数字，选中后只能输入纯数字 -->
<input type="text">

<!-- 表单标签  提交数据会刷新整个页面-->
<form method="get" acthon="">
  <!-- method  发送数据的方式（get post）  acthon发送地址 -->
  <p>
    用户名: <input type="text" name="username">
  </p>
  <p>
    密码: <input type="password" name="password">
  </p>
  <input type="submit"> <!-- 提交按钮-->
</form>


<!-- lable标签 -->
<form method="get" acthon="">
  <label for="username"> 用户名: </label>
  <input type="text" id="username" name="username">

  <!-- lable 标签里 for 绑定了一个唯一 input 的 id,通过这样的绑定可以实现点击 lable 里面的文本也可以选中输入框 -->
  <label for="password"> 密码: </label>
  <input type="password" name="password" id="password">
  <input type="submit">
</form>



<!-- 表单的单复选标签 -->
<form method="get" acthon="">
  <!-- type="radio"是单选框  checkbox是复选框  需要规定相同的name值  给input添加 checked="checked" 为默认选中-->
  1.贝克汉姆<input type="radio" name="star" value="xiaobei">
  2.莱昂纳多<input type="radio" name="star" value="xiaolai">
  3.吴彦祖<input type="radio" name="star" checked value="xiaonan">
  <input type="submit">
</form>


<!-- 下拉表单 -->
<form method="get" acthon="">
  <h1>Province</h1>
  <select name="province">
    <!-- 下拉菜单的作用  提交的数据值为value-->
    <option value="1">beijing</option>
    <option value="2">shanghai</option>
    <option value="3">gungzou</option>
  </select>
  <input type="submit">
</form>

<!--文本域标签-->
<textarea placeholder="说点什么吧！"></textarea>

• 打开页面的图片（其他需要交互的标签可以复制上面的代码根据注释在打开的页面中测试）。


标签的分类

块级标签

• 特点：独占一行；可直接css改变宽高。
• 常见的标签：div、ul、li、ol、h1~h6、p、form、address
  

内联标签

• 特点：内容决定元素所占位置大小（并排显示）；不可直接通过css改变宽高
• 常见的标签：pan、strong、em、a、i、del
  

内联块元素

• 特点：内容决定元素所占位置大小（并排显示）；能够直接通过css改变宽高
• img、button、input
  

标签分类的原理

• 由标签的 css 中可操作的隐式属性 display 控制
  • 属性值为 inline 时，该标签为内联元素
  • 属性值为 block 时，该标签为块级元素
  • 属性值为 inline-block 时，该标签为内联快元素
  • 当属性值为 none 时，不但会消除页面上元素的样式，还会抹除元素，无法通过控制台来找到元素
• 凡是带有inline属性的元素都具有文本特性（两元素间有间隙）
  

伪元素

1. 伪元素是以子标签的形式存在于每个标签里的最前（before伪元素）和最后（after伪元素）
2. 伪元素天生为内联元素，常用伪元素 after 来清除父元素里的子元素的浮动流。
3. 生成方式：

div::after{
  content: '';   
  display: block;   
  height: 100px;   
  width: 100px;   
  background-color: red; 
}

元素嵌套

1. 内联标签只可嵌套内联标签
2. 块级标签可以嵌套任何标签（p标签不能嵌套块级标签，会把p标签截成两个p标签）
3. a标签不能互相嵌套

完整篇