前端全栈学习第三章
【摘要】 1、基本结构1.1 HTML 文件的基本结构由最前面的文档声明标签 <!DOCTYPE html> 及一个 <html></html> 内包含一个文档头标签 <head></head> 和一个文档主体标签 <body></body> 组成<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta nam...
1、基本结构
1.1 HTML 文件的基本结构
由最前面的文档声明标签 <!DOCTYPE html> 及一个 <html></html> 内包含一个文档头标签 <head></head> 和一个文档主体标签 <body></body> 组成
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>This is a document.</div> </body> </html>
1.2 重要的标签
1、 <!DOCTYPE html> 文档类型声明，确保浏览器按照最佳的相关规范进行渲染 2、<head>头部标签，规定文档相关的配置信息（元数据）包括文档的标题，引用的文档样式和脚本等 3、<title> 定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。 4、<meta> 定义文档的元数据信息例如：<meta charset="UTF-8" /> 声明文档使用的编码 5、<body> 内容主体标签，表示文档的内容
1.3 元素的组成部分
2、标题
2.1 标题元素
1、<h1> ~ <h6> 标签用于定义标题，其中 <h1> 的重要性最高，而 <h6> 的重要性最低 2、<h1> 标签通常用于最顶层的标题 3、一个 HTML 文档一般只有一个 <h1> 标签
3、段落
3.1 <p> 段落元素
1、用于定义段落，浏览器会自动在其前后创建一些空白 2、文字行数取决于浏览器窗口的宽度 3、标签中的连续空格最终都将解析成一个空格，可使用 特殊字符代表空格 4、<p> 是块级元素
4、结构标签
4.1 div 标签
1、div 是 division 的含义，用来划分区域，代表网页中的块，所以一般把它叫做块标签 2、div 标签通常用于包围大块内容，它没有任何特殊的含义 3、div 适合作为最通用的页面容器 4、div 是块级元素
4.2 span 标签
1、span 是内联标签，用在一行文本中，用来修饰文字 2、span 是内联元素
4.3 块级元素 vs 内联元素
块级元素（block level element）
内联元素（inline element）
二者的区别如下：
1. 块级元素独占一行，内联元素在一行内显示； 2. 块级元素可以设置 width、height 属性，而内联元素设置这些属性无效； 3. 块级元素的默认 width 为 100%，而内联元素的的 width 是根据其内容或子元素确定的。
5、链接
5.1 链接标签
<a> 标签是 anchor 的缩写，用于定义网页链接
5.2 链接属性：
1、href 属性表示链接的地址，可以是相对地址或绝对地址 2、target 属性表示点击链接后打开的方式 默认值为 _self，表示在当前窗口打开新链接 设置成 _blank，表示在新窗口中打开
5.3 空链接：点击不做任何跳转
之前主要作为按钮实现，目前不推荐
<a href="javascript:void(0)" target="_self">空链接</a> <a href="javascript:;" target="_self">空链2</a>
5.4 <base> 标签
为页面上的所有链接规定默认地址或默认目标。
<base href="http://www.w3school.com.cn/i/" /> <base target="_blank" />
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <base href="https://example.com"> <base target="_blank" /> <title>Document</title> </head> <body> <a href="#anchor">Anker</a> </body> </html> 在 <head> 元素内设置 <base href="https://example.com"> <base target="_blank" /> <body> 元素内有链接 <a href="#anchor">Anker</a> 此时点击该链接，会在新窗口中打开 https://example.com/#anchor 网页地址
6、图片
6.1 img 图片标签
1、用于定义一张图片，属于单标签结果，它有两个属性，src 代表图片的地址，alt 属性代表当图片无法显示时的替代文本 2、图片地址可以使用相对或绝对路径 3、alt 属性不要省略，目的是为了更好的兼容无图浏览器 4、可设置 height 和 width 属性来设置图片的宽度和高度
示例
<img src="/media/examples/grapefruit-slice-332-332.jpg" alt="Grapefruit slice atop a pile of other slices" />
7、列表
7.1 无序列表 (Unordered List)
1、使用 <ul> 标签定义无序列表，<li> 标签定义列表项无序列表的含义是列表项内容没有前后顺序 2、ul 标签上可使用 type 属性定义图形符号的样式 属性值为 disc 时，显示为点 属性值为 square 时，显示为方块 属性值为 circle 时，显示为圆
效果如下：
<ul type="circle">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
○ 列表项1
○ 列表项2
○ 列表项3
7.2 有序列表 (Ordered List)
1、使用 <ol> 标签定义有序列表，<li> 标签定义列表项有序列表的每一项有顺序含义 2、有序列表的前缀通常为数字或者字母 3、ol 标签上可使用 type 属性定义编号的类型 a 表示小写英文字母编号 A 表示大写英文字母编号 i 表示小写罗马数字编号 I 表示大写罗马数字编号 1 表示数字编号（默认） 4、ul 标签上可使用 start 属性定义列表编号的起始值, 是一个整数值属性
效果如下：
<ol type="a" start="4"> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol>
d. 列表项1
e. 列表项2
f. 列表项3
7.3 自定义列表 (Definition List)
1、使用 <dl> 标签定义自定义列表，内部可有多个列表项 2、每个列表项用 <dt> 定义标题 3、用 <dd> 定义列表项
效果如下：
<dl> <dt>上海市</dt> <dd>普陀区</dd> <dd>浦东新区</dd> <dd>静安区</dd> </dl>
上海市
普陀区
浦东新区
静安区
8、参考学习网站
MDN HTML（超文本标记语言）
W3C HTML 系列教程
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）