HTML基础篇

1 什么是HTML
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

常用标签
标题标签<h1>-<h6>
双标签
标签语义：作为标题使用，并且重要性递减
特点：加了标题标签的文字字体变粗、字号变大、独占一行
 

段落标签<p>
双标签
标签语义：把文字内容分割为若干段落，有条理地显示
特点：文本在一个段落中会根据浏览器窗口大小自动换行、段落与段落之间保有空隙
在HTML中不管多少空格、回车都只显示一个
 

换行标签<br />
单标签
标签语义：强制换行
特点：换行标签只是开始新的一行，跟段落不一样，段落之间会插入一些垂直距离
 

文本格式化标签
双标签
标签语义：突出重要性，为文字设置粗体、斜线、下划线等效果
语义    标签
加粗    <strong></strong>或者<b></b>
倾斜    <em></em>或者<i></i>
删除线    <del></del>或者<s></s>
下划线    
<ins></ins>或者<u></u>

<div>和<span>标签
双标签
<div>和<span>是没有语义的，他们是一个盒子，用于布局、装内容
<div>类似一个大盒子，单独占一行
<span>类似一个小盒子，一行上可有多个<span>标签
 

图像标签和路径<img src="图像URL" />
1.图像标签<img />
单标签，一行可放多个
用于定义HTML页面中的图像
src是<img>标签的必须属性（属于该标签的特性），用于指定图像文件的路径和文件名
属性    属性值    说明
src    图片路径    必须属性
alt    文本    替换文本，图片不能显示时的替代文字
title    文本    提示文本，鼠标放到图片上显示的文字
width    像素    设置图像的宽度
height    像素    设置图像的高度
 border    像素    设置图像的边框粗细
其中，width和height一般只设置一个，避免压缩图像，另一个会等比例缩放，border一般在css中设置。

2.路径
目录文件夹：里面存放页面所需的相关素材的文件夹，如html文件、图片、css文件等
根目录：打开目录文件夹的第一层就是根目录
通常建立一个文件夹（images）来存放图像文件，这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置
1.相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。即图片相对于html页面的位置。

相对路径分类    符号    说明
同一级路径         图像文件位于HTML文件同一级，如<img src="baidu.gif" />
下一级路径    /    图像文件位于HTML文件下一级，如<img src="images/baidu.gif" />
上一级路径    ../    图像文件位于HTML文件上一级，如<img src="../baidu.gif" />
2.绝对路径：目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径或完整的网络路径

例如，"D:\web\img\logo.gif"或者"http://www.itcast.cn/images/logo.gif"

相对路径中反斜杠用"/"，绝对路径中反斜杠用"\"

超链接标签<a>
双标签，a为anchor缩写，意为锚
用于定义超链接，作用是从一个页面跳转到另一个页面
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性    属性值
href    指定链接目标的url地址（必须属性）
target    
指定链接页面的打开方式 

_self为默认值，在当前页面打开，_blank为在新窗口中打开

链接分类
1.外部链接：如<a href="http://www.baidu.com">百度</a>，链接URL以http://开始

2.内部链接：网站内部页面之间的相互连接，直接连接内部页面名称即可，如<a href="index.html">首页</a>

3.空链接：如果当时没有确定链接目标时，<a href="#">首页</a>

4.下载链接：如果href里面地址是一个.exe文件或者zip压缩包，会下载这个文件）

5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接

6.锚点链接：点击链接可以快速定位到页面中的某一位置

在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>
找到目标位置标签，里面添加一个id属性 = 刚才的名字，如<h3 id="two">第二季介绍</h3>
 

注释标签
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签，注释以"<!--"开头，以"-->"结束。

<!-- 注释语句 -->   快捷键：command + /

特殊字符
在HTML中，一些特殊符号很难或不方便直接使用，可以用以下字符代替

表格标签
表格用于显示、展示数据
对于布局整齐的页面，可以用<table>来帮助对齐

1.基本语法
<table>
    <tr>
        <td>单元格内的文字</td>
        ···
    </tr>
    ···
</table>
1.<table></table>是用于定义表格的标签

2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中

3.<td></td>标签用于定义表格中的单元格，必须嵌套在<tr></tr>标签中（td指table data）

2.表头单元格标签<th>
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示，如

<table>
    <tr>
        <th>姓名</th>
        ···
    </tr>
    <tr>
        <td>张三</td>
        ···
    </tr>
    ···
</table>
 

3.表格相关属性
实际开发中不常用，后面通过CSS来设置 ！这些属性写在<table>标签里

属性名    属性    描述
align    left、center、right    规定表格相对周围元素的对齐方式
border    1或“”    规定表格单元是否有边框，默认为“”，没有边框
cellpadding    像素值    规定单元格边沿与其内容之间的空白，默认1px
cellspacing    像素值    规定单元格子间的空白，默认2px
width    像素值或百分比    规定表格的宽度
 

4.表格结构标签
为了更好的表示表格的语义/结构，可将表格分割成表格头部和表格主体两大部分，用<thead>标签表示表格的头部区域，<tbody>标签表示表格的主体区域

<table>
<thead>
    <tr>
        <th>姓名</th>
        ···
    </tr>
</thead>
<tbody>
    <tr>
        <td>张三</td>
        ···
    </tr>
    ···
</tbody>
</table>
 

5.合并单元格
把多个单元格合并为一个单元格

1.合并单元格方式

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

2.目标单元格

跨行：最上侧单元格为目标单元格，写合并代码

跨列：最左侧单元格为目标单元格，写合并代码

3.合并单元格步骤

第一步 确定跨行还是跨列

第二步 找到目标单元格，写上合并方式=合并的单元格数量，比如<td colspan="2"></td>

第三步 删除多余的单元格

列表
双标签
用于布局，列表最大的特点就是整齐、整洁、有序
根据使用场景的不同，列表可分为三大类：无序列表、有序列表和自定义列表

1.无序列表
<ul>标签表示HTML页面中项目的无序列表，而列表项使用<li>标签定义
无序列表的基本语法格式：
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ···
</ul>
注意：
无序列表的各个列表项之间没有顺序，是并列的
<ul></ul>中只能嵌套<li></li>
<li>与</li>之间相当于一个容器，可以嵌套所有元素
无序列表会带有自己的样式属性，但在实际使用时，使用CSS设置
 

2.有序列表
<ol>标签用于定义有序列表，列表排序以数字来显示，使用<li>标签来定义列表项
有序列表的基本语法格式：
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ···
</ol>
注意：
<ol></ol>中只能嵌套<li></li>
<li>与</li>之间相当于一个容器，可以嵌套所有元素
有序列表会带有自己的样式属性，但在实际使用时，使用CSS设置
 

3.自定义列表
使用场景：用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
<dl>标签用于定义列表，<dt>标签定义项目/名字，<dd>标签描述每一个项目/名字
基本语法：
<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
    ···
</dl>
注意：
<dl></dl>中只能包含<dt>和<dd>
<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>
<dt>与<dd>是并列关系
 

表单标签
使用场景：注册页面
使用表单的目的是为了与用户进行交互，收集用户信息
一个完整的表单通常由表单域、表单控件（表单元素）和信息元素3个部分构成
 

1.表单域
表单域是一个包含表单元素的区域
<form>标签用于定义表单域，以实现用户信息的收集和传递，<form>会把他范围内的表单元素信息提交给服务器（双标签）
基本语法
<form action="url地址" method="提交方式" name="表单域名词">
    各种表单元素控件
</form>
常用属性（学习js后重新详细解释）：

属性    属性值    作用
action    url地址    用于指定接受并处理表单数据的服务器程序的url地址
method    get/post    用于设置表单数据的提交方式，其取值为get或post
name    名称    用于指定表单的名称，以区分同一个页面中的多个表单域
 

2.表单元素
允许用户在表单中输入或者选择的内容控件
1.input输入表单元素

<input />标签用于收集用户信息（单标签）
 <input>标签包含一个type属性，根据不同的type属性值，来指定不同的控件类型
属性值    描述    注
text    定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符    value属性值显示为默认值
password    定义密码字段，该字段中的字符被隐藏     
radio    定义单选按钮    实现多选一时，多个单选按钮需要同样的name属性值
checkbox    定义复选框    复选框也需要同样的name属性值
submit    定义提交按钮，提交按钮会把表单数据发送给服务器    value值可改变按钮上的显示字符
reset    定义重置按钮，重置按钮会清除表单中的所有数据，还原到默认状态     
button    定义可点击按钮（多数情况下，用于通过js启动脚本）    如发送验证码按钮
file    定义输入字段和“浏览”按钮，供文件上传     
hidden    定义隐藏的输入字段     
image    定义图像形式的提交按钮     
 

除type属性外，<input>标签还有其他很多属性，其常用属性如下：
属性    属性值    描述
name    由用户自定义    定义input元素的名称
value    由用户自定义    规定input元素的值
checked    checked    规定此input元素首次加载时应当被选中
maxlength    正整数    规定输入字段中的字符的最大长度
 

name和value是每个表单元素都有的属性值，主要给后台人员使用

checked属性主要针对于单选按钮和复选框

额外知识：<label>标签

双标签
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验
语法：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心：<label>标签的for属性应当于相关元素的id属性相同

2.select下拉表单元素

双标签
使用场景：如果有多个选项让用户选择，并且想要节约页面空间时，使用<select>标签定义下拉列表
语法
<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ···
</select>
<select>至少包含一对<option></option>，<select>包含在<form></form>中

在<option>中定义selected="selected"时，当前项为默认选中项

3.textarea文本域元素

双标签
使用场景：当用户输入内容较多的情况下，就不能使用文本框表单了，可以使用<textarea>标签定义多方文本输入控件，常用于留言板、评论
语法
<textarea rows="3" cols="20">
    这里显示默认文本内容，且会显示于标签间的空格
</textarea>
包含在<form></form>中