<!DOCTYPE>
声明文档类型,告诉浏览器以HTML5
的标准去解析页面。
<!DOCTYPE>
标签位于文档的最前面,用于向浏览器说明当前文档使用哪种 HTML 标准规范,必需在开头处声明文档类型,只有这样浏览器才能按指定的文档类型进行解析。
<html>
标签:
作用:网页的根节点。
<head>
标签:
作用:用于存放title
,meta
,style
,script
,link
等标签。辅助浏览器解析页面,并不会在页面中展示。
<title>
标签:
作用:让页面拥有一个属于自己的标题。
<body>
标签:
作用:页面的主体部分,用于存放网页要展示的标签 p
,h
,a
,img
等。
注意:在<body>
中多个空格或者换行符,会被当做一个空格来处理。
<meta>
标签
设置网页的元数据,不同的属性会使<meta>
标签具备不同的功能。
-
<meta charset="utf-8" />
指定字符集编码utf-8
(优化后的全球码) -
用于设置关键字
<meta name="keywords" content="xxx" />
-
用于设置描述信息
<meta name="description" content="xxxx" />
utf-8 是目前最常用的字符集编码方式,常用的字符集编码方式还有 gbk 和 gb2312。gb2312 包括 6763 个汉字。GBK 包含全部中文字符,是 GB2312 的扩展,加入对繁体字的支持,兼容 GB2312。UTF-8 则包含全世界所有国家需要用到的字符。
标题标签
<hn> 标题文本 </hn>
在 html
中一共有 6 级标题。<h1>
、<h2>
、<h3>
、<h4>
、<h5>
和<h6>
。依据重要性依次递减。<h1>
是最大的标题,一般在页面中只能出现一次。其他的无所谓。
段落标签
<p>文本内容</p>
在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,是 HTML
文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。
水平线标签
<hr />
<!-- 单标签 -->
在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单地通过标签来完成,<hr />
就是创建横跨网页水平线的标签。
换行标签
<br />
在 HTML
中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签。
div
span
标签
<div>这是头部</div>
<span>今日价格</span>
div
span
是没有语义的,是我们网页布局常用的 2 个标签。
图像标签
<img src="图像URL" />
HTML
网页中任何元素的实现都要依靠 HTML
标签,要想在网页中显示图像就需要使用图像标签。
src
属性用于指定图像文件的路径和文件名,他是 img
标签的必需属性。
alt
属性用于指定图片未找到时,显示的内容。
jpg
png
svg
gif
是图片的格式。
路径
相对路径和绝对路径
相对路径
-
相对当前文件
-
同一级目录下,输入图像文件的名称即可
<img src="avatar.jpg" />
。 -
图像文件位于当前文件的下一级目录:输入文件夹名和文件名,之间用
/
隔开,如<img src="img/avatar.jpg" />
。 -
图像文件位于当前文件的上一级目录:在文件名之前加
../
,如果是上两级,则需要使用../ ../
,以此类推,<img src="../avatar.jpg" />
。
绝对路径
- 本地绝对路径
D:\web\img\avatar.jpg
- 网络路径
https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=586984b5572c11dfded1b8255b1c05ed/bd3eb13533fa828b9caedeb5fd1f4134960a5ad2.jpg
<!-- 本地绝对路径 -->
<img src="H:/html+css课程/01-html/mydev/bf.png" alt="sorry,图片未找到" />
<!-- 网络路径 -->
<img
src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=586984b5572c11dfded1b8255b1c05ed/bd3eb13533fa828b9caedeb5fd1f4134960a5ad2.jpg"
alt="sorry,图片未找到"
/>
<!-- 相对路径,相对当前文件所在的目录 -->
<!-- 同级目录 -->
<img src="bf.png" alt="sorry,图片未找到" />
<!-- 下级目录 -->
<img src="img/bf.png" alt="sorry,图片未找到" />
<!-- 上一级目录 -->
<img src="../bf.png" alt="sorry,图片未找到" />
<!-- alt 属性 用来表示 图片未找到时 所显示的内容 -->
链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
在 HTML
中创建超链接非常简单,只需用链接标签环绕需要被链接的对象即可。
href
:用于指定链接目标的 url
地址,当为标签应用 href
属性时,它就具有了超链接的功能。 Hypertext Reference 的缩写,意思是超文本引用。
target
:用于指定链接页面的打开方式。
-
_self
为在当前窗口打开(默认值)。 -
_blank
为在新窗口中打开方式。
注意:
-
外部链接 直接链接网络路径即可。
-
内部链接 直接链接内部页面名称即可,比如
<a href="index.html"> 首页 </a>
。
-
如果当时没有确定链接目标时,通常将链接标签的 href 属性值定义为
href="#"
,表示该链接暂时为一个空链接。 -
不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。
<!-- 当前窗口跳转 -->
<a href="https://www.baidu.com/">百度</a>
<a target="_self" href="https://www.baidu.com/">百度</a>
<!-- 新窗口跳转 -->
<a target="_blank" href="https://www.baidu.com/">百度</a>
<!-- 点击图片跳转 -->
<a href="https://www.baidu.com/">
<img src="bf.png" alt="sorry,图片未找到" />
</a>
列表标签
无序列表 ul
无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
比如下面这些,新闻是没有顺序的,不用排队,先到先得,后发布先显示。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4nKc3fsP-1593770248576)(https://i.loli.net/2019/07/22/5d355c8a6941286724.png)]
注意
-
列表具有严格的嵌套关系
-
<ul></ul>
中只能嵌套<li></li>
,直接在<ul></ul>
标签中输入其他标签或者文字的做法是不被允许的。 -
<li></li>
之间相当于一个容器,可以容纳所有元素。 -
无序列表会带有自己样式属性,但是我们通常不使用自带样式。
有序列表 ol
有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
所有特性基本与ul
一致。但是实际工作中,较少用 ol
。
自定义列表
自定义列表常用于对术语或名词进行解释和描述,自定义列表的列表项前没有任何项目符号。其基本语法如下:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>