HTML学习笔记-02

一、HTML常用标签
1.超链接：点击显示其他内容

属性：
（1）href：设定超链接显示加载文件的路径
相对路径：源文件到目标文件的过程
绝对路径：网址，必须是带有网络传输协议的完整url地址。
——网络传输协议：数据在网络传输中,所遵守的标准和规范（https http ftp）
（2）target：设定超链接显示加载文件的方式
target="_self"：超链接，默认是在本窗口/当前窗口，显示超链接内容（一般不设定）
target="_blank"：在新窗口显示超链接内容

显示内容的支持：
（1）完全支持的显示内容：文本文件、图片、其他html文件
（2）完全不支持的内容：zip、rar等格式的文件，会变为下载形式
（3）根据浏览器不同,执行效果不同：音频、视频。浏览器对于音频视频的支持格式不同,相同超链接,href为相同的音频视频文件,不同的浏览器执行效果会有可能不同。（实际项目中 视频会统一使用flash格式播放）

如果超链接内容是一个PHP文件,必须通过服务器执行程序才能正常执行PHP文件中的程序,否则只会显示程序源代码

2.表格
table系列标签：在页面中实现表格效果,需要多个标签配合使用

table标签：定义表格的内容范围，必须有table标签定义表格内容,tr、th、td标签才会按照表格样式显示

tr标签：定义表格的行内容
th标签 / td标签：定义表格的单元格内容
th,td单元格标签的区别：
则表示标题,一般用在一列的第一格,里面的内容会自动加粗加黑，默认水平居中显示
表示内容单元格

合并单元格：合并单元格效果,显示为多个单元格合并为一个单元格的显示效果,实际中是通过改变单元格所占行数或者列数属性,达到显示效果。
（1）colspan：设定单元格所占列数，改变单元格的宽度
（2）rowspan：设定单元格所占行数，改变单元格的高度

合并单元格过程:
（1）找到正确的单元格,设定属性,定义单元格所占行数,列数
（2）删除多余的单元格

分区标签：
（1）thead：表格的“头部”
（2）tbody：表格的“主体”
（3）tfoot：表格的“底部”
（4）总结：

• 一个表结构中,可以没有thead,或者tfoot,一定有tbody
• 一个表结构中,只能有一个thead,一个tfoot
• 一个表结构中,可以定义多个tbody
• 凡是没有分区标签的tr,会默认添加tbody分区标签
• 添加thead分区标签的tr标签,会默认显示在所有内容的第一行
• 添加tfoot分区标签的tr标签,会默认显示在所有内容的最后一行
• thead,tfoot标签,要谨慎添加

总结：
（1）层级概念：
table > tr > td / th（表格 > 行 > 单元格）
执行效果 table > tbody > tr > td / th（表格 > 分区标签 > 行 > 单元格）
（2）th和td的区别
加粗、水平居中

3.form表单以及相关标签
（1）form表单
作用：收集标签中的数据信息，将数据信息传递给指定的对象
属性：
action：设定传参的对象
method：设定传参的方式
1）get：显性传参
2）post：隐形传参
enctype：设定上传文件的MIME编码格式，上传文件时专有属性。属性值：multipart/form-data

(2)input
属性：
type：设定input标签的类型和功能
name：设定标签的键名（标签名称,在传参过程中,就是标签数据的键名）
value：设定标签的数值，需要传递的数据参数

type常用属性值：
9个常用类型,type的属性值：
（1）文本框type="text"
文本数据,中文,英文,数字,符号等
不能换行
（2）密码框type="password"
文本数据,英文,数字,符号等
不能输入中文,不能换行
输入的内容默认显示为黑点
（3）单选框type="radio"
只能选中一个选项
必须要和input标签的name属性配合使用
name的属性值,一般与选择的数据相关
a. 相同name属性值的标签,是同一个分组
b. 同一个分组内的单选标签,只有一个可以被选中
点击下一个选项,取消上一个选项效果
（4）复选框type="checkbox"
可以选中多个选项
反向选取
（5）上传文件type="file"
通过点击,选择需要上传的文件
如果有input,type,file标签,必须设定enctype属性,会在php课程中详细介绍
（6） 隐藏框type="hidden"
在页面中不会有任何显示效果
可以通过设定,传递隐藏参数
（7） 按钮形式
type="submit" 提交按钮
type="reset" 重置按钮
type="button" 普通按钮
在实际项目中,多使用button标签实现效果
（8）按钮标签 button
属性 type="submit" 提交按钮,默认属性值,可以不写
type="reset" 重置按钮,恢复默认状态
type="button" 普通按钮,没有效果,配合JavaScript使用
（9）br标签 换行标签,起到换行的效果

name：设定标签名称
对于前端传参来说,设定的是标签的键名
标签如果需要传参,必须设定键名
如果多个标签name属性值相同,传递不同的参数,必须要添加[]——checkbox、file

value：设定标签的参数数值
text,password：设定为标签的默认数值,会显示在输入框中
radio,checkbox,hidden：没有输入框,必须通过value属性来设定标签的默认参数
file：只能通过点击选择文件,不支持value属性

checked：默认选中属性，布尔属性，不写属性值

placeholder：占位符

label标签：点击文字，选中标签

（3）select>option
select定义下拉列表框的范围
option定义下拉列表框的内容
name属性,定义传参的键名,写在select标签上
option标签要添加value属性,作为传参的数据,默认值是从0开始的整数

（4）textarea：不支持value属性，数值是标签内容

4.无序列表：ul>li
作为页面的结构布局使用
为了方便css样式的设定和加载，以及PHP程序的执行

5.字符实体
防止输入内容与标签符号冲突
可以输入特殊内容
常用的字符实体：
（1）空格： 
（2）&：&
（3）<：<
（4）>：>
（5）"："
（6）’：'或'（兼容低版本IE浏览器）
（7）©：© ——版权声明
（8）®：®——注册商标

二、HTML的代码规范
html文件的编码格式必须是没有BOM的utf-8
文档类型声明,格式必须规范
（1）DOCTYPE——大写
（2）html——小写
HTML标签名称,属性,必须小写
多个属性之间,必须有空格间隔
属性和属性值之间使用等号连接,属性值必须使用双引号包裹
单标签结尾处不要添加 / 闭合符号，如<img src="">——html5的语法规范格式
布尔属性,规定不写属性值
标签嵌套,被嵌套的标签,要有4个空格的缩进
html语言中,允许标签的嵌套,但是必须符合嵌套规范（css中会详细介绍）