HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言HTML是由 Web 的发明者 Tim Berners-Lee 和同事 Daniel W. Connolly于1990年创立的一种 标记语言 ,它是标准通用化标记语言SGML的应用。
1.实体
HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行空格( )是常规空格的宽度,可运行于所有主流浏览器。其他几种空格(       ‌‍)在不同浏览器中宽度各异。
2.meta标签
<meta name = "keywords" charset="UTF-8" content="标准网页设计专业">
name = 指定的数据的名称
charset : 指定网页的字符集
countent = 指定数据的内容,会作为搜索结果的超链接上的文字显示
description 表示网站的描述信息
标签 |
作用 |
描述 |
header |
页眉 |
介绍性的内容 |
footer |
页脚 |
通常包含有关作者的信息、版权或文件链接 |
nav |
导航链接 |
可以是当前文档内的,也可以是到其他文档的。常见例子是菜单、目录和索引 |
main |
文档主内容 |
中心主题直接相关或扩展的内容 |
article |
文章 |
自成一体,独立分发,可重复使用 |
section |
文档中的节 |
没有一个更具体的语义元素来代表 |
aside |
页面内容以外的内容 |
其内容与文档的主要内容只有间接的关系。经常以边栏或呼出框的形式出现 |
mark |
重要或强调的文本 |
为参考或记事目的而被标记或突出的文本,表明其相关性和重要性 |
summary |
|
为 |
detils |
用户能够查看或隐藏的额外细节 |
其中的信息只有被切换到 "打开 "状态时才可见。必须使用 |
figuer |
自包含内容 |
独立的内容,用 |
figcaption |
|
描述其父元素 |
其余内容的标题或图例time |
定义日期/时间 |
可能包括 |
3.布局标签
header表示网页的头部(页眉)
main表示网页的主体部分(一个页面中只会有一个 main)
footer表示网页的底部(页脚)
nav表示网页中的导航
aside和主体相关的其他内容(侧边栏)
article表示一个独立的文章
section表示一个独立的区块,上边的标签都不能表示时使用 section
div 块元素,没有任何的语义,就用来表示一个区块。目前来讲,div 还是主要的布局元素
span 行内元素,没有任何的语义,一般用于在网页中选中文字
定义列表,使用dl标签来创建定义列表,使用dt表示定义的内容,使用dd来对内容进行解释说明
<dl> <dt>Beast of Bodmin</dt> <dd>A large feline inhabiting Bodmin Moor.</dd> <dt>Morgawr</dt> <dd>A sea serpent.</dd> <dt>Owlman</dt> <dd>A giant owl-like creature.</dd> </dl>
4.外部地址
Linking to an absolute URL:链接一个绝对路径
Linking to an email address:链接一个 email 地址
Linking to telephone numbers:链接电话号码
Using the download attribute to save a <canvas> as a PNG:下载图片
<ul> <li><a href="https://www.baidu.com">Website</a></li> <li><a href="mailto:example@outlook.com">Email</a></li> <li><a href="tel:+123456789">Phone</a></li> </ul>
5.新建页面
target属性,用来指定超链接打开的位置可选值:
_self在当前页面中打开超链接,默认值
_blank在新建页面中打开超链接
<a href="./test1.html">超链接1——默认</a><br /> <a href="./test1.html" target="_self">超链接1——当前页面</a><br /> <a href="./test1.html" target="_blank">超链接1——新建页面</a><br />
6.锚点跳转
可以使用javascript:void(0);来作为href的属性,此时点击这个超链接什么也不会发生
可以将#作为超链接的路径的占位符使用。
可以直接将超链接的href属性设置为#,这样点击超链接以后页面不会发生跳转,而是转到当前页面的顶部的位置
可以跳转到页面的指定位置(锚点),只需将href属性设置#目标元素的id属性值(唯一不重复)
7.图片
src:属性指定的是外部图片的路径(路径规则和超链接是一样的)
alt:图片的描述,这个描述默认情况下不会显示,有些浏览器会在图片无法加载时显示,搜索引擎会根据 alt 中的内容来识别图片
width:图片的宽度(单位是像素)
height :图片的高度(单位是像素)
宽度和高度中如果只修改了一个,则另一个会等比例缩放
注意
一般情况在 pc 端,不建议修改图片的大小,需要多大的图片就裁多大
但是在移动端,经常需要对图片进行缩放(大图缩小)