html相关概念以及一些标签｜青训营笔记

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

一、本堂课的重点内容

1. 以前在html中不知道的小技巧
2. 关于DOM树的概念
3. html以前不熟悉的标签
4. 总结

二、详细知识点

1.小技巧

• 如果标签里面不需要嵌套其他东西，可以简写标签为<img src='p.jpg' />即可

2.DOM树的概念

document object model 文档对象模型

• document
  • html
    • head
      • meta
      • title
    • body
      • h1
      • p
      • ...
• 其中树根是document，往下走是他们的孩子节点。

3.html不熟悉的标签

• audio标签：可以插入相关的音频，controls属性是游览器控件属性有播放、暂停、进度条、音量。
• video标签：插入视频，有controls属性，和上面的几乎一致。
• input标签：placeholder占位符属性，以前都是设置type=text中value值来占位，这样设计的缺点在于用户输入的时候需要手动删除value中的值。而placeholder在用户选择input标签以后会自动清除占位符。体验会很好。
• datalist标签：<datalist> 标签被用来在为 <input> 元素提供"自动完成"（输入一部分可以补全）的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。

<input list="browsers"> 
<datalist id="browsers"> 
    <option value="Internet Explorer"> 
    ...
</datalist>

• blockquote标签：语法如下。它表示摘自另一块的引用。cite是引用的网页在哪，里面的是主要内容。一般都是摘自一段话用来说明什么事件。

<blockquote cite="http:xxx.html">
    For 50 years... 
</blockquote>

• cite标签：单个使用的时候代表为哪个章节，或者那本书或者是哪个作品。例如

<P>我最喜欢的一本书是<site>小王子</site></p>

• q标签：表示的以前讲过的东西，现在再拿出来引用一下。

<p>在第一章里，我们讲过<q>字符串是不可变量</q></p>

• code标签：顾名思义插入代码用的。这里是短代码
• pre标签配上code标签：语法如下，这里就可以写入长代码了。

<pre><code>
const add = (a, b) => a + b;
...
</code></pre>

• strong和em标签：strong更多的是强调这个事情非常紧急，是一定要做的。而对于em来说更多上是语气上的强调。要重读的地方。

<p>在投资之前，<strong>一定要做风险评估！</strong></p>
<p>Cats <em>are</em> very cute</p>

4.总结

经过今天的学习，我对html的理解又上了一层楼，以前浅浅的学过一些标签。例如我们说的input标签，我最开始学习的时候是用的type属性。但是经过今天的学习我发现还有一个属性placeholder占位符，这个可比这个type好用多了。