HTML学习笔记

React Native 开发移动端应用
ElECTRON 开发客户端
node.js 开发服务器应用
WebRTC 开发多人会议，直播等实时通信应用
WebGL开发3D游戏

记忆html的标签要记得巧计，标签是英文简写

1.ol 有序列表(Ordered Lists) li默认出来带序号

<ol>
  <li>1</li>
  <li>2</li>
</ol>

2.ul 无序列表(Unordered Lists) li默认渲染出来无序号带圆点

<ul>
   <li>1</li>
   <li>2</li>
</ul>

3.dl 定义列表(definition lists)

<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>演员：</dt>
  <dd>张国荣</dd>
</dl>

导演：: 陈凯歌
演员：: 张国荣

4.img 里的alt（alternate_text） alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。

<img src="img/center-bg.png" alt="解释图片">

5.多种类型输入框

<input type="text">//文本
<input type="number">//数值
<input type="range" id="range">//拖动条
<input type="date">//日期
<input type="checkbox">//多选框
<input type="radio" name="">//单选框 要加name属性

6.输入框带提示写法：input里list属性后面加datalist标签的ID

<input type="text" list="tooltip-list">
<datalist id="tooltip-list">
  <option>akfasf</option>
  <option>gasd</option>
  <option>hasda</option>
</datalist>

7.label标签

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（点击label就会选中input）。

8.<label> 标签的 for 属性应当与相关元素的 id 属性相同。

 <label for="male">Male</label>
 <input type="radio" name="sex" id="male" />
 <label for="female">Female</label>
 <input type="radio" name="sex" id="female" />

借助此属性，可以不写js就可以为dom添加css样式，借助css选择器如：
#id :checked + .content 点击label为元素添加:checked样式再选择其它dom

9. cite 短引用（作品的名字或章节）

<p>我最喜欢的一本书 <cite>小王子</cite></p>

我最喜欢的一本书小王子

10. q 短引用（quote）用于具体的引用

<p>我最喜欢的一句话 <q>世上本没有路</q></p>

我最喜欢的一句话世上本没有路

11. blockquote 块级引用 cite属性表示引用的地址

<blockquote cite="https://juejin.cn">
  <p>阿克苏规划可是就更好拉公司克拉拉</p>
</blockquote>

阿克苏规划可是就更好拉公司克拉拉

12. code 标签表示代码部分

<p><code>const</code>声明创建一个只读的常量</p>

const声明创建一个只读的常量

多行代码code 前面加pre标签

<pre><code>
  class Observer{
      constructor(){
      }
      update(){
        console.log("updated")
      }
  }
</code></pre>


  class Observer{
      constructor(){
      }
      update(){
        console.log("updated")
      }
  }

13. 强调的标签有 strong 和 em

<p>在投资之前<strong>一定要做风险评估</strong></p>

在投资之前一定要做风险评估

<p>在投资之前<em>一定要做风险评估</em></p>

在投资之前一定要做风险评估

13.标签使用data-*属性来嵌入自定义数据同时css可以用属性选择器选择

<li data-animal-type="鸟类">喜鹊</li>
<li data-animal-type="鱼类">金枪鱼</li> 

li[data-animal-type="鱼类"]