本文介绍了HTML的基础概念，包括其工作原理、常见标签如标题、段落、链接、列表和布局等。重点讲解了如何编写html文档结构，超链接的使用以及各类标签的正确用法和实例。
一、概念
HTML是HyperText Markup Language的简称，中文名称：超文本标记语言，它是一种用于创建网页的
标准标记语言。
标记语言是由标签构成的语言。<标签名称>例如html，xml；标记语言不是编程语言。
HTML 运行在浏览器上，由浏览器来解析。
二、快速入门
- html文档的后缀名
.html和.htm两种都可以，没有区别。授课中都是.html后缀名，个人习惯不同而已。 - 标签的分类
围堵标签：有开始标签和结束标签，例如
自闭和标签：开始标签和结束标签都在一个标签中 - 标签可以嵌套，但是嵌套的语法要正确
正确案例：<p><a></a></p>
错误案例：<p><a></p></a>
- 标签的内部是可以定义属性的，属性由键值对组成，值需要用双引号引起来，多个属性用空格隔开
<标签名称 属性名1="属性值" 属性名2="属性值"></标签名称>
<p id="p1" name="p1">
</p>
三、HTML文档的基本结构
3.1、基本结构
<!-- 声明当前文档是html5文档 -->
<!DOCTYPE html>
<!-- html,根元素 ，围堵标签-->
<html>
<!--
head,头元素：
作用：
1、用于指定HTML文章中的一些元数据，
例如元数据 meta：定义页面的编码格式
title:定义页面的标题
2、引入外部的资源文件--未来讲解
-->
<head>
<meta charset="utf-8" />
<title>这是我的第一个HTML页面</title>
</head>
<!--body，主体：浏览器显示的内容都将在这里编写
格式化代码的快捷键：ctrl+shift+f（英文状态下使用）
-->
<body>
hello html 这是我的第一个HTML页面
</body>
</html>
3.2、HTML的注释
语法：
HTML注释以<!-- 开头 ，以-->结尾。
注释的部分浏览器不解析，注释是为了给程序员看，更好的了解html代码
<!--
这里编写HTML注释，
可以是一行，也可以是多行
-->
四、HTML中常用标签
4.1、文本标签
- 标题标签 h1–h6:字体逐渐缩小
一般用在文章的标题上
<body>
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
</body>
- 段落标签
一般用在正文
<body>
<h1>标题</h1>
<p>这是一个段落</p>
<p>这是另一个段落</p>
</body>
- 换行标签
一般用在段落中强制换行
<body>
<h1>标题</h1>
<p>这是一个段落<br/>这是另一个段落</p>
</body>
- 水平线标签
一般用来分隔内容。
<body>
<h1>标题</h1>
<p>这是一个段落<br/>这是另一个段落</p>
<hr/>
<hr color = "red" size = "5" />
</body>
- 范围标签
一般在大段内容中，为了突出部分内容的时候使用的标签；很少独立使用，一般嵌套在其他的标签中使用。
<body>
<h1>标题</h1>
<p><span style = "color : red; ">这是一个段落</span><br/>这是另一个段落</p>
</body>
- 图片标签
基本属性
<img src="img/cat.jpg" title="服不服?" width="200px" height="300px"/>
<!--img 显示图片
常用属性： src:指定图片的路径
路径分类：相对路径：推荐使用
例如：
<img src="img/cat.jpg" /> 表示与当前文件同级的img文件夹下的cat.jpg图片
../表示上一级目录
<img src="../img/cat.jpg" />表示与当前文件上一级目录中的img文件夹下的cat.jpg图片
绝对路径：不推荐使用
一般都是以盘符开头，例如：C:\Users\W-ln\Pictures\image
title:作用1：鼠标悬浮在图片上的时候显示的文字
2：当图片因为各种原因无法正常显示的时候，应该显示图片的位置显示title中的文字
alt:与title作用相同，但是有些浏览器不支持该属性，所以我们一般使用title属性
width和height：宽度和高度，设置之后图片可能会失真
-->
设置图片的热点区域–了解
<img src="img/bg1.png" usemap="#myMap" />
<map name="myMap">
<area shape="circle" coords="100,100,100" href="circle.html" title="圆形"/>
<area shape="rect" coords="400,100,600,200" href="rect.html" title="矩形"/>
<area shape="poly" coords="500,300,600,400,500,400" href="poly-triangle.html" title="三角形"/>
<area shape="poly" coords="300,240,400,300,360,400,240,400,200,300" href="poly.html" title="多边形"/>
</map>
<!--
设置图片的热点区域：
<img src="img/bg1.png" usemap="#地图名称" />
<map name="自定义图名称">
<area shape="形状名称" 3种取值：circle-圆形 rect-矩形 poly-多边形
coords="坐标（多个值之间用逗号隔开）"
circle-圆形有3个数字：分别是圆心的横坐标、纵坐标和圆半径
rect-矩形有4个数字：分别是左上角的横纵坐标、右下角横纵坐标
poly-多边形取决于边数：按顺时针写好每个点的横纵坐标
href="点击该剧由的时候跳转的目标URL"
title="鼠标悬浮在该区域的时候的提示文字"/>
-->
- 列表标签
一般用在导航上
<h1>3、列表标签：有序列表，无序标签</h1>
<!--列表标签：有序列表，无序标签
ul-li：无序列表，li标签可以有多个；推荐ul中只有li标签，如果需要嵌套，建议在li中完整嵌套
ol-li: 有序列表，与无序列表功能意义，只是默认的样式不同，
可以与无序列表相互替换（以后可以通过样式将两者调成意义）
-->
<ul>
<!--<p>test</p>
段落写在这里也可以显示，但是不符合规范
HTML语言是弱语言类型，即使有些不规范的地方甚至是错误的地方也不影响浏览器的显示
但是程序员不能弱（没有弱的语言，只有弱的程序员），所以大家尽量遵循规范
-->
<li>超时首页</li>
<li>超值量贩</li>
<li>超值量贩</li>
<li>超值量贩</li>
<li>超值量贩</li>
<li>超值量贩</li>
</ul>
<ol>
<li>超时首页</li>
<li>超值量贩</li>
<li>超值量贩</li>
<li>超值量贩</li>
<li>超值量贩</li>
<li>超值量贩</li>
</ol>
- 定义描述标签
一般用在图文混编的场景中。
<h1>4、定义描述标签</h1>
<!--dl-dt-dd:定义描述标签:
dl:只是盛放dt和dd标签，不推荐盛放其他内容
dt:一般用来盛放图片或者标签
dd:一般用来补充对dt的描述与说明
-->
<dl>
<dt>热销商品</dt>
<dd>产品名称：小熊饼干</dd>
<dd>价格：￥125.0</dd>
</dl>
<dl>
<dt><img src="../img/x1.jpg" /></dt>
<dd>产品名称：小熊饼干</dd>
<dd>价格：￥125.0</dd>
</dl>
- 布局标签 层 div
一般就是做容器，盛放其他标签的，将其他标签组合在一起用来布局。
<h1>5、布局标签-div</h1>
<div style="border: 1px solid red ;">
我是布局标签div
<ul>
<li>超时首页</li>
<li>超值量贩</li>
<li>超值量贩</li>
<li>超值量贩</li>
<li>超值量贩</li>
<li>超值量贩</li>
</ul>
</div>
- 标签分类
html标签可以分为块状元素和行级元素两类。
块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素；
行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。
PS:区分的简单方法：是否独占一行。
块状元素和行内元素的区别：
1、 块级元素会独占一行，其宽度自动填满其父元素宽度；
行内元素会排列到同一行里，其宽度随元素的内容变化而变化。
2、块级元素可以设置宽高；行内元素设置宽高无效。
3、块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖直方向的padding没有效果。（此处的属性稍后介绍）
我们上面已经讲过的标签中归类一下： - 属于块状元素的：
标题标签 h1-h6,
段落标签 p ,
水平线标签 hr,
有序列表标签 ol–li，
无序列表标签 ul–li，
定义描述标签 dl-dt-dd，
容器标签 div： - 属于行级元素的：
范围标签：span
图像标签：img
五、超链接
超链接标签一般有两个作用：1、用来实现页面间的跳转 2、实现锚链接功能
- 页面间的跳转
<!--
a:超链接
作用1：跳转到其他资源
属性： href="目标资源路径" //路径推荐相对路径
target="打开资源的位置" 默认值：_self ---在当前页面打开
常用值:_blank ---在新页面打开资源
作用2：锚链接
步骤：1、目标位置定义锚点<a name="锚点名称"></a>
2、超链接的href属性使用锚点<a href="#锚点名称" target="_self">锚链接</a>
-->
- 锚链接
当一个页面长度超过一屏的时候，想迅速跳转到指定位置，例如大家经常浏览网页的时候，滑动超过一
屏，右下角经常会出现返回顶部连接，这个就是锚链接实现的。这个定位可以实现本页面间的锚链接也
可以实现不同页面间的锚链接。
<body>
<!--
a:超链接
作用1：跳转到其他资源
属性： href="目标资源路径" //路径推荐相对路径
target="打开资源的位置" 默认值：_self ---在当前页面打开
常用值:_blank ---在新页面打开资源
作用2：锚链接
步骤：1、目标位置定义锚点<a name="锚点名称"></a>
2、超链接的href属性使用锚点<a href="#锚点名称" target="_self">锚链接</a>
-->
<a href="01-基本结构.html" target="_self">点击我试试</a>
<a href="#sport" target="_self">锚链接--点击我可以跳转到运动户外</a>
<div style="height: 500px; background: lemonchiffon;">
品牌热卖--设置高度，目的是让页面超过一屏
</div>
<div style="height: 500px; background: lavender;">
奶制品--设置高度，目的是让页面超过一屏
</div>
<div style="height: 500px; background: lightblue;">
宠物园艺--设置高度，目的是让页面超过一屏
</div>
<div style="height: 500px; background: lavenderblush;">
<!--1、定义锚点，name自定义的-->
<a name="sport"></a>
运动户外--设置高度，目的是让页面超过一屏
</div>
</body>
- 页面间的锚链接
<a href="03-超链接2.html#sport2" target="_self">锚链接--点击我可以跳转到其他页面的运动户外</a>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
