官方课程学习记录 --- Rudaosongfengxu

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

本文基于已有前端经验和本节课程简单记录一下在我的理解中该节课程所强调的内容。

概念性内容

前端工程师旨在用Web技术栈解决多端图形用户界面交互问题，其中包括各种形式的人机交互方式:

PC/移动浏览器 || 客户端/小程序 || VR/AR

前端关注方面

功能 || 美观 || 无障碍 || 安全 || 性能 || 兼容 || 体验

HTML语法

空标签可以不闭合，如 input、meta

某些属性值可以省略，如 required、readonly

h1~h6 共六级标题

ol 有序列表

<ol>
    <li>A</li>
    <li>B</li>
</ol>

ul 无序列表

<ul>
    <li>A</li>
    <li>B</li>
</ul>

dl 定义列表

<dl>
    <dt>A:</dt>
    <dd>B</dd>
    <dt>C:</dt>
    <dd>D</dd>
</dl>

target属性释义

默认值: _self

_self : 在当前窗口或框架中加载目标文档

_blank : 打开新的窗口或新的标签页

_parent : 在父级框架中载入目标文档，当a标签本身在顶层时，与 _self 同效

_top : 直接在顶层的框架中载入目标文档，加载整个窗口

_parent 和 _top 在frame或iframe中使用较多

input

type属性释义

range

date

checkbox

被添加checked属性的标签会被预先设置为选中

<input type="checkbox" checked>yes
<input type="checkbox">no

radio

name属性值非默认且相同可形成选择互斥

<input type="radio" name="j">yes
<input type="radio" name="j">no

list 应用

<input list="alpha">
<datalist id="alpha">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</datalist>

select 标签

<select>
        <option>A</option>
        <option>B</option>
        <option>C</option>
</select>

引用

blockquote 块级引用

<blockquote> xxx </blockquote>

cite 短引用

常用包含作品或章节

<cite> xxx </cite>

q 标签

<q> xxx </q>

code 标签

多行引用需要用pre标签包裹

<p><code>long long</code> etc </p>
<pre>
    <code>
        long long a = 1, b = 1;
        cout << a + b;
    </code>
</pre>

strong 粗体强调标签

em 斜体强调标签

后记

了解标签和属性的含义

基于标签本身的默认样式考量什么标签最适合描述哪一类内容

不使用可视化工具生成代码

前端与HTML ｜ 青训营笔记