前端与HTML ｜青训营笔记这是我参与「第五届青训营」笔记创作活动的第1天一、前端应该关注的方面美观、安全、功能

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

一、前端应该关注的方面

美观、安全、功能、性能、无障碍

二、DOM树

三、HTML语法

1.标签和属性不区分大小写，推荐小写；

2.空标签可以不闭合，比如input,meta;

3.属性值推荐用双引号包裹;

4.某些属性值可以省略,比如required,readonly;

四、常用标签

1.列表

i.无序列表

<ul>
        <li>🍓</li>
        <li>🍉</li>
        <li>🍅</li>
</ul>

ii.有序列表

<ol>
        <li>阿凡达</li>
        <li>泰坦尼克号</li>
        <li>复仇者联盟</li>
</ol>

iii.定义列表

<dl>
        <dt>导演：</dt>
        <dd>陈凯歌</dd>
        <dt>主演：</dt>
        <dd>张国荣</dd>
        <dd>张丰毅</dd>
        <dd>巩俐</dd>
        <dt>上映日期：</dt>
        <dd>1993-01-01</dd>
</dl>

2.超链接标签

<a href="https://www.bytedance.com" target="_blank">字节跳动官网</a>

Target 属性

你可以定义被链接的文档在何处显示。 target="_blank"表示在新窗口打开文档

命令锚

<a name="tips">提示</a>
<a href="#tips">点击转到提示</a>

当使用命名锚时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样就无需不停地滚动页面来寻找信息了。

3.多媒体标签

i.img标签

<img src="" alt="Metal movable type" width="400" height="400">

alt表示图片不能正常显示时展示的替代性文字

ii.audio标签

iii.video标签

4.表单

i.输入

<input placeholder="请输入用户名"> <br>
<input type="range"> <br>
<input type="number" min="1" max="10"> <br>
<input type="date" min="2018-02-10"> <br>
<textarea>Hey</textarea>
<p>
    <label><input type="checkbox">🍎</label>
    <label><input type="checkbox">🍏</label>
</p>
<p>
    <label>
        <input type="radio" name="sport" />⚽
    </label>
    <label>
        <input type="radio" name="sport" />🏀
    </label>
</p>
<p>
    <select>
        <option>🎂</option>
        <option value="">🍓</option>
        <option value="">🍉</option>
    </select>
</p>

5.块引用

<blockquote cite="www.baidu.com">
    <p>天才</p>
</blockquote>

6.cite标签

<p>我最喜欢的一本书<cite>小王子</cite>。</p>
<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q></p>

7.短语标签code

<p><code>const</code>声明创建一个只读的常量</p>
<pre><code>
  const add = (a,b) => a + b;
  const multiply = (a,b) => a * b;
</code></pre>

五、HTML内容划分

六、语义化

HTML里面的元素、属性以及属性值都拥有某种含义，开发者应该遵循语义来编写HTML

好处：

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

前端与HTML ｜ 青训营笔记