一、HTML简介
1.HTML是什么?
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
2.作用
制作网页，控制网页和内容的显示
插入图片、音乐、视频、动画等多媒体
通过链接来检索信息
使用表单获取用户的信息，实现交互
3.版本
w3c:world wide web consortium万维网联盟，制定web技术相关标准和规范的组织，HTML激素hi由w3c制定的标准
两个版本:HTML4.0.1、HTML5.0-----通常H5
官网：http://www.W3shcool.com.cn
（备注）
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，
比如HTML 标签通常是成对出现的，
比如 和标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 元素
“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签
HTML元素
开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。
HTML 元素以开始标签起始，HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content），空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
元素可以嵌套
不要忘记结束标签
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。比如
，HTML、XHTML 和 XML 都接受这种方
使用小写标签；
Web 浏览器
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。
浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：
-
head 里面不显示，只有 区域 (白色部分) 才会在浏览器中显示。
二、HTML文档结构
1.基本结构
1.1简介
HTML标签是由尖括号括起来的关键词，如,通常是成对出现的,如
以 为根标签，包含： 头部和主体部分
头部提供关于网页的相关信息，如标题、文档类型、字符编码、关键字等摘要信息
主体部分提供网页的显示内容，真正显示在页面中的内容
合理的进行缩进
标签名不区分大小写，但是一般要用小写
使用！+tab创建格式中文编码
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。
1.2 软件的使用
打开sublime_text —新建文件
Ctrl+S 保存
1.3浏览器
常见的浏览器：IE浏览器微软、chrome谷哥浏览器、fifirefox火狐、safari苹果
浏览器的作用是读取html文件，并以网页的形式来显示
浏览器不会直接显示html标签，而是使用标签来解释网页的内容
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如 和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
2.1标签的组成
一个完整的html标签的组成：
<标签名 属性名=“属性值”>内容</标签名>
如
`<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面名称(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
在这里插入代码片
2.2标签的分类
根据标签是否关闭，分为，关闭型和非关闭型
关闭型：有结束标签，即标签成对出现
如<html></html>
<head></head>
<title></title>
非关闭型：没有结束标签
如`<meta>
<br>
<h1>....<h6>
`
根据标签是否独占一行，分为块级标签和行级标签
块级标签：显示为块状，独占一行
如`<h1>大家好</h1>
<hr>
行级标签：在行内显示，可与其他内容在同一行显示
如 <span></span>
2.3注释
注释在浏览器中不会显示,是用来标注解释html语句,但通过查看源代码的方式可以看到
语法:
如：`<--注释内容-->`
2.4实体字符
也称为特殊字符,用于显示一些特殊符号,如<>&空格等
语法:
如： <&实体字符的名称>
2.5文档类型
在html文档的第一行,使用<!DOCTYPE html>
声明HTML文档的类型用来告诉浏览器页面的文档嘞型,用来制定html版本的规范
目前基本上最常用的html5
2.5文档类型
在html文档的第一行,使用
声明HTML文档的类型用来告诉浏览器页面的文档嘞型,用来制定html版本的规范
目前基本上最常用的html5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
1.基本标签
标签 含义 说明
br 换行标签 非关闭型
p 段落标签 关闭型，块级标签，前后段落之间有明显的距离
h1、h2、…h6 标题标签 按照h1到h6逐渐变小，块级标签，加粗显示
pre 预格式化标签 保留编码时的格式
div 分区标签 常用作容器来使用，一般用于页面的布局划分，，块级标签
span 范围标签 默认没有任何效果，一般用来设置行内的特殊样式
ol、li 有序列表 有顺序的项目列表
ui、li 无序列表 无顺序的项目列表
dl、dt、dd 定义列表 对术语、图片等进行描述而定义的列表
hr 水平线标签 非关闭型标签，块级标签
img 图像标签 非关闭型标签，行级标签
1.1 有序列表
ol:ordered listli:list item默认使用阿拉伯数字、从1开始标记，可以通过属性进行修改
· type属性：设置列表的符号标记、取值；数字1（默认）、字母（a或A）、罗马数字(i或I) · start属性：设置起始值，值必须是数字
1.2 无序列表
ul:unodered list
li:list item
默认情况下使用实心圆表作为符号标记，可以通过属性进行修改
· type属性：设置列表的符号标记、取值：disc实心圆（默认）、circle空心圆、square正方形、none不 显示项目符号
1.3 定义列表
dl:definition list
dt:definition title
dd:definition description
1.4 水平线标签
hr:horizontal
常用属性：
· color:颜色
两种方式：
颜色名称：如red、green、blue、white、black、pink、orange等
16进制的RGB表示法：Red、Green、Blue用法：#RRGGBB 每种颜色的取值范值0-255，转换为16 进制00-FF
如: #FF0000 红色 #00FF00绿色 #0000FF蓝色 #FFFFFF白色、#CCCCCC #FF7300桔色
· size:粗细，数值
· width宽度
两种写法：
像素：绝对值（固定值）
百分比：相对值，相对于水平线标签所在父容器宽度的百分比
· align对齐
取值：center居中 left right
1.5图像标签
img:image
常见的图片格式：.jpg .png .gif .bmp
常见的属性：
· src:source指定图片的路径（来源），必选叁数
如果图片与html源代码在同一个文件夹中，可以直接在src中写图片名称即可
习惯上，我们会将多个图片与html代码文档分别放在同一个文件夹project中的不同目录下，此时需要 在src中指定图片的路径为相对路径
路径的分类：
相对路径
表示： ./当前路径
…/当前位置的上一级文件夹
提示：…/image
· alt:当图片无法显示时显示的提示信息
· title:当鼠标放到图片上时显示的提示信息
· width和 height:设置图片的宽度和高度
默认图片以原始尺寸显示
如果只设置其中一个，则另一个会按比例缩放
如果同时设置宽和高，可能导致图片变形
两种写法：
像素：绝对值（固定值）
百分比：相对值，相对于父容器的尺寸的百分比
3.头部标签
· meta定义网页的摘要信息，如字符编码，关键词，描述，作者等
· title定义网页的标题
· style定义内容css样式
· link引用外部css样式
· script定义或引用脚本
· base定义基础路径
表格
1.简介
表格是一个规则的行列结构，每个表格是由若干行组成，每行由若干个单元格组成
table row column
2.基本结构
2.1 table标签
用来定义表格
常用属性：
border:表格边框 默认为0 width/height：宽度/高度 bordercolor:边框的颜色 align:对齐方式，取值：left(默认) center居中 right居右 bgcolor:背景颜色 background:背景图片 cellspacing间距：单元格与单元格之间的距离 cellpadding边距：单元格中的内容到边界之间的距离
2.2 tr标签
用来定义行：table row
常用属性：
align:水平对齐 取值：left(默认) center right valign垂直对齐 取值：top center bottom bgcolor:背景颜色 background:背景图片
2.3 td标签
用来定义单元格，table data
常用属性：align、valign、bgcolor、background
注意：表格必须是由行组成，行必须由单元格来组成，数据必须放到单元格中
如`表格由
| 标签定义）。 |
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
1 表格和边框属性
border=“1”
2 表格表头
标签,大多数浏览器会把表头显示为粗体居中的文本;<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
| 定义表格的表头 |
|---|
| 定义表格单元 |
eg
课程表
<tr>
<th rowspan="2">上午</th>
<th>9:30-10:15</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
</tr>
<tr>
<th>10:25-11:10</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
</tr>
<tr>
<th colspan="7"></th>
</tr>
<tr>
<th rowspan="2">下午</th>
<th>14:30-15:15</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
</tr>
<tr>
<th>15:25-16:10</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
<th>语文</th>
</tr>
| 时间\日期 | 一 | 二 | 三 | 四 | 五 | |
|---|---|---|---|---|---|---|
HTML 列表
HTML 支持有序、无序和定义列表
如`1 无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用
- 标签
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
2 有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于
- 标签。每个列表项始于
- 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
3 自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以
-
标签开始。每个自定义列表项以
开始。每个自定义列表项的定义以
- 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
<dl> 定义列表
<dt> 自定义列表项目
<dd> 定义自定列表项的描述`
4.1下拉列表
select常用属性：
·name名称
·size行数，同时显示多个选项
·multiple允许同时选择多个
option常用属性：
·value选项值
·selected设置默认选中项
optgroup常用属性：
·label分组的标签
4.2文本域
·name名称
·rows行数
·cols列数
202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
