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

html认识

对于html的一些基础认识

定位：

负责前端中的内容，框架（对比CSS：样式；JavaScript：行为）

学习要点：

标记语言，使用简单，需要重点注意其语义化

语义化意义：

• 代码可读性
• 可维护性
• 搜索引擎优化
• 提升无障碍性等优点

语义化核心：

标签和内容（标题还是正文，有序还是无序）绑定，而与内容的样式（大小，颜色）无关。虽然一般标题字号会更大，加粗等特征。

html用法合集

标签合集，方便查询

特殊字符写在文本中时：

原义字符	等价字符引用
<	&lt
>	&gt
"	&quot
'	&apos
&	&amp

注释：<!---->

文字：

段落：p

标题：h1~h6，显示标题大小依次减小

列表：无序用ul，有序用ol，内用li包裹元素，显示时元素单独成行

倾斜强调：em

加粗强调：strong

注1：没有更适合元素下，可以使用下列表象元素（没有语义明晰的元素）：
i 斜体：外国文字，分类名称，技术术语，思想
b粗体：关键字，产品名称，引导句
u划线：专有名词，拼写错误

注2：使用下划线时，注意更改下划线的样式依次和超链接区分开

描述：描述列表用dl；术语用dt；描述部分用dd

引用：块引用blockquote包裹；cite属性用url指引；行内短引用用q

超链接：

包含超链接：

a：将链接含义文字或者块级元素（图片等）放在a标签之间

href属性：包含网址、资源位置

title属性：添加当鼠标指针悬停在链接上时，作为提示信息出现

<a  href="https://www.mozilla.org/en-US/"
    title="了解 Mozilla 使命以及如何参与贡献的最佳站点。">
    Mozilla 主页
</a>

如上代码会显示为： Mozilla 主页

URL定义资源在网络上的位置的文本字符串，使用路径定义。

• 指向当前目录：文件名
• 子目录：子目录名/文件名
• 返回上级目录：../
• 指向文档片段：（给元素分配id）在文件名后跟#id名；同份文档直接#id名

电子邮件连接

href="mailto:邮件地址"

不写邮件地址会到一个没有收件人的地址

连接注意事项：

• 链接位置别显示，用户无需知晓且影响观感

• 提示精简，“链接”或“链接到”等提示别说（文本本身有颜色下划线等提示）

• 链接标签尽可能短，屏幕阅读器会解释整个链接文本。

• 尽量减少相同文本的多个副本链接到不同地方的情况。如果存在标记为“单击此处”、“单击此处”、“单击此处”这样脱离上下文的链接文本，容易对使用屏幕阅读器的用户带来问题。

• 当链接到一个需要下载的资源（如 PDF 或 Word 文档）或流媒体（如视频或音频）或有另一个潜在的意想不到的效果（打开一个弹出窗口，或加载 Flash 电影），你应该添加明确的措辞，以减少混乱。例如说明有多大文件需要下载，会播放视频，需要xx插件