1.概述
HTML 的全名是“超文本标记语言”(HyperText Markup Language),上个世纪90年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李(Tim Berners-Lee)发明。它的最大特点就是支持超链接,点击链接就可以跳转到其他网页,从而构成了整个互联网。
下面就是一个简单网页的 HTML 源码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>网页标题</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
不管多么复杂的网页,都是从上面这个基本结构衍生出来的。
2.网页的基本标签
下面就依次介绍,这个基本结构的主要标签。它们构成了网页的骨架
2.1<!DOCTYPE>
网页的第一个标签通常是<!doctype>
,表示文档类型,告诉浏览器如何解析网页。
doctype
为html
时浏览器就会按照 HTML 5 的规则处理网页
<!DOCTYPE html>
2.2<html>
<html>
标签是网页的顶层容器,也称为根元素(root element),一个网页只能有一个<html>
标签
<html lang="zh-CN">
该标签的lang
属性,表示网页内容默认的语言,如果是英文内容,zh-CN
要改成en
2.3<head>
<head>
是<html>
的第一个子元素。如果网页不包含<head>
,浏览器会自动创建一个
2.4<meta>
<meta>
标签用于设置或说明网页的元数据,必须放在<head>
里面。一个<meta>
标签就是一项元数据,网页可以有多个<meta>
。<meta>
标签约定放在<head>
内容的最前面。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
</head>
简单介绍几个<meta>
标签常见属性
( 1 )charset
属性
<meta>
标签的charset
属性,用来指定网页的编码方式
<meta charset="UTF-8">
上面代码声明,网页为 UTF-8 编码
这里声明的编码方式,应该与网页实际的编码方式一致,即声明了utf-8
,网页就应该使用 UTF-8 编码保存。如果这里声明了utf-8
,实际却是使用另一种编码(比如 GB2312),并不会导致浏览器的自动转码,网页可能会显示为乱码。
( 2 )name
属性,content
属性
<meta>
标签的name
属性表示元数据的名字,content
属性表示元数据的值。它们合在一起使用,就可以为网页指定一项元数据。
<head>
<meta name="description" content="HTML从入门到入土">
<meta name="keywords" content="HTML,教程">
<meta name="author" content="张三">
</head>
上面代码包含了三个元数据:description
是网页内容的描述,keywords
是网页内容的关键字,author
是网页作者
2.5<title>
<title>
标签用于指定网页的标题,会显示在浏览器窗口的标题栏
<title>网页标题</title>
2.6<body>
<body>
标签是一个容器标签,用于放置网页的主体内容,它是<html>
的第二个子元素,紧跟在<head>
后面。
<body>
<p>Hello World</p>
</body>
3.常见的章节标签
3.1<header>
<header>
标签表示整个网页的头部,也可以表示一篇文章或者一个区块的头部。
3.2<footer>
<footer>
标签表示网页、文章或章节的尾部。如果用于整张网页的尾部,就称为“页尾”,通常包含版权信息或者其他相关信息
3.3<main>
<main>
标签表示页面的主体内容,一个页面只能有一个<main>
。
3.4<article>
<article>
标签表示页面里面一段完整的内容,通常用来表示一篇文章或者一个论坛帖子
3.5<aside>
<aside>
标签通常用来表示网页的侧边栏
3.6section
<section>
标签表示一个含有主题的独立部分
3.7<nav>
<nav>
标签用于放置页面或文档的导航信息
3.8<h1>
~<h6>
从一级到六级的标题标签,数字越小字体越大
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
4.全局属性
全局属性(global attributes)是所有元素都可以使用的属性。也就是说,你可以把下面的属性,加在任意一个网页元素上面,不过有些属性对某些元素可能不产生意义。
4.1id
id
属性是元素在网页内的唯一标识符,属性的值必须是全局唯一的。但如果一个网页出现两个相同的id
也不会报错,为了避免冲突,建议少用
<p id="p1">
<h1 id="p1">
4.2class
class
属性用来对网页元素进行分类。如果不同元素的class
属性值相同,就表示它们是一类的
<p class="para"></p>
4.3title
title
属性用来为元素添加附加说明。大多数浏览器中,鼠标悬浮在元素上面时,会将title
属性值作为浮动提示,显示出来
<div title="附加说明">
<p>这里是内容</p>
</div>
4.4tabindex
给一个元素写上tabindex
属性,按下键盘上的Tab键就能选择到这个元素
tabindex
属性的值是一个整数,表示用户按下 Tab 键的时候,网页焦点转移的顺序。不同的属性值有不同的含义。
- 负整数:表示不参与 Tab 键对网页元素的遍历。这个值通常是
-1
。 0
:表示最后访问到它。- 正整数:网页元素按照从小到大的顺序(1、2、3、……),参与 Tab 键的遍历。如果多个元素的
tabindex
属性相同,则按照在网页源码里面出现的顺序遍历。
<p tabindex="0">这段文字可以被选择到。</p>
4.5style
style
属性用来指定当前元素的 CSS 样式
<p style="color: red;">hello</p>
上面代码指定文字颜色为红色。
4.6hidden
hidden
是一个布尔属性,它可以把一个元素隐藏起来
<p hidden>本句不会显示在页面上。</p>
CSS 的设置优先级高于hidden
属性。如果 CSS 设为该元素可见,hidden
属性将无效
4.7contenteditable
contenteditable
属性允许用户修改内容
<p contenteditable="true">
鼠标点击,本句内容可修改。
</p>
4.8spellcheck
spellcheck
属性表示是否打开拼写检查
<p contenteditable="true" spellcheck="true">
英语单词 separate 容易写错成 seperate。
</p>
4.9data-
data-
属性用于放置自定义数据。如果没有其他属性或元素合适放置数据,就可以放在data-
属性
5.常用的内容标签
5.1<strong>
<strong>
是一个行内元素,表示它包含的内容具有很强的重要性,浏览器会以粗体显示内容
5.2<em>
<em>
是一个行内标签,表示强调(emphasize),浏览器会以斜体显示它包含的内容
5.3<code>
<code>
标签是一个行内元素,表示标签内容是计算机代码,浏览器默认会以等宽字体显示
5.3<pre>
<pre>
是一个块级元素,表示保留原来的格式(preformatted),即浏览器会保留该标签内部原始的换行和空格。浏览器默认以等宽字体显示标签内容。
<pre>hello
world</pre>
5.4<a>
<a>
表示一个网络链接
<a href="www.baidu.com">百度一下</a>
5.5<img>
<img>
标签用于插入图片。它是单独使用的,没有闭合标签
<img src="假装有张图片.jpg">
它可以和<a>
标签一起使用
<a href="www.baidu.com">
<img src="美女.jpg">
</a>
5.5<hr>
<hr>
标签表示一条分割线,它是单独使用的,没有闭合标签
5.6<br>
<br>
让网页产生一个换行效果。该标签是单独使用的,没有闭合标签
本文部分内容引用自 网道(WangDoc.com)