html5 基础

html5 基础

1.html 作用

序号	名称	描述	用途
1	HTML	超文本标记语言	页面结构
2	CSS	层叠样式表	元素样式与排列
3	JavaScript	前端通用脚本语言	元素行为与交互

2.超文本标记语言

序号	名称	描述
1	超文本	普通文本上添加 属性 定义特殊行为
2	标记	使用标签作为页面元素的标识符
3	语言	没有流程控制算不上真正的语言

3.元素

• 网页是 html 元素的集合：由功能各异的 html 元素按照一定的规则排列而成。

• 网页是二维平面：任何元素只存在垂直或水平两种排列方式
  根据元素的功能与排列方式 html 元素分为三类：

  | 序号 | 名称 | 描述 | 举例 |
  | —— | ————— | ———————————————————— | ———————— |
  | 1 | 块级元素 | 垂直排列，宽高可定义，与内容无关 | <div>,<p> |
  | 2 | 行内元素 | 水平排列，宽高由内容决定，无法自定义 | <span> ,<a> |
  | 3 | 行内块元素 | 水平排列，但宽高可定义，常用用于外部资源 | <img> ,<video> |

4.标签和属性

序号	名称	描述	举例
1	标签	元素的基本用途	<h3>Hello</h3>
2	属性	元素的基本特征	<h3 class="title" >Hello</h3>

5.标签分类

序号	名称	语法	描述对象
1	双标签	<h3 class="title" >Hello</h3>	自定义内容
2	单标签	<img src="1.jpg" alt="logo" >	外部资源

• 双标签：由起始标签和结束标签组成，属性写在起始标签中
• 单标签：也叫空标签，由属性制定描述对象，如src

6.属性分类

序号	名称	举例	描述
1	预置属性	<ul class="nav" >...</ul>	标签不同差异较大
2	自定义属性	<div data-index="5" >...</div>	用户根据需求自定

7.通用属性

尽管不同标签预置的属性各不相同，但也有一些公共属性，绝大多数标签都具有

序号	属性名称	描述	举例
1	id	元素唯一标识	<div idx="warp" >...</div>
2	class	给元素添加样式	<div class="box" >...</div>
3	style	设置当前元素样式	<div style="..." >...</div>

8.属性和值

序号	值类型	备注	描述
1	字符串	小写，值加双引号	<p class="active" >...</p>
2	预定义值	仅限预置	<input type="text" >
3	指定格式	url/email/…	<a href="https://baiduc.om" >...</a>
4	数值 px	默认像素 px	<table width="200" >...</table>
5	布尔值	存在即为 true	<input type="email" required >

9.元素的种类

• 标签的语化是元素的基本要求
• html5 提供了大量语义化的元素
• html 元素众多，但常用的并不多，我们重要放在以下几类元素上

序号	元素类型	描述	举例
1	结构元素	布局	<header> </header>, <main> ,<nav>
2	文本元素	内容	<p> ,<addr>,<strong>
3	链接元素	页面跳转	<a herf="..." >...</a>
4	列表元素	关联数据	<ul>+<li> <ol>+<li>
5	表格元素	数据格式化	<table><tbody> <tr><td></table>
6	表单元素	前后端交互	<form>+<label>+<input>
7	其他元素	不常用	<iframe>+</iframe> <video></video>

表单是前后端数据交互的重要通道，除了 url 之后，表单是非常重要的。
需要花费大量的时间研究学习和实践