HTML标签是由<>包围的关键词,例如 <html> <div> <br/> 等,HTML标签通常是成对出现的,比如 <html> 和 </html>、<div> 和 </div>,当然也有特立独行的单标签,比如 <br/>。双标签就和括号一样,第一个代表着开始,第二个含 “/” 的代表着结束,中间是内容。
双标签的内容可以是单标签,也可以是双标签。双标签关系可以分为包含关系和并列关系。
<html>
<head></head> //head 和 body 是并列关系
<body>
<br/> //body 和 br 是包含关系
</body>
</html>
1、基本结构标签
基本结构标签是指每个网页都会有的基本标签。
1.1 html 标签
<html></html> 是网页中最大的标签,我们称之为根标签,可以想象成一张白纸。
1.2 head 标签和 title 标签
<head></head> 是头标签,头标签不属于内容区域,是网页顶端的页签区域,在这个标签中必须包含title标签来设置网页的标题。
<head>
<title>
写文章 - SegmentFault 思否
</title>
</head>
上面这段 html 渲染后就是下图效果:
1.3 body 标签
<body></body> 是网页的主体,页面的内容基本都是放在body里的。
2、常用基础标签
2.1 标题标签 <h1> - <h6>
h 是单词 head 的缩写,意为头部、标题。
标签语义:作为标题使用,并且依据重要性递减。
<h1> 我是一级标题 </h1>
<h2> 我是二级标题 </h2>
<h3> 我是三级标题 </h3>
<h4> 我是四级标题 </h4>
<h5> 我是五级标题 </h5>
<h6> 我是六级标题 </h6>
2.2 段落标签 <p>
p 是单词 paragraph 的缩写,意为段落
标签语义: 可以把 HTML 文档分割成多个段落
2.3 换行标签 <br/>
br 是单词 break 的缩写,意为打断、换行。换行标签是单标签。
标签语义:强制换行。
<br/> 标签只是强制开始新的一行,仍是同一段落,而段落之间会有较大间距。
2.4 文本格式化标签
在网页中,有时需要为文字设置粗体、斜体或者删除线等效果,这就需要用到 HTML 中的文本格式化标签,使文字以特殊的方式显示,突出重要性。
效果 | 标签 |
---|---|
加粗 | <strong></strong> 或者 <b></b> |
斜体 | <em></em> 或者 <i></i> |
删除线 | <del></del> 或者 <s></s> |
下划线 | <ins></ins> 或者 <u></u> |
以上均推荐使用前者,语义更强烈。
2.5 <div> 和 <span> 标签
这两个标签用的很多,没有特别的语义,可以想象成一个盒子,是用来装内容的。
div 是 division 的缩写,表示分割、分区。span 意为跨度、跨距。
特点:
1、<div> 标签用来布局,一行只能放一个 <div>,是个大盒子
2、<span> 标签用来布局,一行上可以有多个 <span>,是个小盒子
2.6 图像标签
<img> 标签用来定义 HTML 页面中的图像,是单标签。
<img src="url" />
src 是 <img> 标签的必需属性,用来指定图像文件的路径和文件名。图像标签还有其他属性:
属性 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 必需属性 |
alt | 文本 | 替换文本。图像不能显示时显示的文字 |
title | 文本 | 提示文本。鼠标移到图像上显示的文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像的边框粗细 |
3、一个特殊的标签
<!DOCTYPE> 并不是一个 HTML 标签,是文档类型声明标签,告诉浏览器使用哪种 HTML 版本来显示网页。
它必须放在文档最前面的位置,也就是 <html> 标签之前。
“<!DOCTYPE html>" 确保浏览器按照最佳的相关规范进行渲染,而不是使用一个不符合规范的渲染模式。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。