1 开发者文档
- W3C官网:
www.w3c.org
- W3School:
www.w3school.com.cn
- MDN:
developer.mozilla.org
—— 平时用的最多。
2 基本标签
2.1 排版标签
例:标题标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学习标题标签</title> </head> <body> <!--标题标签--> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> </body> </html>
例: 段落标签
<p> 这是,第一段 </p> <p> 这是,第二段 </p>
例:div标签
<div> <p>置身移动互联时代,人们在享受智能设备带来便利的同时,也在一些场景中面临个人信息泄露风险。随着时间推移,这样的风险日益呈现出新的表现形式。</p> <p>一些APP声称看视频、玩游戏甚至走路都能赚钱,但用户想提现却难上加难,还容易泄露个人信息;新型不法软件图标透明、没有名称,在手机屏幕上十分隐蔽,不仅不停推送广告,还会收集并转卖用户隐私信息;个人信息安全和隐私保护话题引发关注,正说明其涉及群众切身利益,问题不容小视。</p> </div>
2.2 语义化标签
- 概念:用特定的标签,去表达特定的含义。
- 原则:标签的默认效果不重要(后期可以通过CSS 随便控制效果),语义最重要!
- 举例:对于h1标签,效果是文字很大(不重要),语义是网页主要内容(很重要)。
- 优势:
- 代码结构清晰可读性强。
- 有利于 SEO(搜索引擎优化)。
- 方便设备解析(如屏幕阅读器、盲人阅读器等)。
2.3 行内元素与块级元素
2.4 文本标签
1、 用于包裹:词汇、短语等。
2、 通常写在排版标签里面。
3、 排版标签更宏观(大段的文字),文本标签更微观(词汇、短语)。
4、 文本标签通常都是行内元素。
例:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML_常用的文本标签</title> <style> span{ color: red; } </style> </head> <body> <p> 预防电信诈骗,请安装:<em>国家反诈中心app</em>。 </p> <p> 当我们出门的时候,一定要<strong>关好门窗</strong>! </p> <p> 前端三个框架为:<span>Angular、React、Vue</span>。 </p> </body> </html>
2.5 常用标签补充
3 图片标签
例:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML_图片标签</title> </head> <body> <img width="200" src="奥特曼.jpg" alt="奥特曼,你相信光吗?"> <img width="200" src="奥特曼.jpg" alt="奥特曼,你相信光吗?"> </body> </html>
4 超链接标签
HTML4(二)(下)+https://developer.aliyun.com/article/1556792