HTML初学
写在前面：推荐初学者在w3school上学习
❤w3school快捷通道❤
—————————————————————————
Web标准构成的三部分：
- 结构 ：HTML
- 表现 ：CSS
- 行为：JS
W3C：万维网联盟
网页技术三层分离：
- 结构标准语言：HTML（超文本标记语言）,XHTML（可扩展标记语言）， 负责描述页面的语义。
- 表现标准语言CSS（层叠样式表）：负责描述页面的样式。
- 行为标准：主要包括对象模型 如DOM（文档对象模型）、JavaScript（标准脚本语言）等，负责描述页面的动态效果。
html 超文本标记语言
HTML文档 = 网页
web浏览器的作用是读取HTML文档。
<!DOCTYPE html> //h5文档类型声明
<html lang="en"> //根标签
<head>
<meta charset="UTF-8"> // 编码方式
<title>Document</title> //标题
</head>
<body>
</body> //主体
</html>
<!--标签一般成对存在，也有单标签。-->
常用标签:
块级标签：（特点是独占一行）
1. h1 h2 h3 h4 h5 h6 标题
注：一个网站用一个h1，一般放logo或者网站标题
2. p 段落
3. br 换行
4. div 块
5. ul 无序列表
6. ol 有序列表
7. li 列表项
8. dl dt dd 自定义列表
注：style="text-align :center"只针对块标签
行级标签：
1. span 区分样式
2. strong 加粗，强调
3. b 加粗
4. em 倾斜，强调
5. i 倾斜
| 标签 | 说明 | 标签 | 说明 |
|---|---|---|---|
| b | 加粗 | strong | 加粗 |
| u | 下划线 | ins | 下划线 |
| i | 倾斜 | em | 倾斜 |
| s | 删除 | del | 删除 |
注意，第二列标签含有特殊含义，开发过程中一般使用第二列。
相对路径：
相对路径：指的是由这个文件所在的路径引起的跟其他文件（或文件夹）的路径关系。
相对路径分类：
1.同级目录：./ ： 当前目录（即html文件所在的目录），可省略
2.上级目录：…/ ：上一级目录，如果想找再上一级的，用…/…/
3.下级目录：文件夹/
图片：
<img src = " " alt = " " title = " " width = " " height = " ">
属性介绍：
1. src 显示图像的URL
2. alt 图像的替代文本（图片无法显示时，显示alt中的文本）
3. width 设置图像的宽度
4. height 定义图像的高度
5. title 鼠标悬停出现的文字
音频
<audio src="" controls autoplay loop></audio>
属性：
1.src:目标音频的相对地址。
2.controls：显示音频控件
3. autoplay：自动播放（部分浏览器不支持）
4. loop：循环播放
视频
<video src="" controls autoplay muted loop></video>
属性：
1.src:目标视频的相对地址。
2.controls：显示视频控件
3. autoplay：自动播放（谷歌浏览器需要配合muted实现静音播放）
4. loop：循环播放
链接：
<a href = " " target = " "> </a>
属性介绍：
1. href 规定链接指向的页面的URL
2. target 规定在何处打开链接文档
- 默认 target =_self（即本页面跳转）
- 可修改为 target = _blank（新建空白页跳转）
链接用法：
1. 当前项目的页面跳转。
<a href = "目标页面的相对路径"> </a>
2.不同网站的页面跳转
<a href = "网址"> </a>
3.锚点链接 定位到页面具体位置
1. 找到需要定位的位置，添加id属性名
如<h1 id = "top"> 页面的头部</h1>
2. 给a标签的href添加定位标签的id并在前面加#
如<a href = "#top"> </a>
4.页面跳转 时同时定位
1. <a href = " 页面路径+锚点"> </a>
2. <a href = "test.html#part"></a>（页面跳转到test页面的part 部位）
图片链接：<a href = "目标页面相对路径或网址">
如：
<a href="http://xue.ujiuye.com">
<img src="logo.jpg">
</a>
表单：
列表
1. 无序列表
| 标签 | 说明 |
|---|---|
| ul | 表示列表整体，只能包含li |
| li | 列表每一项 |
2. 有序列表
| 标签 | 说明 |
|---|---|
| ol | 表示列表整体，只能包含li |
| li | 列表每一项 |
3. 自定义列表
| 标签 | 说明 |
|---|---|
| dl | 表示列表整体，只能包含dd或dt |
| dt | 列表标题 |
| dd | 列表项 |
表格
| 标签 | 说明 |
|---|---|
| table | 表格整体 |
| tr | 行 |
| td | 单元格 |
| th | 表头单元格 |
结构标签
| 标签 | 说明 |
|---|---|
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格尾部 |
属性：
| 标签 | 说明 |
|---|---|
| caption | 表格标题 |
| border | 边框宽度 |
| width | 表格宽度 |
| height | 表格高度 |
合并单元格：
- 原则：左上原则
- 跨行合并使用rowspan属性
- 跨列合并使用colspan属性
表单
表单要使用form标签包裹。
input系列
| 属性 | 说明 |
|---|---|
| text | 文本框 |
| radio | 单选框 |
| checkbox | 复选框 |
| file | 上传文件 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| button | 普通按钮 |
| password | 密码框 |
select系列
| 属性 | 说明 |
|---|---|
| select | 下拉列表整体 |
| option | 下拉列表选项 |
button系列
| 属性 | 说明 |
|---|---|
| submit | 提交 |
| reset | 重置 |
| button | 普通按钮 |
text area
文本域
label标签
直接使用lable标签把内容（如文本）和表单标签一起包裹。
form标签：
表单域包括 输入框、下拉列表、文本框
输入框（input）类型：
1. text 文本框
2. password 密码框
3. radio 单选框
- 单选按钮有互斥效果，name属性必须相同。
4.checkbox 复选框
5. file 上传按钮
6. submit 提交按钮
7.reset 重置按钮
8. button 按钮
9. image 图片形式按钮
10. select 定义下拉列表
11. option 下拉列表选项
12. textarea 多行文本（文本域）
<form action="">
<input type="text" name="" id="">
<input type="password" name="" id="">
<input type="radio" name="gender" id="">
<input type="radio" name="gender" id="">
<!-- 单选按钮有互斥效果，name属性必须相同。 -->
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="submit">
<input type="reset">
<input type="button" value = "普通按钮">
<input type="file">
<input type="image" src=" ">
<select name="" id="">
<option value="">AA</option>
<option value="">BB</option>
</select>
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- 横向能输入30个字，纵向能输入10个字 -->
</form>
form属性：
1. action 规定当提交表单时，像何处发送表单数据。
2. method 规定如何发送表单数据（表单数据发送到action属性所规定的页面）。表单数据可以作为 URL变量（method = “GET”） 或者HTTP post来发送（method = “POST”）
get 把数据放到地址栏上提交，有大小限制，安全性不好
post 数据大小没有限制，安全性较高。
3.name 属性用于对提交到服务器后的表单数据进行标识
4. value 为input元素设定值（默认值）
输入框的值
选项的值
按钮上的文字
5.checked 在页面加载时应该被预先选定的单选和复选选项
6. selected 规定在页面加载时预先选定的下拉列表选项
7. readonly 规定输入字段为只读（不能编辑）
8. disabled 规定应该禁用input元素（既不能编辑也不能提交）
9. maxlength 规定输入字段允许的最大长度
10. size规定下拉列表中可见选项的数目
表格：
表格标签：
1. table 表格
2. tr 行
3. td 单元格
4. th 表头单元格
5. thead 表格的表头
6. tbody 标签表格主体（正文）
7. tfoot 表格的页脚（脚注或表注）
8. caption 表格标题
<tr>
<th>编号</th>
<th>姓名</th>
<th>分数</th>
</tr>
<tr>
<td>01</td>
<td>嘟嘟</td>
<td>100</td>
</tr>
</table>
表格属性：
1. border 边框
2. cellpadding 单元格边距
3. cellspacing 单元格间距
4. colspan 单元格可横跨的列数
* 写到要横跨的单元格标签上，如： <td colspan="2">01</td> //横跨两列
5.rowspan 单元格可竖跨的行数
* 写到要竖跨的单元格标签上，如：<td rowspan="2">小嘟</td> //竖跨两行
浙公网安备 33010602011771号