一、文本格式化标签

二、 HTML常用标签

1、图像标签 img

2、超链接标签 a

2.1 作用：从一个页面链接到另一个页面
2.2 语法格式：<a href=" 跳转目标" target="目标窗口的弹出方式" >文本或图像 </a>

连接分类	例子
外部链接	< a href="http:// www.baidu.com ">百度</a>
内部链接	< a href=" index.html "首页</a>
空链接	< a href=" # "首页</a> 没有确定链接目标时
下载链接	如果href里面的地址是一个文件或者是压缩包，会下载文件
网页元素链接	网页中的各种网页元素，如文本、图像、表格、音频、视频等 都可以添加超链接
	可以快速的定位到页面的某个位置
	- 1、在链接的文本的href属性中，设置属性值为 #名字 的形式，如 <a href = "#two">第二集</a> 点击这里
	- 2、找到目标位置标签，里面添加一个 id属性= 刚才的名字，如<h4 id="two">第二集开始</h4> 跳转到这里

3、表格标签

3.1 基本

标签	说明
thead	表格的头部区域
tbody	表格的主体区域
1. <table> </table>	是用于定义表格的标签。
2. <th></th>	表格的表头部分（table header）
3. <tr> </tr>	标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
4. <td> </td>	用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。（table data）

3.2表格属性：

3.3 合并单元格

• 跨行合并 ： rowspan=“合并单元格的个数”
• 跨列合并 ： colspan=“合并单元格的个数”
• 跨行：最上侧单元格为目标单元格，写合并代码

• 跨列：最左侧单元格为目标单元格，写合并代码

  
  
  image.png

：

1、确认是 跨行 还是 夸列
2、找到目标单元格 写上代码 如：<td colspan='2'> </td>
3、删除多余的单元格
这里就需要删除第三格

image.png

4、列表标签

作用：用来布局

分为：

• 无序列表（重要）ul li

• 有序列表 ol li

• 自定义列表（重要）

4.1 无序列表

    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>

 list-style: none; 
//去掉li前面的 项目符号（小圆点）

image.png

注意:

• 无需列表的各项列表项之间没有顺序级别之分，是并列的；
• <ul></ul>中只能嵌套<li></li>,输入其他标签和文字是不被允许的；(有序列表一样)
• <li></li>之间相当于一个容器，可以容纳所有元素；(有序列表一样)
• 无需列表会带有自己的属性，所以在实际的开发中，会将其属性用css来设置掉；(有序列表一样)

4.2 有序列表

    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>

image.png

4.3 自定义列表（重点）

定义：

• 常用于对术语或名词进行解释和描述
• 定义列表的列表项前没有任何项目符号

• <dl></dl>里面啊只能包含<dt> <dd>;
  <dt><dd>个数没有限制，一般一个<dt>对应多个<dd>

  
  
  image.png

    <dl>
        <dt>标题一</dt>
        <dd>标题一解释1</dd>
        <dd>标题一解释2</dd>
        <dd>标题一解释3</dd>
    </dl>
    <dl>
        <dt>标题二</dt>
        <dd>标题二解释1</dd>
        <dd>标题二解释2</dd>
        <dd>标题二解释3</dd>
    </dl>

image.png

5、表单标签

image.png

5.1目的：收集用户信息

5.2组成：表单域、表单元素（表单控件）、提示信息

<form></form> 会将它范围内的表单元素信息提交给服务器

    <form action="url地址" method="提交方式（post get）" name="表单域名称（区分多个表单域）">
        表单元素
    </form>

5.3表单元素 input <label>

5.3.1 表单元素 input

• type属性值 <input type="属性值" />

• 其他属性值

• name value 属性主要给后台人员使用
• name 表单元素的名字，要求 单选按钮和复选框 要有相同的name值
• checked 属性主要针对于 单选按钮 和 复选框 ；一打开页面就默认选中某个表单元素。

5.3.2<label>标签

//点击文字某某某 也可以选上checkbox  for对应id
    <label for="sex">某某某</label>
    <input type="checkbox" name="sex" id="sex">

    <label for="xx">
    学习<input type="checkbox" id="xx">
    </label>

//实现功能，单选框 只能选择其中一个
    <label for="sex1">女</label><input type="radio" id="sex1" name="sex">
    <label for="sex2">男</label><input type="radio" id="sex2" name="sex">

5.3.3 select 下拉列表

//select 中 至少包含一对option 
// selected='selected' 定义默认选项
    <select>
        <option >1</option>
        <option selected='selected'>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>

5.3.4 textarea 标签

//多行文本输入框 cols每行字符数  rows显示的行数  
// 在实际开发中，用css来改变大小
<textarea cols="30" rows="10"></textarea>

6 、 特殊字符

特殊字符	描述	字符的代码()
	空格符	&nbsp
<	小于号	&lt
>	大于号	&gt

image.png

7、HTML5 新增的语义化标签

• 这种语义化标准主要是针对搜索引擎的
• 这些新标签页面中可以使用多次

<div class=“header”> </div> 
<div class=“nav”> </div> 
<div class=“content”> </div> 
<div class=“footer”> </div> 

• <header>：头部标签
• <nav>：导航标签
• <article>：内容标签
• <section>：定义文档某个区域
• <aside>：侧边栏标签
• <footer>：尾部标签

image.png

8 、HTML5 新增的多媒体标签

8.1 视频<video>

<video src="文件地址" controls="controls"></video>  

<video controls="controls" width="300"> 
   <source src="move.ogg" type="video/ogg" >  
   <source src="move.mp4" type="video/mp4" >  
   您的浏览器暂不支持 <video> 标签播放视频  
</ video > 

8.2 音频<audio>

<audio src="文件地址" controls="controls"></audio> 
< audio controls="controls" >  
  <source src="happy.mp3" type="audio/mpeg" > 
  <source src="happy.ogg" type="audio/ogg" > 
  您的浏览器暂不支持 <audio> 标签。  
</ audio>

9、HTML5 新增的 input 类型

10、HTML5 新增的表单属性

可以通过以下设置方式修改placeholder里面的字体颜色：
input::placeholder {  color: pink;  }