一.什么是HTML？
HTML：HyperText Markup Language 超文本标记语言
a：普通字母
<a></a>:超级文本，超链接
HTML的特点：
1.用带有尖括号的“标记”来标识
2.以.html或.htm为后缀
3.由浏览器解析执行
4.可以嵌套脚本语言（javascript）
2.HTML基础语法
1.标记
标记，又称元素或标签，在网页中表示一些功能。
标记在使用时，必须使用<>括起来，标记分为两种：
1.封闭类型（双标记）
必须成对出现，有开始和结束标记
语法：<标记>内容</标记>
ex:
<a>百度</a> 正确
<a>百度 错误
2.非封闭类型（单标记）
也称为空标记，只有一个标记，既表示开始又表示结束。
语法：<标记>或<标记/>
ex:
<img>或<img/>
二.标记的嵌套
1.什么是嵌套
在一对标记中出现另外一对（个）标记，从而形成功能的层叠。
2.语法
<标记>
<标记>
<标记/>
</标记>
</标记>
ex:
<a>
<b>
<img>
</b>
</a>
<a><b><img></b></a> 正确，不推荐
<a>
<b>
</img>
</a>
</b> 错误
嵌套注意问题：
1.嵌套顺序，换行缩进
2.成对出现，去嵌套其它的标记
3.属性和值
属性作用：修饰标记
语法：
<标记 属性名称1="值1" 属性名称2="值2"><标记/>
要求必须写在开始标记中，属性和值之间用等号连接，如果有多个属性，属性之间用空格隔开。
ex:
设置段落标记对齐方式为居中对齐
<p align="center"></p>
标准属性（通有属性）：
id:定义元素在页面中独一无二的标识
style:在css中，定义行内样式
class:在css中，引用类选则器
title:鼠标悬停时元素上所提示的文字
4.注释
语法：<!--注释内容-->
注意：
1.注释不能嵌套
2.也不能出现在标记中
三.HTML文档结构
1.HTML文档的声明
文档的声明:<!doctype html>
作用：告诉浏览器HTML的版本类型
2.HTML页面结构
根标记:<html></html>
在根标记中包含网页头和网页主体：
网页头：<head></head> 定义网页的全局信息
网页主体：<body></body> 显示网页的所有内容
3.head元素
head是其它头元素的容器
<title></title>:定义网页的标题
<meta>:定义全局信息，如：编码格式，关键词，描述内容，元标签等等。
<meta charset="utf-8"/>
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述内容"/>
<style></style>:定义内部样式
<script></script>:定义/引用js脚本
<link>:引入css文件
4.body元素
显示网页的所有内容
修饰body的属性：
text:定义整个网页的文字颜色
bgcolor:定义网页的背景颜色
四.文本标记(重点)
1.特殊字符
用一些转义字符来表示特殊的符号
&nbsp; 空格
&lt; 表示<
&gt; 表示>
&copy; @
&yen; ￥
&reg; ®
&times; 关闭符号x
2.文本样式标记
<b></b> 加粗
<i></i> 倾斜
<u></u> 下划线
<s></s> 删除线
<sub></sub> 下标
<sup></sup> 上标
3.标题元素
语法：<hn></hn> n:1-6
<h1>内容</h1>
...
<h6>内容</h6>
特点：
1.改变字体的大小
2.加粗显示
3.标题元素自带上下空白间距
4.独占一行
属性：
align:设置内容水平对齐方式
取值：
left:左
center:中
right:右
4.段落标记
语法：<p>内容</p>
特点：
1.独占一行，并且上下文之间有空白间距
2.字体无加粗和大小变化
属性：
align:设置内容在水平方向的对齐方式
取值:left/center/right
5.换行标记
语法：<br>或<br/>
6.分割线
语法：<hr>或</hr>
属性：
1.width 宽度，表示水平线的宽度，取值为px或%的数值。
2.align 水平线对齐方式，取值：left/center/right
3.size 表示水平线的尺寸（高度），取值为px或%的数值。
4.color 水平线的颜色，取值为合法的颜色值
练习：页面中添加一个水平线，设置尺寸为3px,宽度为50%，颜色为绿色，并居中对齐
7.预格式化
作用：用于保留html代码中回车和空格
语法：<pre></pre>
8.分区元素
1.块分区元素
作用：用于页面的布局
语法：<div></div>
特点：单独成行
2.行分区元素
作用：处理同一行文本的不同样式
语法：<span></span>
特点：包裹的内容在一行中显示
9.行内元素与块级元素
1.块级元素
在页面中独占一行，从上往下排列的元素
常见的块级元素：
h1-h6,p,div,列表,结构标记
2.行内元素
多个元素在一行中显示，从左往右排列的元素
常见的行内元素：
span,i,b,u,s,sup,sub
五.图像和链接
1.URL
URL：Uniform Resource Locator统一资源定位器
2.路径的表现形式
1.绝对路径
网络资源：协议+主机+文件目录结构+文件名称
本地绝对路径：C:\xampp\htdocs\yy\01-HTML\Day01
2.相对路径
从当前文件所在的位置开始查找资源所经过的路径，就是相对路径。
同级目录：直接引用 ex:jd_logo.png
子级目录：先进入，再引用 ex:img/page.jpg
父级目录：先返回，再引用 ex:../jd_logo1.png
3.根相对路径
永远是从web站点的根目录处开始查找
ex:/codeboy/img/a.jpg
3.图像格式
.jpg 压缩比率大
.png 背景透明
.gif 动画
4,图像元素
语法：<img>
属性：
src:指定要显示图像的url
width:指定图片的宽度 取值以px或%为单位的数字
height:指定图片的高度 取值以px或%为单位的数字
alt:图片无法正常显示时给的提示文字
注意：如果要修改图片的尺寸，一般只需修改其中一个属性值即可。
5.链接
1.语法：<a>内容</a>
属性：
1.href 指定链接的url
2.target 指定打开新网页的方式
取值：
1._self 默认值，在当前网页中打开新的网页
2._blank 在新的标签页中打开新网页
2.链接其它表现形式：
1.资源下载
让链接的url，链接到rar/zip的文件即可。
<a href="a.rar">下载</a>
2.电子邮件链接
<a href="mailto:g-yangyan@tedu.cn">打开邮件</a>
3.返回页面的顶部
<a href="#">返回页面顶部</a>
4.链接到js
<a href="javascript:js代码">执行js代码</a>
3.锚点
1.什么是锚点
锚点，就是网页中的一个记号，可以通过超链接跳转到记号位置处。
2.锚点的使用方式
1.定义锚点
1.使用a标记的name属性定义锚点
<a name="锚点名称"></a>
2.使用任意元素的id属性定义锚点
<any id="锚点名称"></any>
2.链接到锚点
1.链接到当前页面锚点
<a href="#锚点名称"></a>
2.链接到其它页面锚点位置处
<a href="网页url#锚点名称"></a>
六.表格
1.表格作用
按照一定结构显示数据，由单元格按照从左往右，从上到下的方式排列到一起。数据都保存 在单元格中，表格可以显示数据，也可以设置页面的布局。
2.表格语法
1.基本标记
表格：<table></table>
行： <tr></tr> table row
单元格/列：<td></td> table data
2.属性
1.table的属性
border:设置表格的边框 取值以px为单位的数字
width:设置表格的宽度
height:设置表格的高度
align:设置表格的水平对齐方式
取值：left/center/right
bgcolor:设置背景颜色 取值：合法的颜色值
cellpadding:设置单元格的内边距（内容与td之间的间距）
cellspacing:设置单元格的外边距（td边框与边框之间的间距）
2.tr的属性
align:设置当前行内容水平对齐方式
valign:设置当前行内容垂直对齐方式
取值：top/middle/bottom
bgcolor:设置当前行的背景颜色
3.td的属性
width:宽度
height:高度
align:水平对齐
valign:垂直对齐
bgcolor:单元格的背景颜色
colspan:跨列
rowspan:跨行
3.不规则表格的使用
1.跨列 colspan
从指定单元格位置处开始，横向向右合并几个单元格（包含自己），被合并掉的单元格要删除。
2.跨行 rowspan
从指定单元格位置处开始，纵向向下合并几个单元格（包含自己），被合并掉的单元格要删除。
4.可选标记
1.表格标题
<caption></caption>
如果设置标题的话，则必须位于<table>下的第一个子元素
2.行/列标题
<th></th>
所有td都可以用th替换
5.表格的复杂应用
1.表格嵌套
表格中所有被嵌套的内容只能放在td中。
ex:
<table>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
2.行分组
可以将连续的几个行，划分到一个组中，并进行统一管理。
1.表头行
<thead></thead>
表格中最上面一行进行分组的话，可以放在表头行中。
2.表主体行
<tbody></tbody>
允许将若干行放在tbody中，进行统一管理。
3.表尾行
<tfoot></tfoot>
表格中最后一行进行分组的话，可以放在表尾行中。
七.表格
1.列表的作用
按照从上到下的方式来显示所有数据（或从左往右显示），并且可以在数据前增加显示的标识。
2.列表的组成
1.列表的类型
有序列表：<ol></ol> order list
无序列表：<ul></ul> unorder list
2.列表项
用于表示列表中的数据（嵌套在列表中）
<li></li> list item
3.列表的属性
1.有序列的属性
1.type 指定列表标识类型
取值：
1 默认值，以数字排序
a 小写英文字母排序
A 大写英文字母排序
I 大写罗马数字排序
i 小写罗马数字排序
2.start 指定起始编号是从第 几 开始
取值：为无单位的数字
2.无序列表的属性
1.type 指定无序列表的标识
取值：
disc 实心圆
circle 空心圆
square 实心方块
none 不显示标识
4.列表的嵌套
在一个列表中又出现另外一个列表。
被嵌套的列表只能在li中出现
ex：
<ol>
<li>
<ul>
<li></li>
</ul>
</li>
</ol>
5.自定义列表
1.什么是自定义列表
定义列表常用于给一类事物或对名词进行解释说明。
2.语法
<dl></dl> 表示定义列表
<dt></dt> 表示列表中要解释说明的名词
<dd></dd> 表示列表中对名词解释的具体内容
ex：
<dl>
<dt>名词</dt>
<dd>解释的内容</dd>
</dl>
常用场合：图文混排。
扫一扫
4183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
