语法规范
标签是由尖括号包围的关键词。通常是成对出现的，双标签；也有单标签。
<html>
<head></head>；和<html>是包含关系
<body></body>；和<head>是并列关系
</html> ：一对出现，双标签
<br/> ：单标签
标签的关系：包含关系、并列关系
基本结构标签
<html>
<head>
<title>页面的名字</title>
</head>
<body>
存放页面内容的位置
</body>
</html>
<html></html> HTML标签 页面中最大的标签，称为根标签。
<titile></titile> 文档头部 必须要设置的标签是titile
<head></head> 文档标题 让页面有用一个属于自己的网页标题文档主体
<body></body> 页面元素 包含文档的所有内容，页面内容基本是放到body里面的
常用标签
标题标签：
<h1>-<h6>（重要双标签，一共6级）
<h1>我是一级标签</h1>
head的缩写，作为标题使用，并且重要性递减
特点：
1. 加了标题的文字会变的加粗，字号也会依次变大。
2. 一个标题独占一行。
段落和换行标签：
<p>我是一个段落</p>
特点：
1.文本会根据浏览器的宽度自动换行
2.段落与段落之间保有空隙
<br />换行标签。强制换行
特点：
1.单标签
2.只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
文本格式化标签：
<strong> 加粗 </strong>
<b> 加粗 </b>
<em> 倾斜 <em/>
<i> 倾斜 </i>
<del> 删除线 </del>
<s> 删除线 </s>
<ins> 下划线 </ins>
<u> 下划线 </u>
没有语义的标签：
<div><span>标签：就是一个盒子，用来装内容
<div> 独占一行 </div>
<span> 一行可以放多个 </span>
图像标签
<img src="图像URL" alt=“替换文字”
title=“鼠标经过显示的文字”
width=“500(数字)”
height="500"
border="15">
src 是<img>标签的 必须属性，指定图像文件的路径和文件名
alt 替换文本 图像显示不出来的时候用文字替换
title 鼠标经过时候显示的文字
width 设置图像的宽度(宽度高度通常只改一个，等比例缩放)
height 设置图像的高度
border 设置图像的边框
超链接标签
外部链接：
<a href="目标地址" target=“目标窗口的打开方式”>文本或图像</a>
href 必须属性：网址
target _blank:新窗口打开 _self:当前窗口打开
内部链接： href=“网址名.html”
空链接： href="#"
下载链接： href="文件.exe/.zip"
锚点链接： 快速定位到页面中的某个位置
href ="#名字" 然后在目标位置中设置属性id=“名字”
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。（相对于HTML页面的位置）
绝对路径：直接到达目标位置的路径，通常从盘符开始。
{ 同一级目录：直接文件名
上一级目录："../文件名"
{ 下一级目录："文件夹/文件名"
关于链接的一些特殊属性
/* 未访问的链接 a:link */
a:link {
color: #888;
}
/* 已经访问过的链接 a:visited */
a:visited {
color: rgb(20, 245, 0);
}
/* 鼠标经过的链接 a:hover */
a:hover {
color: rgb(243, 2, 2);
}
/* 鼠标按下还没弹起的链接 a:active */
a:active {
color: rgb(6, 6, 247);
}
特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| “ ” | 空格符 |   |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2（上标2） | ² |
| ³ | 立方3（上标3） | ³ |
表格标签
<table> ;用于定义表格标签
<tr> ;用于定义表格中的行，必须嵌套在<table></table>标签中
<rd></td> ;用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
... ;td 指table date，单元格的内容
</tr>
...
</table>
表头单元格标签：位于表格的第一行或第一列
<tr>
<th>表头</th>
...
</tr>
表格的头部区域：<thead>
表格的主体区域：<tbody>
合并单元格
跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"
表格常用属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、reight | 规定表格相对周围元素的对齐方式 |
| border | 1或“” | 规定单元是否拥有边框，默认为“”，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
列表
无序列表： <ul> 中只能放列表项
<li> <li>里面放什么都可以
没有顺序级别、是并列的。
有序列表： <ol> 中只能有
<li> <li>有顺序会自动加上标号
自定义列表： <dl>定义列（只能有dt、dd）表
<dt>大内容
<dd>小内容
表单结构
三部分组成，表单域，表单控件（表单元素），提示信息。
<form> 用于定义表单域，把范围内的表单元素信息提交给服务器
action url地址 指定接收并处理表单数据的服务器程序的url地址
method get/post 设置表单数据的提交方式，取值为get或post
name 名字 指定表单的名字，以区分同一个页面中的多个表单域
表单元素：允许用户在表单中输入或者选择的内容
<input> 用于收集用户的信息，单标签
<input type="属性值" />
type属性设置不同的属性值用来指定不同的控件类型。
<lable> 为input元素定义标注（标签)，用于绑定一个表单元素 当点击<lable>标签内的文本时，浏览器会自动将光标或者选择对应的表单元素上，用来增加用户体验
<lable> 标签的for属性应与相关的input 属性id一模一样
表单属性
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） |
| checkbox | 定义复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段。该字段中的字符被掩码。 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮。重置按钮会清除表单中的所有数据 |
| submit | 定义提交按钮。提交按钮会把表单数据发送到服务器 |
| text | 定义单行的输入字段，用户可以在其中输入文本。默认宽度为20个字符 |
表单运用
<body>
<form>
<!-- text 文本框 用户可以里面输入如何文字-->
<!-- name 和 value 是每个表单元素都有的属性值，是给后台人员使用的 -->
<!-- maxlength 规定输入字段中的字符最大值 -->
<!-- lable标签的for属性应与相关的input 属性id一模一样 -->
<label for="text">用户名:</label><input type="text" id="text" name="username" value="请输入用户名" maxlength="6"><br>
<!-- password 密码框 用户看不见输入的密码-->
密码:<input type="password" name="pwd"><br>
<!-- radio 单选按钮 实现多选一-->
<!-- 单选按钮和复选框可以设置 checked 属性，当打开页面就默认选中这个按钮 -->
<!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选一 -->
性别: 男 <input type="radio" name="sex" value="男">
女<input type="radio" name="sex" value="女" checked="checked"><br>
<!-- checkbox 复选框 可以实现多选效果 -->
爱好:吃饭<input type="checkbox" checked="checked">
睡觉<input type="checkbox">
看书<input type="checkbox"><br>
<!-- 点击提交按钮 可以把表单fomr里面的表单元素里面的值 提交给后台服务器 -->
<input type="submit" value="免费注册">
<!-- 重置按钮 可以还原表单元素初始的默认状态 -->
<input type="reset" value="重新填写"><br>
<!-- button 普通按钮 后期结合js 搭配使用-->
<input type="button" value="获取短信验证码"><br>
<!-- 文件域 使用场景 上传文件使用的 -->
上传头像：<input type="file"><br>
<!-- select 下拉列表 至少有一对option
可以加selected="selected"默认选择-->
籍贯：
<select >
<option>北京</option>
<option>南昌</option>
<option>醴陵</option>
<option selected="selected">南京</option>
<option>天堂</option>
</select><br>
<!-- textarea文本域 定义多行文本输入控件-->
<!-- cols 一行显示字符数 rows 显示的最多行数 -->
反馈：
<textarea cols="50" rows="5">可以写默认文本</textarea>
</form>
</body>
/*光标定位的位置的样式*/
input:focus {
background-color: #f00;
color: #00f;
}
后记
学习笔记整理
学习地址：黑马程序员Web前端入门教程
课程超赞！！！
199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
