本文详细介绍了HTML的基础知识，包括HTML的定义、浏览器内核、Web标准的构成，以及HTML的基本标签和语法规范。重点讲解了文本标题、文本格式化、图像、路径、超链接、列表、表格、表单等常用标签的使用，为初学者提供了一个全面的HTML入门教程。
一、HTML基础
1、网站与网页
网页：由图片、文字、视频、声音等元素构成的页面，后缀名是.hmtl/.htm
网站：很多网页的集合
2、HTML定义
HTML：超文本标记语言（Hyper Text Markup Language），用来描述网页的一种语言
XHTML：可扩展超文本标记语言(标识语言)，语法比HTML更严格
文件命名规范：名称全用小写的英文字母、数字、下划线的组合，其中不包括汉字、空格和特殊字符，必须以英文字母开头
注：html不是编程语言，而是一种标记语言
3、浏览器内核
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息。计算网页的显示方式并显示页面。
4、Web标准
(1) Web标准是由W3C（万维网联盟）和其他组织制定的一系列标准的集合
(2) Web标准的构成：结构、表现、行为
结构：对网页元素进行整理和分类，主要是html；
表现：用于设置网页元素的版式、颜色、大小等外观样式，主要是css；
行为：网页模型的定义以及交互的编写，主要是javascript；
二、HTML标签
HTML语言由标签和属性组成
标签：长在尖角号后面的第一个单词，称作“标签”；
属性：长在标签后面并且用空格隔开的，称作“属性”（属性值和属性用=连接，并且属性值放在双引号里面）
（一）HTML语法规范
- 由尖括号和元素组成<html></html>；
- Html标签通常是成对出现的，称为双标签，<开始标签></结束标签>；
- 极少数是单个标签，如<br />,称为单标签或空标签；
（二）HTML基本标签
<!DOCTYPE html>:声明文档类型的标签
<html> 元素是 HTML 页面的根元素
<html lang=”en”>:定义当前文档显示语言 en--英文，zh-CN--中文
<meta charset=”utf-8”>:定义文档的字符编码
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容1、html代码分为两部分：
a、头部描述区：<head></head>
b、本身内容区：<body></body>
作用：在页面中看到的内容都在body中
2、标签分为两类
（1）单标签【空标记】:只有开始标记
语法：<标签 属性=“属性值” 属性1=“属性值” />
（2）双标签【常规标记】：标签成对出现
语法：<标签 属性=“属性值” 属性1=“属性值”></标签>
三、标签
1、文本标题标签
（1）语法：<h1></h1>： H1有唯一性 ，一个页面只能出现一次 ，一般用来放logo
共有6个标签（h1~h6）
语义：作为标题使用，并且依据重要性递减
特点：文字加粗、从大到小、独占一行
2、文本格式化标签
| 标签 | 语义 | 作用 | 特点 |
| <p></p> | 段落 | 将网页分中的文字分段显示 | 两个段落之间会有空隙， |
| <br /> | 换行 | 强制换行 | 单标签;开始新的一行，没有类似段落之间的间隙 |
| <i></i> 或 <em></em> | 倾斜 | 文字倾斜 | |
| <b></b> 或 <strong></strong> | 加粗 | 加粗标签 | |
| <u></u>或 <ins></ins> | 下划线 | 下划线 | |
| <hr /> | 水平线 | 水平线（空标签） | |
| <sup></sup> | 上标 | 上标 | |
| <sub></sub> | 下标 | 下标 | |
| <del></del>或 <s></s> | 删除线 | 删除线 |
3、盒子标签
| 标签 | 语义 | 特点 |
| <div></div> | 分割；分区 | 一个div独占一行（大盒子） |
| <span></span> | 跨度；跨距 | 一行可以放多个span（小盒子） |
4、图像标签
<img src=" " title=" " alt=" " border=" " height=" " width=" "> | 属性 | 属性值 | 说明 |
| src | 图片的路径和 | 必须属性 |
| alt | 文本 | 替换图片（当图片损坏或加载不出来时，显示alt中的文本）为空也要存在 |
| title | 文本 | 提示信息，鼠标放在图片上显示的文字 |
| height | 像素 | 设置图片的高度 |
| width | 像素 | 设置图片的宽度 |
| border | 像素 | 设置图片的边框 |
- img标签添加的图片默认不是占一整行空间；
- 若要让图片等比拉伸, 只需要改变图片的高度或者宽度；
5、路径
目录文件夹与根目录
- 目录文件夹：就是普通的文件夹；
- 根目录:打开目录文件夹的第一层就是根目录；
相对路径和绝对路径
- 绝对路径：指目录下的绝对位置。直接到达目标位置记，通常是从盘符开始的，如：C:\users\default\downloads，或者可以是网络上的唯一位置。
- 相对路径：以应用文件所在位置为参考，而建立出来的目录路径
分类 符号 说明 图述 同一级路径 两个文件在同一级，
如<img src="cat.gif" />
下一级路径 / 目标文件在当前文件的下一级，
如<img src="xxx/cat.gif" />
上一级路径 ../ 目标文件在当前文件的上一级，
如<img src="../cat.gif" />
6、字符实体（后面加分号；）
| 标签 | 含义 |
|  ； | 不换行的空格 |
| >； | >右尖括号 |
| <； | <左尖括号 |
| ©； | © 备案中图标版权 |
| &trade；®； | 商标 ™；® |
6、超链接标签
语法：<a href=”链接网址（http协议必须遵守）” target=” 目标窗口的弹出方式” title=“ 提示信息”></a>
| 属性 | 属性值 | 含义 |
| href | 链接网址 | |
| target | 1、_self:默认的，关闭原窗口 打开新窗口 2、_blank:打开新窗口 保留原窗口 | 目标窗口的弹出方式 |
| title | 文本 | 提示信息 |
链接分类：
（1）内部链接：网站之间的页面互相切换
（2）外部链接：如http://www.baidu.com
（3）空链接：#
（4）下载链接：地址链接的是文件.exe或者zip等压缩包形式，点击会下载这个文件
（5）网页元素超链接：网页中的各种元素都可以，视频，图片文字等
（6）锚点链接：点击链接可以快速定位到页面种的某个位置
步骤一：在链接文本的href属性中，设置属性值为#名字的形式。如<a href=”#one” >第一集</a>
步骤二：找到目标位置标签，里面添加id属性=名字，<h3 id=”one”>第一集内容</h3>
1、<!--外部链接-->
<a href="http://www.baidu.com" target="_blank">外部链接</a>
2、<!--内部链接-->
<a href="basic.html" target="_blank">内部链接</a>
3、<!--空链接-->
<a href="#" target="_blank">空链接</a>
4、<!--文件下载链接-->
<a href="form.zip" target="_blank">文件下载链接</a>
5、<!--网页元素链接-->
<a href="http://www.baidu.com"><img src="../../img/5.jpg" alt="美图" title="这是网页元素的链接"></a>
6、<!-- 锚点链接 -->
<a href="#top" target="_blank">跳转头部</a>
<h3 id="top">我是头部</h3>7、列表标签：用来布局
(1)无序列表
<ul>
<li>
</li>
</ul>
- 无序列表的各个列表之间没有顺序级别之分，是并列的。
- <ul>除了<li>不允许嵌套任何标签，<li>可以放其他标签，默认的是黑色实心圆
<ul>的type属性：disc、circle、square、none
(2)有序列表
<ol>
<li>
</li>
</ol>
<ol type=” 1/a/A/I/i” start=“数字”> 设置列表符号格式、起始字符的索引号
（3）自定义列表
<dl>
<dt>名词</dt>
<dd>解释内容1<dd>
<dd>解释内容2<dd>
</dl>
8、表格标签
（1）<div></div> :块标签 用来设置文档区域，是文档布局常用对象，独占一行
网页布局顺序：从上到下、从左到右
（2）<span></span>:文本节点标签，可以是某段文本，或是某个字，一行可以有多个
（3）表格作用：显示数据
语法：<table>
<tr>
<td></td>
</tr>
</table>（4）表格标签属性
| 属性名 | 属性值 | 描述 |
| tr | 行 | |
| td | 列 | |
| width | 像素值或百分比 | 表格的宽度 |
| height | 像素值或百分比 | 表格的高度 |
| border | 1或" " | 表格的边框 |
| bordercolor | 边框的颜色 | |
| bgcolor | 表格的背景颜色 | |
| cellspacing | 像素值 | 单元格与单元格之间的间距（一般为0） |
| cellpadding | 像素值 | 单元格与内容之间的距离（一般为0） |
| align | left、center、right | 表格水平对齐方式 |
| valign | top、middle、bottom | 垂直对齐 |
（5）表格结构标签
<thead>表格头部标签</thead>：必须要包含tr标签
<tbody>表格身体标签</tbody>
（6）合并单元格（td属性）
合并原则：只要跨行的都是合并行，不跨行的都是合并列
无论合并行还是合并列，操作都是td，跟tr没关系
合并列：colspan="要合并的单元格列数"
合并行：rowspan="要合并的单元格行数"
合并方法：1、先确定是行合并还是列合并
2、找到目标单元格，添加合并代码，colspan/rowspan
3、删除掉多余的单元格代码
9、表单
表单是用来收集用户信息，一个完整的表单通常由表单控件、表单域和提示信息组成。
（1）、格式：<form action="路径 " method="post/get" name=”表单名称” ></form>
（2）、属性：
| 属性 | 属性值 | 作用 |
| action | url地址 | 用于指定接收并处理表单数据的服务器的程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式 |
| name | 表单名称 | 用于指定表单名称，以区分同一个页面中的多个表单域 |
（3）、post与get的区别：
（4）、表单控件 大部分表单控件由input完成
<input type=”text/password/submit/button/reset” name=” ” value=” ” size=” ” maxlength=” ”/>
type属性的取值及属性值：
| 属性值 | 描述 |
| text | 文本框 |
| password | 密码框 |
| reset | 重置按钮 |
| submit | 提交按钮 |
| button | 空按钮 |
| checkbox | 复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图片形式的提交按钮 |
| radio | 定义单选按钮，必须给取值定义同一个name值 |
input属性：
name属性：属性标识表单域的名称
value属性：定义表单域的默认值
- name和value是每个表单元素都有的属性值，只要给后台人员使用。
- name是表单元素的名字，要求单选按钮和复选框要有相同的name值。
maxlength属性：控制最多输入的字符
checked属性：规定此input元素首次加载时应当被选中，取值为checked。
size属性：控制框的宽度（以字符为单位）
placeholder属性：隐藏提示信息
（5）、表格与表单的嵌套
<table>
<form action="" method="">
<tr>
<td><input type=” ” value=” ” name=” ”></td>
</tr>
</form>
</table>（6）、下拉表单：
语法：<select name="" id="">
<option value=" ">选项1</option>
<option value=" " selected="selected">选项2</option>
<option value=" ">选项3</option>
</select>
注意：<select>标签至少包含一对<option>选项;
selected="selected":当前选项即为默认选项；
<select>中可以包含多个option， <option>标签中添加 selected="selected"，默认显示当前下拉框中的内容
（7）label标签
<label>标签为input元素定义的标签。
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转移到对应的表单元素上。
语法:
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
注意：<label>标签的for属性应当与相关元素的id属性相同。
（8）、文本域
用于定义多行文本的输入控件，可以输入更多的文字，常见与留言板评论
语法：<textarea name="" id="" cols="30" rows="10">文本内容</textarea>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
