HTML记录 ｜ 青训营笔记

因缺思厅
182 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的第N天，记录一下HTML的知识回顾

HTML是什么

Hyper Text Markup Language 超文本标记语言，三剑客里负责网页结构的。

自动生成HTML框架

在Vscode新建HTML文件之后输入 ! 后回车会自动生成一个框架

<!DOCTYPE html>
<html lang="en">
<head>
    <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>

<! DOCTYPE html>

是一个html5标准网页声明，全程叫Document TyperText Markup Language,告知浏览器文档使用那种解析类型，避免浏览器的怪异模式，没有声明的话，浏览器默认使用怪异模式，在不同的浏览器中会显示不同的样式，如果添加了<! DOCTYPE html>,浏览器就会使用W3C的标准解析页面，这样子写出来的页面在所有的浏览器显示就都是一个样子了。

lang属性

接收一个参数来确定元素的语言，中文用zh-CN，英文用en,浏览器通过lang的参数来确定网页使用的语言，再跟主机的系统语言对比，来判定翻译问题。

meta元数据

<meta charset="UTF-8">“utf-8”是一种字符编码。charset=”utf-8”是告知浏览器此页面属于什么字符编码格式，下一步浏览器做好“翻译”工作。常见的字符编码有：gb2312、gbk、unicode、utf-8。 附上各个字符编码含义：

  • gb2312：代表国家标准第2312条，其中是不包含繁体的。
  • gbk：国家标准扩展版（增加了繁体，包含所有亚洲字符集）。
  • unicode：万国码。
  • utf-8：unicode的升级版。

<meta http-equiv="X-UA-Compatible" content="IE=edge"> X-UA-Compatible 是针对 IE8 版本的一个特殊文件头标记，用于为 IE8 指定不同的页面渲染模式。由于当下 IE6 和 IE7 使用率依然较高，综合考虑，启用 IE8 版本的 X-UA-Compatible 兼容模式显得相当重要。

<meta name="viewport" content="width=device-width, initial-scale=1.0">viewport标记，用于指定用户是否可以缩放Web页面，并对相关的选项进行设定。width 和height 指令分别指定视区的逻辑宽度和高度。它们的值可以是以像素为单位的数字，也可以是一个特殊的标记符号。如上文代码中device-width即表示，视区宽度应为设备的屏幕宽度。类似的，device-height即表示设备的屏幕高度。initial-scale用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异，通常情况下，设备会在浏览器中呈现出整个Web页面。设为1.0则显示未经缩放的Web页面。

HTML5的语义化

  1. 页面结构清晰-在没有CSS样式时也能有很好的可读性。
  2. 支持更多的设备-比如盲人阅读器，移动设备等等。
  3. 利于SEO优化-可以和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息。
  4. 便于团队开发和维护-都遵循W3C的标准，可以减少很多差异化的东西方便开发和维护。
  • <header>：头部标签
  • <nav>：导航标签
  • <article>：内容标签
  • <section>：定义文档某个区域
  • <aside>：侧边栏标签
  • <footer>：尾部标签
  • <title> ：页面主体内容
  • <hn>：h1~h6，分级标题，<h1> 与 <title>协调有利于搜索引擎优化。
  • <ul>：无序列表。
  • <li>：有序列表。
  • <small> ：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
  • <strong> ：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
  • <em> ：将其中的文本表示为强调的内容，表现为斜体。
  • <mark>：使用黄色突出显示部分文本。
  • <figure>：规定独立的流内容（图像、图表、代码等等）（默认有40px左右margin）。
  • <cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
  • <blockquoto> ：定义块引用，块引用拥有它们自己的空间。
  • <q> ：短的引述（跨浏览器问题，尽量避免使用）。
  • <time>：datetime属性遵循特定格式，文本必须是合法的时间格式。
  • <abbr> ：简称或缩写。
  • <dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
  • <address>：作者、或组织的联系信息（电子邮件地址、指向联系信息页的链接）
  • <del>：移除的内容。
  • <ins>：添加的内容。
  • <code>：标记代码。
  • <meter> ：定义已知范围或分数值内的标量测量。（IE 不支持 meter 标签）
  • <progress>：定义运行中的进度（进程）。

<link>链接标签

用来指定外部资源，建立文档与外部资源的联系

  • rel属性用来说明HTML页面与关联资源的关系类型，如icon，license，help，author
  • type属性用来指定所关联资源的MIME类型，如text/css,text/javascript,image/x-icon
  • href属性用来指定外部资源的URL

内联元素inline、块级元素block、行内块级元素inline-block

  1. 内联元素只占据它对应标签的边框所包含的空间，只能容纳文本或其他内联元素，只能通过修改水平边距、边框或者行高的方式改变尺寸，常见的内联元素有<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>
  2. 块级元素占据其父元素的整行，能容纳其他块元素或者内联元素，可以控制宽高行高边距边框等改变尺寸，常见的块级元素有：<div> <p> <h1>-<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>
  3. 行内块级元素的元素在行内排列，不会独占一行，支持设置宽高以及垂直边距，边框，常见的内联元素有：<img>、<input>、<td>
avatar
文章
阅读
粉丝