前端与HTML|青训营笔记

重点内容

• 前端用来干什么？原理是什么？
• 做前端需要考虑哪些方面的问题？
• 前端的扩展（边界）
• HTML的二三事
• 什么是元素？
• 常见元素
• 标题
• 列表
• 多媒体
• 输入
• HTML的文字处理
• 块引用
• 短引用
• 代码引用
• 语义化

详细知识点介绍+实践练习例子

前端用来干什么？原理是什么？

元素(elements)

元素可以没有内容和结束标签，但会有开始标签。例如 空元素(void elements)，如input, meta, img，没有成对tags，甚至连内容也没有，用于实现输入、设置字符集、为文字或图片添加超链接等功能。

tags中可以包含属性值（attribute），推荐使用双引号包裹，有些属性值有默认值，可以省略，如required,readonly,disable。

常见元素

标题的tags包括h1~h6，通常需要保证一个网页只使用1次<h1>标签，并且同级的副标题使用相同的tags，以避免显示错误的情况。

列表元素分为(以下内容采用无序表展示)：

• <ol>序列表(order list)
1. initial
2. secondary
3. ultimate

<ol>
    <li>initial</li>
    <li>secondary</li>
    <li>ultimate</li>
</ol>

• <ul>无序表(unordered list)
• initial
• secondary
• ultimate

<ul>
    <li>initial</li>
    <li>secondary</li>
    <li>ultimate</li>
</ul>

• <dl>定义表(definition list)

definition title

definition description

<dl>
    <dt>definition title</dt>
    <dd>definition description</dd>
    <dd>一个dt下可以有多个dd存在_1</dd>
    <dd>一个dt下可以有多个dd存在_2</dd>
</dl>

多媒体元素（必要的属性都是src）

• img: 图像链接，可包含alt属性，以在无法加载图片时展示替代性文本(alternative text)，只设置width或height时默认等比缩放。


    <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bf3bcf20d78744afa4ff24799aacc128~tplv-k3u1fbpfcp-watermark.image?" width="200">

• video: 视频链接。

    <video src="https://prod-streaming-video-msn-com.akamaized.net/3f6ca508-598d-4cbd-a3e2-43deea7bc377/b60c553e-9f3f-4164-8850-700a9a73a899.mp4" controls></video>

• audio: 音频链接。

    <audio src="http://music.163.com/song/media/outer/url?id=5267465.mp3" controls></audio>

输入元素

• tags
  
• 文本框(textarea)：生成文本框，未设定大小的情况了可以让用户自由拖动以改变大小
• 输入框
• 属性
• <placeholder>占位符
• type="range" 滑动块
• type="number" min="" max="" 要求输入范围min-max的数字
• type="date" min="yyyy-mm-dd" 要求输入min日期以后的日期
Textarea

<textarea>Textarea</textarea>
<p><input type="text" placeholder="input text">
<input type="range" min="0" max="500">
<input type="number" min="0" max="50">
<input type="date" min="2023/01/14"></p>

• 选择相关的属性
  
• type="checkbox" 是可以展示出每一个选项的多选
a b c ```html a b c ```
• type="radio" name="sports" name可以限定type="radio"只能单选
single select_1 single select_2

<label><input type="radio" name="sport">single select_1</label>
<label><input type="radio" name="sport">single select_2</label>

• 当datalist与input的list属性值相同 则可以生成拥有参考值的输入框
Greece United Kingdom

<input list="countries" placeholder="input+datalist"/>
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
</datalist>

• 下拉式单选
option1 option2 option3

<select>
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
  </select>

HTML的文字处理

• 块引用(blockquote)

HTML 的主要工作是编辑文本结构和文本内容（也称为语义），以便浏览器能正确的显示。本文介绍了 HTML的使用方法：在一段文本中添加标题和段落，强调语句，创建列表等等。

<blockquote cite="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">
    <p>HTML 的主要工作是编辑文本结构和文本内容（也称为语义），以便浏览器能正确的显示。本文介绍了 HTML的使用方法：在一段文本中添加标题和段落，强调语句，创建列表等等。</p></blockquote>

• 短引用（包括<cite>和<q>）
• 引用题目(cite)
• 引用内容(quote)

人死了，就像水消失在水中——《另一次死亡》

<p>人死了，<q>就像水消失在水中</q><cite>——《另一次死亡》</cite></p>

• 代码引用

        const add=(a,b)=>a+b;
    

const

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

语义化

引入标签以语义化，遵循语义化有利于：

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

另外，关于如何做到语义化，有以下几点要求：

• 开发者了解每个标签和属性的含义
• 并选择最适合描述该内容的标签
• 不要使用可视化工具生成代码，这将不利于语义化