1 HTML
1.1 HTML语法规范
1.第一个代码
<html>
<head>
<title> </title>
</head>
<body></body>
</html>
2.知识点
（1）双标签和单标签
（2）包含关系和并列关系
（3）html 页面中最大的标签，称为根标签
head 文档的头部，必须设置title标签
title 文档的标题
body 主体，存放页面的基本内容
1.2 常见标签
一、代码解析：
1.<!DOCTYPE html>文档类型声明，告诉浏览器使用哪种HTML版本显示网页。
2.<html lang="en">定义当前文档使用的语言，en定义语言为英语，zh-CN定义语言为中文。
3.<meta charset="UTF-8"> 必须写，字符集是多个字符的集合。UTF-8为万国码。
二、常用标签
1.标题标签<h1>-<h6>作为标题使用，并且依据重要性递减。
2.段落标签<p></p>
3.换行标签<br />
4.文本格式化标签
（1）粗体 <strong></strong>或<b></b>
（2）斜体<em></em>或<i></i>
（3）下划线<ins></ins>或<u></u>
（4）删除线<del></del>或<s></s>
（5）水平线<hr/>
5.<div>和<span>双标签、是没有语义的，是一个盒子，用来布局网页
（1）div 分割、一个人独占一行，超大的盒子。
（2）span 跨度，一行可以有多个span，小盒子
6.图像标签<img src="图像URL" alt="替代 " title=" 提示" width="" height=" " border=""/>单标签
注意：属性写在标签后面，不分顺序，采用键值对的格式 属性="属性值"
（1）src必须写,指定图像文件的路径和文件名 html和jpg在一起，直接写图片名字带着jpg。
（2）alt替换文本，图像显示不出来的时候用文字替代。
（3）title 提示文本。鼠标放在图像上显示的文字
（4）weidth 图像宽度 height 图像高度
（5）border 图像的边框粗细
7.路径 符号不一样 / 和 \
（1）绝对路径：从盘符开始的 G:\传智 前端学习\前端基础第一天\案例\img.jpg
（2）相对路径：图片相对于html页面的位置,更好。
同一级 src="baidu.jpg" 下一级 src="images/baidu.jpg" 上一级: ../ src="../baidu.jpg"
（1）格式
<a href="跳转目标：url地址(必须有)" target="目标窗口的弹出方式:_self为默认 _blank为在新窗口打开">文本 </a>
（2）链接分类：外部链接 href="<http://www.qq.com>" 内部链接: href="demo.html" 空链接 href="#"
（3）链接里是一个文件或者压缩包，会下载这个文件
（4）锚点链接：快速定位到页面的某个位置
href属性设置为#名字的形式，如<a href="#one">第一季</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="one">第一季介绍
9.注释标签:<!--注释--> 快捷键: ctrl+/
10.特殊字符(分号别忘记）
（1）空格：
（2）大于号：> 小于号：< 和号： & 乘号：× 除号：÷ 平方：² 立方：³
（3）人民币¥：¥
（4）版权：© 注册商标：®
（5）摄氏度：°
（6）正负号：±
1.3 表格
1. 表格标签：展示数据
<table> // 用于定义表格的标签
<tr> // 行
<td>单元格内的文字</td> // 单元格 几列写几个td
....
</tr>
...
</table>
2. 表头在第一行，突出重要性，格式：<th></th>，会加粗、居中。
3. 结构标签:包含在表格table标签里 。------- head第一行 tbody 主体
<thead> <tbody> <tfoot>
4. 标题<caption></caption>
5. 外观属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | Left、center 、right | 规定表格相对周围元素的对齐方式 |
| border | 1或”” | 规定表格单元是否有边框，默认””，无边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认两像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
6. 合并单元格
（1）方式：跨行：rowspan=”合并单元格个数” colspan=”合并单元格个数”
（2）目标单元格：
跨行：最上侧单元格为目标单元格，写合并代码。
跨列：最左侧单元格为目标单元格，写合并代码。
（3）步骤
先确定跨行还是跨列-->找到目标单元格 -->删除多余的单元格
1.4 列表-->布局
| type属性取值 | |
|---|---|
| 属性值 | 列表项符号 |
| disc | 实心圆●（默认值） |
| circle | 空心圆○ |
| square | 正方形■ |
1. 无序列表
<ul>
<li> 列表项1</li>
<li> 列表项2</li>
<li> 列表项3</li>
</ul>
| type属性取值 | |
|---|---|
| 属性值 | 列表项符号 |
| 1 | 阿拉伯数字：1、2、3…… |
| a | 小写英文字母：a、b、c…… |
| A | 大写英文字母：A、B、C…… |
| i | 小写罗马数字：i、ii、iii…… |
| I | 大写罗马数字：I、II、III…… |
2. 有序列表
<ol>
<li> 列表项1</li>
<li> 列表项2</li>
<li> 列表项3</li>
</ol>
3. 里面只能包含li,li相当于一个容器，可以容纳所有元素
4. 自定义列表（重点）：名词和描述。dl中只能放dt和dd。
<dl>
<dt>名词</dt>
<dd>描述</dd>
<dd>描述</dd>
……
</dl>
说 明： dl即definition list（定义列表）；dt即definition term（定义名词）；而dd即definition description（定义描述）。没有个数限制，经常一个dt对应多个dd。兄弟关系。
在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，dt标签用于添加要解释的名词，而dd标签用于添加该名词的具体解释。
表单：表单域form、表单元素、提示信息。
1. form标签
| form标签常用属性 | ||
|---|---|---|
| 属性 | 说明 | 作用 |
| name | 表单名称 | |
| method | 提交方式get/post | get的安全性较差，而post的安全性较好 |
| action | 提交地址:url地址 | 指定接收并处理表单数据的服务器程序的url地址 |
| target | 打开方式 | 指定窗口的打开方式 _blank |
| enctype | 编码方式 |
2. input输入标签：
属性：type、name 、value、cheaked、maxlength
<input type="radio" name="组名" value="取值" Checked />
name:对于同一组的单选框，必须要设置一个相同的name，区分表单元素
Value:给后台看的。text里显示的默认值
Checked：默认选中：<input type="radio" name="gender" value="男" checked />男
上传头像：<input type="file"/>
3. 单行文本框text和密码文本框password
常用属性 ：
| value | 设置文本框的默认值，也就是默认情况下文本框 |
|---|---|
| size | 设置文本框的长度 |
| maxlength | 设置文本框中最多可以输入的字符数 |
4. select下拉列表 selected默认选中
<select>
<option>选项1 </option>
<option>选项2 </option>
<option>选项3 </option>
</select>
| select标签常用属性 | |
|---|---|
| 属性 | 说明 |
| multiple | 设置下拉列表可以选择多项 |
| size | 设置下拉列表显示几个列表项，取值为整数 |
| option标签常用属性 | |
| 属性 | 说明 |
| selected | 是否选中 |
| value | 选项值 |
5. lable标签：input元素定义标注
标签用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将焦点（光标）转到或选择对应的表单元素上，用来增加用户体验。for属性和id属性值一样。
<label for="sex">男
<input type="radio" name="sex" id="sex" />
6. textarea文本域：双标签、多行、用于评论区、反馈 // cols列宽 rows行宽
