【6-2】HTML

HTML

概念

1. 分类：围堵标签，自闭和标签
2. 内部是可以定义属性的，属性由键值对组成，值需要用双引号引起来，多个属性用空格隔开
3. 不区分大小写

HTML文档的基本结构

1. 也叫web页面；
2. head，头元素：
   作用：1、用于指定HTML文章中的一些元数据，例如元数据 meta：定义页面的编码格式，title:定义页面的标题。2、引入外部的资源文件–未来讲解
3. body，主体：浏览器显示的内容都将在这里编写。
   格式化代码的快捷键：ctrl+shift+f（英文状态下使用）

常用标签

1. 文本标签：

   标题标签 h1–h6：字体逐渐缩小

   段落标签p

   换行标签
   

   水平线标签

   ---

   范围标签：突出部分内容被强调的部分

2. 图片标签：

   <img src="相对路径" title="" width="" height=""/>

3. 列表标签

   一般用在导航上

   分类：无序列表，有序列表

4. 定义描述标签

   一般用在图文混编的场景中

   <dl>
   	<dt>盛放图片或标题</dt>(只能有一个)
   	<dd>补充对dt的描述或说明</dd>(可以有多个)
   </dl>
   

   ​

5. 布局标签 层 div

   做容器，盛放其他标签的，将其他标签组合在一起用来布局。

   ​

标签分类

1. 块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素；

   • 标题标签 h1-h6,
   • 段落标签 p ,
   • 水平线标签 hr,
   • 有序列表标签 ol–li，
   • 无序列表标签 ul–li，
   • 定义描述标签 dl-dt-dd，
   • 容器标签 div：

2. 行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。（不会重起一行）

   • 范围标签：span
   • 图像标签：img

   （PS:区分的简单方法：是否独占一行。块级元素可以设置宽高；行内元素设置宽高无效）

超链接

1. 页面间的跳转

   <a href="***.html" target="打开资源的位置">点击我试试</a> //target:默认值："_self"(当前页面打开)；"_blank"(在新页面打开)

2. 锚链接

   当一个页面长度超过一屏的时候，想迅速跳转到指定位置

   步骤1：定义锚点
   <a name="sport">运动户外</a>
   步骤2：引用刚刚的锚点
   <a href="#sport" target="_self">锚链接--点击可以跳转到运动户外</a>（本页面）
   <a href="***.html#sport" target="_self">锚链接--点击可以跳转到运动户外</a>（其他页面）
   

表格

1. 规则表格

   <table>
   	<tr>定义行，有几行就有几个tr
   		<th></th> 定义标题那一行的单元格
   	</tr>	
   	<tr>定义行，有几行就有几个tr
   		<td></td><td></td> 定义列，除了标题内容的单元格
   	</tr>
   </table>
   

2. 不规则表格–跨行和跨列

   <table>
   	<tr>
   		<td colspan="3"></td> 跨列，包含自己在内的列数，rowspan跨行
   	</tr>
   <table>
   	
   

3. 高级标签

   • 标题标签

   <caption></caption>
   

   • 逻辑分区标签

   <thead></thead>
   <tbody></tbody>
   <tfoot></tfoot>
   方便整体控制
   

表单

1. 用于采集用户输入的数据。用于和服务器进行交互。

2. 

3. 表单项元素中的一些属性：

   id:元素的唯一表示，不重复
   name:表单项元素的名称，很重要--提交数据到服务器之后，服务器获取数据通过该名称
   value:表单项元素的值，服务器获取数据通过name获取到的就是value
   type:表示表单项元素的呈现形式
   class:表示样式名称
   readonly:表示只读，用户只能看不能改
   disabled：表示禁用，该元素不能改而且背景是灰色
   

4. 文本框：
   <form type="text" id="" name=""></form>
   密码：
   <form type="password" id="" name=""></form>
   生日：
   <form type="datetime_local" id="" name=""></form>
   单选按钮：
   type="radio" name相同才表示一组 value checked(默认)
   复选框：
   type="checkbox" name相同才表示一组
   文件域：
   type="file" name multiple="multiple"(表示多个文件上传)
   隐藏域：
   type="hidden"
   下拉列表框:
   <select name="">
   	<option value="1">1</option>
   	<option value="2">2</option>
   	<option value="3">3</option>
   </select>
   文本域:
   <textarea rows="15" cols="10" readonly="readonly" >
   	********
   </textarea>
   
   

   按钮：
   

框架

1. 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
2. 

常用的布局组合标签

• div-ul-li/div-ol-li：常用于导航布局
• div-dl-dt-dd:常用于图文混编布局
• div-form:常用于表单布局
• div-table:常用于局部规则数据展示布局

HTML4与HTML5的区别

1. HTML4是为了适应pc时代产生的，HTML5是为了适应移动互联网时代

转义符号

转移符号 描述
  转义为空格

< 转义为小于号<
≤转义为小于等于号≤
>转义为大于号>
≥转义为大于等于号≥
单布局

• div-table:常用于局部规则数据展示布局

HTML4与HTML5的区别

1. HTML4是为了适应pc时代产生的，HTML5是为了适应移动互联网时代

转义符号

转移符号 描述
  转义为空格

< 转义为小于号<
≤转义为小于等于号≤
>转义为大于号>
≥转义为大于等于号≥
©转义为版权符号 ©