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

HTML基础学习

特殊字符

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

head标签

保存界面的一些元数据（meta）

标题和段落

标题：h1，h2......h6
段落： p
无序列表：ul
有序列表： ol

超链接

如果要指向上级目录,可以用../表示,比如

<p>点击打开 <a href="../pdfs/project-brief.pdf">项目简介</a>。</p>

如果想要链接到该文档的特定部分,需要先给链接到的元素增加一个"id"属性,比如

<h2 id="Mailing_address">邮寄地址</h2>

然后再用href连接到指定位置处

<p>要提供意见和建议，请将信件邮寄至 <a href="contacts.html#Mailing_address">我们的地址</a>。</p>

可以用同样的办法连接到同一份文档的不同位置,把上面代码改成href=#Mailing_address就行.

尽可能使用相对链接:

效率高
检查代码相对简单

当要链接到下载的具体资源时,可以再href之后添加一个download属性,比如download="juejin-installer.exe"

高阶文字排版

描述列表

描述列表使用<dt></dt>(description term)

其中每个描述使用<dd></dd>(description definition)闭合

引用

块引用使用<blockquote>,行内引用使用<q>.

缩略语

用<abbr>来表示，并且提供缩写的解释（使用title=），光标放到单词上会有解释。

上标和下标

分别用<sup>和<sub>来标注。

时间

用<time datetime="">来标注。

文档与网站架构

文档的基本组成部分

页眉 <header>
导航栏 <nav>
主内容 <main>;<article>;<section>;<div>： main在每个界面上只能用一次，并且直接位于body中
侧边栏<aside>
页脚<footer>

无语义元素

span：内联的（inline）的无语义元素。
div：块级的无语义元素，比较容易被滥用，尽可能在找不到更好语义方案的时候使用

换行

br：普通换行
hr：生成一条水平分割线

验证HTML文档

可以使用 Markup Validation Service

插入图片

用<img>插入,并且可以加上alt属性来添加备选文本,当无法显示图片的时候可以显示备选文本.如果需要改变图片的大小,最好用css. 可以用figure和figcaption来为图片提供一个语义容器.

HTML学习笔记｜ 青训营笔记