笔记-1-HTML

codeez 发布于 2021-9-16 20:48 阅读：2938 笔记

Hello everybody! 再过两天就是中秋节啦～
今天搭建了一个小博客，用来记录一下我的codelife《一位优秀前端的自我修养》hhhh
目前不知道写什么好，就先把学习笔记搬上来吧...（正好印象笔记的会员也要到期了。
笔记中如果有错误，还请指正我，感谢～

上世纪90年代，Berners-Lee上线了世界上第一个网站：http://info.cern.ch/hypertext/WWW/TheProject.html
现在我们看起来觉得它素面朝天，但在当时绝对是“天才之作”。这个网页就是用纯HTML编写的，没有样式和动态交互。

HTML在网页中充当了骨架的作用，负责网页的内容结构。
CSS在网页中负责视觉体验，丰富的样式带来更好的观感。
JavaScript在网页中负责交互处理，比如发起网络请求等操作。

HTML的全称是 HyperText Markup Language 中文名是“超文本标记语言”

什么是标记语言？

由无数个标记（标签、tag）组成；
对某些内容进行特殊标记，以供其他解释器识别处理；
比如使用<h2></h2>标记的文本就会被识别为“标题”进行展示；
由标签和内容组成的部分称为元素（element）；

HTML文件的拓展名是.htm或者.html
因为历史遗留问题，Win95/Win98系统的文件拓展名不能超过3个字符，所以当时使用htm。现在统一使用.html
html文件的基本结构：

<!DOCTYPE html>
<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    <p>
      网页内容
    </p>
  </body>
</html>

注：前端代码通常缩进2空格。

HTML都有哪些元素标签？
可以参考MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

有开始标签和结束标签的叫双标签元素，例如<p>内容</p>
只有一个标签的叫单标签元素，例如<img>
在H5版本前，单标签元素需要加上/，例如<img />。H5版本可省略，推荐不加。
HTML元素不区分大小写，推荐小写。
元素可以拥有属性，例如<p class="note"></p> 为p元素添加class属性。
元素可以嵌套，形成“父子”关系。例如：

<ul>
    <li></li>
</ul>

代码注释的作用：类似备忘录，写完代码后可能会忘记当初为什么要这么写代码，做个备忘。同时也为了方便同事理解你的代码。
HTML的注释格式： 在编辑器中的快捷键，选中内容后按 ctrl + / 即可添加注释。

文档第一行一定是文档类型声明（DTD），H5时代是<!DOCTYPE html>，相比以前H4或XHTML的文档类型声明简洁很多。
浏览器识别后会按HTML5的标准解析页面。

<html>元素被称为“根元素”，W3C标准建议为根元素增加lang属性，作用是：
帮助语音合成工具确定发音
帮助翻译工具确定翻译规则

head标签内存放网页的配置信息，比如网页标题、网页编码等
网页标题：<title>网页标题</title>
网页编码：<meta charset="UTF-8"> 配置网页编码时要用到元标签<meta>

body标签内存放网页的内容
<h1>大标题</h1>h1~h6是标题元素，级别从大到小。一个网页中建议只使用一个h1元素。
<p>文本内容</p>段落标签，表示一段内容。
<img src="图片地址" alt="图片描述"> 在网页中插入图像，alt属性在图片加载不成功时会显示，也会供屏幕阅读器使用。
<a href="要跳转的网址" target="_self" ></a>标签，或称锚(anchor)元素，用于跳转链接。target属性默认在当前窗口打开链接，改为_blank表示在新窗口打开。
当文档内容比较长时，可以给元素添加id属性，在a标签的链接后面加#id即可跳到id所在位置。
a标签可以包裹img标签，实现点击图片就可以跳转链接的功能。
iframe元素可以在一个网页中嵌入另一个网页。
<iframe src="网页地址" frameborder="0"></iframe> 如果想禁止其他人通过iframe的方式使用你的网页，可以在响应头设置X-Frame-Options:sameorigin。
frameborder属性用来控制是否显示边框，0是无边框1是有边框。
a元素target属性的其他值：_parent在父窗口打开URL，_top在顶层窗口打开URL。这两个值是和iframe结合使用的，日常基本用不到。

<div>和<span>元素的历史：
网页的发展早期没有css，那时通过html语义化元素来告知浏览器内容如何显示。后来出现了css，结构和样式需要分离，这时候html只负责结构。所以就出现了div、span来编写html的结构，样式交给css处理。
这两个都是纯粹的“容器”，div是块级元素，span是行内元素
块级元素：占据整行空间，能直接设置宽高，垂直排列，外边距影响其他元素。
行内元素：不独占一行，根据内容大小来控制自身大小，不能直接设置宽高，水平排列，垂直外边距不影响其他元素。不能包含块级元素。

空白折叠现象：文字与文字之间的多个空格换行会被折叠成为一个空格。标签“内壁”和文字之间的空格会被忽略。

有些属性只能设置在特定的元素中，比如img的src、a元素的href
也有一些属性是所有元素都可设置的，这样的被称为“全局属性”
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes

列表标签：无序列表：（ul）有序列表：（ol）定义列表：（dl）
ul、ol的子元素只能是li，ul的type属性废弃，ol的type属性如下：

| a | 表示小写英文字母编号 |
| A | 表示大写英文字母编号 |
| i | 表示小写罗马数字编号 |
| I | 表示大写罗马数字编号 |
| 1 | 表示数字编号（默认） |

ol拥有start属性，属性值必须是一个整数，指定列表编号的起始值。还有个reversed属性，表示倒序。
定义列表demo：

<dl>
    <dt>北京</dt> // 数据项
    <dd>我国首都、政治中心</dd>  //数据定义
    <dt>上海</dt>
    <dd>我国经济、科技创新中心</dd>
</dl>

img标签：用于在网页上展示图像，支持以下格式：

| .bmp | windows画图软件默认保存的格式，位图 |
| .gif | 动态图片 |
| .jpeg(.jpg) | 有损压缩图片 |
| .png | 支持透明效果 |
| .svg | 矢量图片 |
| .webp | 最新的压缩算法非常优秀的图片格式 |

a标签的悬停文本属性：title
audio标签可插入音频，兼容到IE9

<audio src="音频地址" controls>    //controls显示播放控件 autoplay属性自动播放 loop属性循环播放      显示这段话：你的浏览器不支持audio标签。</audio>常用的支持mp3与ogg、wav等格式的音频。

video标签可插入视频，兼容到IE9

<audio controls>    <source src=“music.mp3” type=“audio/mpeg”>    <source src=“music.ogg” type=“audio/ogg”>    你的浏览器不支持</audio>

区块标签：

| <section> | 文档的区域，语义比div大 |
| <article> | 文档的核心内容 |
| <aside> | 文档的非必要相关内容 |
| <nav> | 导航条 |
| <header> | 页头 |
| <main> | 网页核心部分 |
| <footer> | 页脚 |

span 标签是文本中的“区块标签”无任何默认样式b被加粗、u加下划线、i倾斜，css以替代他们的功能，在网页中也可以表示需要强调的文本。
strong、em、mark 标签均表示强调语义。
figure、figcaption标签，figure元素代表一段独立的内容，与说明figcaption配合使用，他是一个独立的引用单元，比如建议读者拓展视野的图片，当这部分转移到附录中或者其他页面时不会影响到主体。

<figure><img src=“xxx.png”><figcaption>这图片是xxx的图片</figcaption></figure>

表单标签：所有表单都以一个form元素开始

<form action=“xxx.php” method=“post">
    //action表示要提交到后台的地址 
    <input type=“text” placeholder=“占位提示” disabled value=“值">
    </form>
    // type=“radio”是单选，互斥的值要设置他们的name属性为相同的值。加上checked表示被默认选中。value属性是像服务器提交的值。
    // label标签，将文字和单选按钮进行绑定。点击文字也视为点击单选按钮
    <label>
        <input type=“radio”> 男
    </label>
    // 在html4时代的绑定方式：
    <input type=“radio” id=”nan”>
    <label for=“nan”>男</label>
    // type=“checkbox”是复选框，同组复选框要把它们的name设为一样的，向服务器提交的是value值type=“password”是密码框
    // 去掉input的蓝色边框：outline:none

下拉菜单：

<select>
    <option value=“alipay">支付宝</option> //默认选中加 selected
    <option value=“wx”>微信</option>
    <option value=“bank”>网银</option></select>

多行文本框：

<textarea>
    //rows和cols属性用于定义多行文本框的行数和列数    
</textarea>

三种按钮：

<input >
// type=“button”普通按钮，可简写为：<button>中间除了可以是文字外还可以是图片</button>
// type=“submit” 提交按钮 和button标签默认有提交表单的功能。
// type=“reset” 重置按钮

html5新增表单控件，更丰富的input种类：

| color | 颜色选择控件 |
| date、time | 日期、时间选择控件 |
| email | 电子邮件输入控件 |
| file | 文件选择控件 |
| number | 数字输入控件 |
| range | 拖拽条 |
| search | 搜索框 |
| url | 网址输入控件 |

datalist控件可以为输入框提供一些备选项，当用户输入的内容与备选项文字相同时，将会显示智能感应。

<input type=“text” list=“province”>
    <datalist id="province">
        <option value="山东">
        <option value="北京">
    </datalist>

表格标签table
td和th上的colspan属性用来合并列跨度，rowspan属性用来合并行跨度。
cellpadding 定义了表格单元的内容和边框之间的空间，已废弃，请使用css替代。

块元素：display:block/table; 有div h标签 table 列表标签 p等
内联元素：display:inline/inline-block；有 span img input button等

一些常见题目：

一、什么是SEO（搜索引擎优化）？为什么它对网站开发至关重要？
SEO是搜索引擎优化，它的英文全称是Search Engine Optimization
因为我们开发的网站并不全是后台管理系统，还有很多是门户网站或者其他功能网站，（例如：地址帮）这些网站通常需要获取更多的流量。所以我们要在了解一定的搜索引擎自然排名机制的基础上，对网站进行内部和外部的优化，让用户在使用关键字搜索后，尽可能的提升网站的自然排名。

二、SEO有哪些关键点？在日常开发中，都采取了哪些措施来进行SEO？
按照在开发中的优先级进行排序，主要有以下几种方式：
1.SSR服务端渲染
现在的项目基本都是使用Vue、React这种框架开发的，大部分页面由客户端JavaScript动态生成。很多搜索引擎只能爬去静态HTML代码，不会执行JS代码，因此动态生成的内容无法被爬虫索引。
另外多数情况下不会等待数据加载完成后再抓取，也会导致网站很多关键信息不能被收录。
所以有SEO要求的网站我们都会采用SSR技术。
SSR能够在服务器上执行JavaScript并渲染出HTML页面，然后发送到客户端。提升SEO效果。
使用Vue开发的网站选择Nuxt.js、使用React开发的网站选择Next.js

2.准确的TDK表述
TDK就是title、description、keywords，描述要贴合网站主题

3.语义化的HTML元素，图片alt、h1、h2等合理使用
语义化的HTML代码和符合W3C规范是SEO关键要素之一。
语义化是指使用具有明确含义的HTML元素。搜索引擎在爬取网站时，也会更容易理解网站的内容以便收录。（同时也能提高代码可读性和可维护性）例如header、footer、nav、article、aside
图片必须加alt属性
一个页面只有一个h1标签

4.编写合理的robots.txt文件
robots.txt存放在网站根目录，主要作用是告诉搜索引擎爬虫哪些部分可被抓取，哪些部分不应该被抓取。
通过指示搜索引擎忽略不重要的文件或目录，可让搜索引擎更专注于重要内容的抓取和索引。

5.HTTPS
自2014年以来，Google已将HTTPS作为其搜索排名的信号之一。

6.内部链接和外部链接
内部链接有助于建立网站的信息层次结构。但过多的内链也会分散页面权重。
没有内部链接的页面被称为“孤儿页面”，难以被发现。
高质量的外链可以提升网站的权重指数。

7.其他
sitmap文件、网站导航、响应式处理......

URL和URI的区别？
URI（Uniform Resource Identifier）统一资源标志符，用于标识Web技术使用的逻辑或者物理资源
URL（Uniform Resource Locator）统一资源定位符，俗称网络地址，相当于网络中的门牌号
URI在某一规则下能把一个资源独一无二的识别出来
URL作为一个网络Web资源的地址，可以唯一将一个资源识别出来，所以URL是一个URI
所以URL是URI的一个子集
但URI并不一定是URL

前端