注：原笔记是在word文档中编写，部分注释无法被直接复制，是空的，后续请看分享的百度链接查看word文档。
HTML Week 3 学习笔记
图片路径
img 标签属性
<img src='图片路径' width='宽度' height='高度' title='鼠标悬停提示' alt='图片加载失败的提示'>路径表示
.是当前文件夹所在目录..是当前文件所在的目录的上级目录
示例：./../img/img.jpg
这个路径的意思就是当前文件夹的上一个文件夹里的 img 文件夹里的 img 图片，这里就是本地协议的路径，不能直接用C盘目录复制路径，通常不会用 ./ 写的很复杂，如果超过两个
..就会直接用本地路径代替。
元素分类
- 块元素：在页面中独占一整行
- 行内元素：不会独占一行
元素之间的关系
- 父标签，子标签
- 祖先标签，后代标签
- 兄弟标签
表格进阶
基本结构
<table> <tr> <td></td> <td></td> </tr></table>单元格合并
单元格合并是从左往右，从下到上合并的。
处理思路：想要合并单元格，实际上是进行了被合并单元格的删除，未被删除的单元格将占据被删除的单元格所占据的长度。
合并属性
- rowspan：跨行合并（竖着合并）
- colspan：跨列合并（横着合并）
合并示例
<table width="800px" border="2px"> <caption><b>同学通讯录</b></caption> <tr align="center"> <th bgcolor="red">姓名</th> <td>性别</td> <td>电话</td> <td colspan="2">兴趣爱好</td> <td></td><!-- 把这一部分删掉，然后在第四行的时候使用跨列合并 --> </tr></table>如果最后一行没有内容，高度会被压缩的很小很不美观。我们可以设置单元格标签的高度：
<tr height="50px">
其他属性
cellspacing：用来设置单元格之间的距离，如果设置为0则会成为黑色的实线bgcolor：设置背景的颜色align：设置格式（center 居中显示）
实体字符
有些字符不能在浏览器中正常显示，需要用实体字符的办法替换。
类似 C 语言的
\n，会解读成其他的意思。
表单
表单可以输入文字，也可以有按钮，用于和用户交互，如输入账号密码然后返回后端检查查看是否正确。
表单标签
- 标签是
<form> - action：动作地址，指的是把用户的信息提交到哪里
- method：提交方式，有 get 和 post，默认是 get
- name：命名表单，可以方便查找标签
命名规范
- 字幕，数字，下划线
- 不能以数字开头（和 C 语言一样）
表单项
表单项基本上都是 input 标签，通过 type 属性不同，在浏览器显示的效果不同。
<form action="服务器地址" method="get" name="name1"> 账号：<input type="text"></form>input type 属性值
| type 属性值 | 说明 |
|---|---|
text | 输入文本 |
password | 输入密码，会有隐藏效果 |
submit | 提交按钮 |
reset | 重置按钮 |
button | 普通按钮（与 JS 连用） |
radio | 单选按钮 |
checkbox | 多选按钮 |
重要属性
placeholder：输入框中显示文字，当用户输入的时候文字就会消失value：指定初始默认填充文本的元素，对于 text 是预先设置的底部文字，对于 button、submit、reset 则是设置按钮显示的文字name：表单项必须有 name 属性，否则无法传输给服务器
提交方式对比
- GET：在浏览器地址栏显示地址，不安全，传递参数最大不能超过 2kb
- POST：不在浏览器显示地址，相对安全，理论上没有大小限制
一个中文在 GBK 编码占用 2 字节，在 UTF-8 中占用 3 字节。
单选框
input 的 type 是 radio（意思就是单选），一组单选选项的 name 必须一致才可以使用。
问题一：<input type="radio" name="111">你是聪明人吗？问题二：<input type="radio" name="111">你是好孩子吗？value 重要性
像单选按钮这种表单项，用户没有输入只有勾选，必须写 value，否则会全部提交 on：
问题一：<input type="radio" name="111" value="聪明人">你是聪明人吗？问题二：<input type="radio" name="111" value="好孩子">你是好孩子吗？如果不写 value，系统只会默认提交给服务器你勾选了某个框的信息，却不会告诉系统你勾选了什么，而 value 就是告诉系统你勾选了哪个。
复选框
复选框就是能选好几个的选项框，type 是 checkbox，和单选一样：
- 没有 name 也不会提交
- 一组复选框的 name 应该是一样的
- 也需要写 value 才能传输过去
重置按钮
把表单的内容恢复到最初，大多数时候就是清空。
<input type="reset" value="清空">当你按下这个清空按钮时，页面就会在不刷新不重新加载的情况重置表单选项。
普通按钮
按下后没有任何作用，和 JS 绑定使用。type 是 button。
下拉列表
<select> 标签用于创建下拉列表，<option> 用于定义下拉列表的每一个项：
<select name="111" id="222"> <option value="">西安</option> <option value="">北京</option> <option value="">广州</option></select>下拉列表传递参数的方式是通过 value。
多行文本框
使用 textarea（文本区域），具有 cols 属性和 rows 属性：
<textarea name="111" id="222" cols="30" rows="10"></textarea>cols：这个多行文本框有多少列rows：有多少行- 右下角有一个可以拉动的点，可以随意在页面调整文本框的大小
label 标签
用于提升用户的体验，配合 radio 和 checkbox 使用，可以让点击单选或复选框的时候，点击文字也可以选择。
<input type="radio" name="sex" id="woman" value="woman"><label for="woman">女</label>id 属性
任何标签都可以写 id 属性，可以为标签指定唯一的身份，在同一个页面的 id 是不能重复的。
表单属性汇总
| 属性 | 说明 |
|---|---|
placeholder | 输入框中显示文字 |
autofocus | 自动聚焦，打开页面后自动在这个框内可以输入 |
checked | 默认选中某个单选按钮或复选框 |
selected | 对下拉列表用，设置默认的选择 |
minlength / maxlength | 最少/最多可以输入的字符数 |
readonly | 只读，不能修改，用户只能查看不能修改 |
disabled | 只能看，不能点击选中（颜色默认是灰色的），可以复制，不会提交给服务器 |
网页布局
布局：就是摆放元素的位置。
布局标签
最常用的两个无语义布局标签：
- div：块元素，把 div 标签当作容器使用
- span：行内元素，少数微调的时候使用
大多数时候布局都是使用 div（当作容器理解），少数微调的时候使用 span。