前端与HTML | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 1 天，学习了掘金视频课《前端入门——基础语言篇》第一节课程 “前端与 HTML” ，以下为本次的学习笔记：

HTML基本框架示例：

所有的HTML标签都包括html最外层标签，head头标签，title标题标签以及body身体标签。

它们基本上有着如下框架：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>

DOM树

浏览器解析HTML代码转化成对应的DOM树，每个结点都是一个DOM结点

拓展
DOM 是 Document Object Model（文档对象模型）的缩写。
通过dom对象，在树形结构中，我们可以轻松定位到对应的标签位置，文本位置。
例如通过通过 JavaScript 对 HTML DOM 进行访问

提供有以下的方法：

getElementById() 返回带有指定 ID 的元素。

getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。

getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
.etc

HTML语法

标签和属性不区分大小写，推荐小写（react和vue框架的自定义组件用大写表示，原生HTML标签用小写表示）
空标签可以不闭合，比如input、meta
属性值推荐使用双引号包裹
某些属性值可以省略，比如required、redonly

HTML标题标签

h1~h6，双标签，如：

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>

HTML列表标签

有序标签（ordered list）

<ol>
    <li></li>
    <li></li>
</ol>

无序列表（unordered list）

<ul>
    <li></li>
    <li></li>
</ul>

定义列表（definition list）

<h2>霸王别姬</h2>
<dl>
    //一个dt可以对应多个dd
    <dt>导演</dt>//定义列表中的项目
    <dd>陈凯歌</dd>//描述列表中的项目
    <dt>主演：</dt>
    <dd>张国荣</dd>
    <dd>张丰毅</dd>
    <dd>...</dd>
</dl>

HTML链接标签

//原窗口打开
<a href="https://www.bytedance.com/">
    字节跳动官网
</a>
//新窗口打开
<a href="https://www.bytedance.com/" target="_blank">
    字节跳动官网
</a>

HTML多媒体标签

//图像标签
<img src="URL" alt="加载不出来时显示" width="宽度">
//音频标签
<audio src="URL" controls></audio>
controls显示默认播放控件
//视频控件
<video src="URL" controls></video>

HTML表单标签

//占位符，未输入时显示
<input placeholder="请输入用户名">
//范围，显示一个滑动块
<input type="range">  
//输入数字
<input type="number" min="1" max="10">
//选择日期或自己输入日期
<input type="date" min="2018-02-10">
//多行文本域
<textarea>Hey</textarea>
<input type="checkbox">//多选
<input type="radio">//单选
//下拉多选
<select>
    <option></option>
    <option></option>
</select>
//定义选项列表，提示用户输入内容，配合input使用，不限制自由输入
<input list="countries">
<datalist id="countries">
    <option>中国</option>       
    <option>美国</option>       
    <option>德国</option>       
</datalist>

HTML文本类标签

引用类：
快捷引用（cite为引用来源）：
<blockquote cite=""></blockquote>
短引用（名字、章节）：
<cite></cite>
短引用（具体的内容）：
<q></q>

代码类（用等宽字体表示）：
一行代码
<code>const</code>
多行代码：
<pre><code>
    const
    const
</code></pre>
加粗：<strong></strong>
斜体：<em></em>

具体标签含义看HTML文档

HTML内容划分框架

HTML语义化

HTML所有元素、属性以及属性值都拥有某种含义
开发者遵循语义编写HTML

语义化标签的优势

1.代码结构清晰，方便阅读，有利于团队合作开发。
2.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
3.有利于搜索引擎优化（SEO）。

前端与 HTML | 青训营笔记