day1---HTML入门：了解html和常见标签

徒手劈芝麻

已于 2022-07-09 17:17:42 修改

阅读量61

点赞数

文章标签： html webview elementui

于 2022-06-18 18:19:41 首次发布

本文链接：https://blog.csdn.net/weixin_57791809/article/details/125349337

版权

🌴5、HTML5 新增语义化标签

1、了解最简单的HTML结构：

<!-- document type 文档类型，浏览器 才能将该网页作为有效的HTML文档，这里遵循HTML5规范 -->
<!DOCTYPE html>
<!-- html 文档根标签，lang="en"告诉浏览器文档使用英文 -->
<html lang="en">
<!-- 头部标签 -->
<head>
    <!-- 元数据标签，网页使用UTF-8字符集编码 -->
    <meta charset="UTF-8">
    <!-- 指定浏览器按照最高的标准模式解析页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 定义网页可见区域的初始宽度和网页缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题标签 -->
    <title>Document</title>
</head>
<!-- 文档主体标签，该标签里的所有内容都会展示在浏览器页面的可见区域  -->
<body>
    
</body>
</html>

🌴2、HTML 控制标签的类型

分为四类：

1）无属性单一型标签。格式：<标记名称 > 如：<br/>

2）有属性单一型标签。格式：<标记名称属性=“属性值”> 如：<hr size="2"/>

3）无属性对称型标签。格式：<标记名称 ></标记名称 > 如：<title>...</title>

4）有属性对称型标签。格式：<标记名称属性=“属性值” >...</标记名称 > 如：<p class="bom"></p>

🌴3、标签嵌套

<html lang="en">
   <head>
   </head>

   <body>
   </body>
</html>

上面代码中 html 中包含 head 和 body 标签，所以 html 是 head 和 body 的父元素，而 head 和 body 是同级关系（既可以理解为兄弟关系）

🌴4、HTML 常见标签

标签名	描述
<h1></h1>....<h6></h6>	定义标题，块级标签
<div></div>	定义一个块级标签，可以理解为装东西的盒子
<a></a>	超链接用来进行不同页面的跳转
<p></p>	定义段落，块级标签
<span></span>	行内元素
<hr/>	水平分隔线
<br/>	换行，块级标签
<pre></pre>	保留换行符和空格，块级标签
<strong></strong>和<b></b>	文字以粗体方式显示
<ins></ins>和<u></u>	文字以加下划线方式显示
<em></em>和<i></i>	文字以斜体方式显示
<del></del>和<s></s>	文字添加删除线方式显示
蓝色字是HTML5新增的格式化标签
绿色字是没有语义性的

🌴5、HTML5 新增语义化标签

标签名	描述
<header>	父级标签，适用于多个页面重复出现的内容，每个页面只有一个，常用于简介和导航栏
<main>	呈现网页主体内容，每个页面只有一个，但是不包含那些导航链接、网页横幅等可以在多个页面重复出现的内容
<article>	分段标签，常用于论坛帖子、新闻文章、博客入口等
<nav>	主导航链接，页面顶部用nav更好
<footer>	与nav类似，但是页面底部用footer更好
<section>	定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分,section元素表示文档或应用的一个部分

徒手劈芝麻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
day1---HTML入门：了解html和常见标签

1、了解最简单的HTML结构：2、HTML 控制标签的类型分为四类：1）无属性单一型标签。格式：如：2）有属性单一型标签。格式：如：3）无属性对称型标签。格式：如：...4）有属性对称型标签。格式：... 如：3、标签嵌套上面代码中 html 中包含 head 和 ............
复制链接

扫一扫