认识前端--HTML｜ 青训营笔记

Followinsider
166 阅读5分钟

认识前端--HTML

这是我参与「第四届青训营 」笔记创作活动的第1天

HTML (HyperText Markup Language) 超文本标记语言，一般用于实现静态页面的一种语言。

掌握核心标签常常达到 够用 地步，今天跟随青训营课程再次回顾一下我理解中的HTML，本文核心在于标签分类以及对应简单介绍。

元信息类标签

  • head

    • 本身不携带任何信息，主要是放置其他语义类标签，常见包含 title、base 标签

  • title

    • 表示文档的标题，作为元信息被用在浏览器收藏夹、微信推送卡片等场景。

      说到标题注意和语义类标签h1-h6区分一个小点，title往往上下文是缺失的，而如 h1 标签仅仅用于页面展示可以说默认具有上下文，同时 h1 有其他相关内容类似链接或者文本等补充因此可以简写。 可以思考一下，有一个科普介绍蜜蜂跳舞求偶仪式的科普页面，试着把以下两部分文字分别对应到 title 和 h1 ：

      1. 蜜蜂求偶仪式舞蹈
      2. 舞蹈

      结果建议是：

      <title>蜜蜂求偶仪式舞蹈</title>
<h1>舞蹈<h1>

  • base

    • 给页面上所有的URL相对地址提供一个基础，即浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。 包括 a、img、link、form 标签中的 URL。

  • meta

    • 一种通用的元信息表示标签，形式是一组键值对。在head中可以出现任意多个meta标签，它由name和content两个属性来定义，name定义元信息名，content定义元信息值。

    注意点：

    <meta charset="UTF-8">
HTML5开始，添加了charset属性的meta标签不用name和content，charset型meta标签描述了HTML文档自身的编码形式。

<meta http-equiv="X-UA-Compatible" content="IE=edge">
具有http-equiv属性的meta标签表示执行一个命令，此时可以不需要name属性，上面命令声明UA兼容性，除了这种命令还有以下几种命令:
	1.content-type:内容类型和网页的编码;
	2.content-language:指定内容的语言;
	3.default-style:指定默认样式表;
	4.refresh:刷新;
	5.set-cookie模拟http头set-cookie，设置cookie;
	6.content-security-policy:模拟http头content-security-policy，声明内容安全策略;

<meta name="viewport" content="width=device-width, initial-scale=1.0">
这类meta的name属性为viewport，它的content是用逗号分隔的键值对key=value，上面命令指定了宽度和缩放属性值，全部属性如下：
	1.width:页面宽度，可以具体数值也可以device-width，表示和设备宽度一致。
	2.height:同width;
	3.initial-scale:初始缩放比例;
	4.minimum-scale:最小缩放比例;;
	5.maximum-scale:最大缩放比例;
	6.user-scalable:是否允许用户缩放;

对于已经做好移动端适配的网页，有一个标准meta：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

语义标签

在自然语言延伸下

  • em

    • 表示重音的标签，消除一些文字歧义，注意和 strong 标签的区别:

      1. em 和 strong 都有强调之意，strong 的语气更强烈，同时外观表现形式不同，一个斜体一个加粗。
      2. em 局部强调，strong 全局强调，有一个值得注意的点就是一个段落如果应用 em 和 strong 阅读体验感一般会有所不同，em 是有顺序的，阅读某处才留意到，strong 就比较明显，一览很凸显。
      3. em 表示内容的着重点，strong 表示内容的重要性，em 会改变句子所在语义，而strong 则不会。

      推荐文章 (www.cnblogs.com/lyld/p/7873…);

      今天上了<em>一次</em>青训营课程。

作为标题摘要

  • hgroup

    • 用于对网页或区段（section）的标题进行组合的标签(感受下面两部分代码差别)。

      <hgroup>
<h1>JavaScript对象</h1>
<h2>我们需要模拟类吗？</h2>
</hgroup>
<p>balah balah</p>
------------------
JavaScript 对象——我们需要模拟类吗？

      <h1>HTML语义</h1>
<p>balah balah balah balah</p>
<h2>弱语义</h2>
<p>balah balah</p>
<h2>结构性元素</h2>
<p>balah balah</p>
------------------
HTML语义
	弱语义

  • section

    • 定义了文档的某个区域的标签。

作为整体结构

  • header

    • 表示导航或者介绍性的内容的标签。

  • aside

    • 表示跟文章主体不那么相关的部分的标签。

  • section(同上)

  • article

    • 表示页面中的一块与上下文不相关的独立内容的标签，主要用在布局文章和内容。

  • nav

    • 用于表示HTML页面中的导航的标签。

  • footer

    • 通常出现在尾部，包含一些作者信息、相关链接、版权信息等的标签。

  • address

    • 表示“文章（作者）的联系方式”，address 明确地只关联到 article 和 body。

替换型媒体标签

  • script

    • script标签是为数不多的既可以作为替换型标签，又可以不作为替换型标签的元素。

  • img

    • 引入一张图片。这个标签是没有办法像 script 标签那样作为非替换型标签来使用的，它必须有 src 属性才有意义(不考虑 srcset 和 sizes 属性下)。

  • picture

  • video

    • 引入视频的标签。

  • audio

    • 引入音频的标签。

  • iframe

    • 一般用来包含别的页面的标签。

链接

  • link标签

  • a标签

    • a 标签是“anchor”的缩写，它是锚点的意思，标识文档中的特定位置。

  • area标签

    • area 标签与 a 标签非常相似，不同的是，它不是文本型的链接，而是区域型的链接。

表单

  • form

    • 为用户输入创建 HTML 表单的标签。

表格

  • table

    • 定义 HTML 表格的标签。

  • th

    • 定义表头的标签。

  • tr

    • 定义表格行的标签。

  • td

    • 定义表格单元的标签。
avatar
文章
阅读
粉丝