2020Web前端知识点总结-HTML篇

最新推荐文章于 2022-08-05 20:42:56 发布

南南NaN

最新推荐文章于 2022-08-05 20:42:56 发布

阅读量487

点赞数

分类专栏： 2020WEB前端知识点总结文章标签： html html5 css css3

本文链接：https://blog.csdn.net/weixin_46473109/article/details/104744755

版权

这篇博客总结了2020年HTML前端的知识点，包括HTML基本文档结构、语义化标签的重要性，如header、section等，以及块元素、内联元素、图片、超链接、列表、表格和表单的使用。内容详实，适用于前端开发者学习和复习。

摘要由CSDN通过智能技术生成

下一篇：2020Web前端知识点总结-CSS篇（一）

1、HTML 基本文档

<!--文档声明：不是一个HTML标签声明HTML的版本及约束条件声明-->
<!DOCTYPE html>
<html lang="en"> <!--lang 属性可用于声明网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的-->
  	<head>
   		 <title>文档标题</title>
  	</head>
  	<body>
    	可见文本...
  	</body>
</html>

1.1、扩展

代码	参考扩展
`<html lang="en">`	`lang`属性的值：`en`表示为英文 `zh`中文简体 HTML的 lang 语言代码参考手册

说明	基本文档的`<head>`元素中引入元素
引入`CSS`样式表
`<link>`元素	待更新
`<meat>`元素	待更新
`<base>`元素	待更新

2、HTML基本标签

<h1>最大的标题</h1>
<h2> . . . . </h2>
<h3> . . . . </h3>
<h4> . . . . </h4>
<h5> . . . . </h5>
<h6>最小的标题</h6>
 
<p>这是一个段落。</p><!--文字会自动换行-->
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->

2.1、扩展

代码	参考扩展
`<h1>最大的标题</h1>`	一个页面中建议最多只是用一次该标签，并在比较重要的地方使用比如网站logo，有利于SEO

3、HTML语义化标签

语义类标签则是纯文字的补充，比如标题、自然段、章节、列表，这些内容都是纯文字无法表达的，我们需要依靠语义标签代为表达。

便于团队开发维护
便于其他设备解析（屏幕阅读器，盲人阅读器）
有利于SEO（搜索引擎及爬虫更理解网页）

3.1、文本语义格式化（含h5）

<b>粗体文本</b>
<strong>重要的文本加粗</strong> <!--推荐使用-->

<i>斜体文本</i>
<em>斜体强调文本</em><!--推荐使用-->

<!--<s>删除的文本</s>-->
<del>删除的文本</del><!--推荐使用-->

<!--<u>下划线文本</u>-->
<ins> 插入的文本</ins><!--推荐使用-->

<kbd>键盘输入</kbd>
<code>计算机代码</code> 
<pre>预格式化文本</pre><!--使文本保留换行空格等格式-->
<small>更小的文本</small>

<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<sub> （下标文本）
<sup> （上标文本）

3.1.1、扩展

代码	参考扩展
`<del>删除的文本</del>` `<ins>插入的文本</ins>`	一般搭配使用如电商项目中删除文本：~~原价888￥~~ 插入文本：特价666￥

3.2、结构语义格式化（h5常用 ie9及以上兼容）

<header>头部</header>

最低0.47元/天解锁文章

南南NaN

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
2020Web前端知识点总结-HTML篇

1、HTML 基本文档<!DOCTYPE html><html lang="en"> lang 属性可用于声明网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的 <head> <title>文档标题</title> </h...
复制链接

扫一扫

专栏目录