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

前端工程师是使用web技术栈解决多端图形交互问题

前端应该关注哪些方面？

0. 美观
1. 性能
2. 功能
3. 体验
4. 兼容
5. 安全
6. 无障碍

HTML

超文本标记语言

结构：

语法：

• 标签和属性不区分大小写，推荐小写
• 空标签可以不闭合，比如：input、meta、img
• 属性值推荐以双引号包裹
• 标签中某些属性值可以省略，如：input中的required、readonly

HTML中的常用标签：

图片标签

• 结构：<img />

• 图片标签的相关属性

  • scr 图片地址
  • title 鼠标悬浮在图片上时展示的内容
  • alt 当图片加载失败的时候，展示相关提升文本
  • height与width 用于在标签内设置图片宽与高

标题标签与段落标签

• 标题标签共由6个标签组成 h1~h6 由大到小越往后字体尺寸越小
• 段落标签 用于表示一个段落

<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868
年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>...</p>

列表标签

• 有序列表

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

• 无序列表

<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

无序列表与有序列表标签的前注符号都可以通过type属性进行样式修改

• 自定义列表

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

链接标签

• 结构：<a></a>

• 属性：

  • href 跳转的地址

  • target 设置是否在当前页面进行跳转

    • 默认不调整 _self
    • 在新页面跳转 _blank

音频标签

• 结构 <audio></audio>

• 属性：

  • src 音频文件地址
  • controls 显示控制按钮
  • autoplay 文件准备就绪后自动播放
  • muted 静音
  • loop 循环播放

视频标签

• 结构 <video></video>

• 属性：

  • src 音频文件地址
  • controls 显示控制按钮
  • autoplay 文件准备就绪后自动播放
  • muted 静音
  • loop 循环播放

如果视频或音频需要兼容多方浏览器，可以使用source标签

• 结构：
• 使用方法：

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

注意：在使用了source标签后，则不再需要在外部标签中设置src

表单标签

• 结构 <input></input>

• 属性

  • type 设置表单标签类型

    • text 文本属性框
    • password 密码输入框
    • audio 单选框
    • checkbox 多选框
    • number 只能输入数字
    • range 滑块控件
    • date 日期框
    • reset 重置按钮
    • email 邮箱输入框
    • search 搜索框
    • color 颜色选择
    • submit 提交按钮

  • value 设置输入框默认值

  • placeholder 设置输入框提示文本

  • required 设置输入框不能为空

  • name 设置标签名称，主要用于对单/多选框进行分组

  • max/min 设置数值类型标签的最大值与最小值

文本域标签

• 结构:<textarea></textarea>

• 属性：

  • value 设置默认值
  • clos 设置宽度
  • rows 设置高度
  • wrap 控制换行 默认soft off不允许换行

下拉控件标签

• 结构：<select><option></option></select>

• 属性:

  • value 设置option标签默认值
  • multiple 添加后 可以设置size 实现选择多个选项的效果

• 使用：

<select id="simple" name="simple">
  <option>Banana</option>
  <option selected>Cherry</option>
  <option>Lemon</option>
</select>
​
<!-- 在option标签外部包裹optgroup标签实现分组 -->
​
<select id="groups" name="groups">
  <optgroup label="fruits">
    <option>Banana</option>
    <option selected>Cherry</option>
    <option>Lemon</option>
  </optgroup>
  <optgroup label="vegetables">
    <option>Carrot</option>
    <option>Eggplant</option>
    <option>Potato</option>
  </optgroup>
</select>

自动补全框

• 结构<datalist><option><option></datalist>
• 使用与下拉控件标签类似

引用标签

• 块级引用标签

  • 结构：<blockquote cite=""><blockquote>
  • 属性：cite 声明文章引用地址

• 段引用标签

  • 结构 <cite></cite> []()<a name="PNlCW"></a>

其他标签

• 代码结构标签

  • 结构 <code></code>

• 预格式化标签

  • 结构 <pre></pre>
  • 预格式化标签会保存标签内的样式直接使用

• 强调标签

  • 结构：<strong></strong>
  • 起加粗强调作用

• 特殊意义强调

  • 结构：<em></em> []()<a name="Kaohl"></a>

内容划分

header：显示头部内容 nav：导航栏 main：内容主要展示区域 article：文章或其他内容展示区域 aside：展示广告或其他额外功能 footer：尾部标签，展示作者或公司信息，外部链接，安全声明等

标签的语义化

HTML中的元素、属性及属性值都有各自的含义，开发者应遵循语义来编写
语义化的好处：

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

如何做到语义化：

• 了解每个标签和属性的含义
• 思考什么标签最适合描述这个内容
• 不使用可视化工具生成代码

总结

HTML是为了传达内容，而不是为了展示样式。在html众多标签中，每一个标签都拥有自己独立的作用，在编写页面时善用没一个标签，使其作用发挥出来，才是html的目的。