前端全栈学习第三章
【摘要】 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)