【MUJL】前端与 HTML | 青训营笔记

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

重点

0. 前端工作的定义
1. 前端技术栈拆解与分析
2. HTML 作用解析
3. HTML 语义化

一、前端

0. 使用Web技术栈来解决多端图形人机交互

1. 技术栈

   • HTML 内容
   • CSS 样式
   • JavaScript 行为
   • 通过网络协议与服务器端通信

2. 功能，美观，无障碍，安全，性能，兼容，体验

二、HTML

HyperText Markup Language

• doctype 标记当前文档使用的html版本

• html 文档的根标签

• head 存放页面的元数据（标题，编码...）

• DOM 树

  • HTML 代码的结构转换成的树结构
  • 其中每个节点称之为 DOM 节点

• 语法

  • 标签与属性不区分大小写 推荐小写 （Vue/React框架中自定义组件常用大写

  • 空标签可以不闭合 或在结尾写一个/

     <input />
     <meta />
    

  • 属性值推荐用双引号包裹

• 列表

   <!-- 有序列表 ordered list -->
   <ol>
       <li>item1</li>
       <li>item2</li>
   </ol>
   ​
   <!-- 无序列表 unordered list -->
   <ul>
       <li>item1</li>
       <li>item2</li>
   </ul>
   ​
   <!-- 定义列表(键值对) definition list -->
   <dl>
       <!-- definition title -->
       <dt>key1</dt>
       <!-- definition discription -->
       <dd>value1</dd>
       <!-- 可以多对多的关系 -->
       <dt>key2</dt>
       <dd>value2</dd>
       <dd>value3</dd>
   </dl>
  

• 链接 a

  • href hyper reference 超链接地址
  • target="_blank" 新标签页打开 不加上时为替换当前页

• 多媒体

  • 图片 img

    • src 图片地址
    • alt 图片加载不了时的替代性文本
    • width 宽度

  • 音频 audio

    • src
    • controls 控件

  • 视频 video

    • src
    • controls

• 输入

   <!-- placeholder 占位符 输入前显示在输入框里的文字 -->
   <input placeholder="占位符">
   ​
   <!-- "range" 滑动条 -->
   <input type="range">
   ​
   <!-- "number" 输入在[min,max]区间内的数字 -->
   <input type="number" min="1" max="10">
   ​
   <!-- "date" 日期选择 有日期选择框 -->
   <input type="date" min="2023-01-15">
   ​
   <!-- textarea 多行文本 -->
   <textarea>多行文本</textarea>
   ​
   <!-- 多选框 -->
   <label><input type="checkbox" checked />item1</label>
   <label><input type="checkbox" />item2</label>
   ​
   <!-- 单选框 相同name的选项之间互斥 -->
   <label><input type="radio" name="name" />item1</label>
   <label><input type="radio" name="name" />item2</label>
   ​
   <!-- 下拉选择 适用于选项较多 -->
   <select>
       <option>option1</option>
       <option>option2</option>
   </select>
   ​
   <!-- 带提示的输入框 -->
   <input list="listid" />
   <datalist id="listid">
       <option>option1</option>
       <option>option2</option>
   </datalist>
  

• 文本类

  • 引用

    • 块级引用 blockquote 常用于引用一大段话

      • cite 来源地址

    • 短引用 cite 一般表示作品的名字和章节

    • 短引用 q 表示具体的引用内容

  • 代码 code 可长可短

    • 引用多行代码时用 pre 标签包裹 code
    • 展示字体会和正文有区别

  • 强调

    • strong 更突出重要、严重、紧急（一定要xxx）
    • em 更强调语气，重读（这是xxx）

• 内容划分

  • header 页头 （与 head 区别：header 仍然是需要给用户呈现的内容）

    • nav 导航

  • main 页面主题 一般只有一个 新闻标题

    • article 文章正文 可以有多个 也可以没有

  • aside 与页面相关的内容 广告、推荐

  • footer 页尾 参考链接、版权信息、备案

三、语义化

0. 意义

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

1. HTML 传达内容，而不是样式

2. 如何做

   • 了解标签、属性的含义 MDN W3C
   • 不使用可视化工具生成代码

课后：MDN HTML--构建Web

HTML 简介 - 学习 Web 开发 | MDN (mozilla.org)

0. 块级元素和内联元素

   • 块级元素以块呈现

     • 一般独行出现
     • 常用于展示页面上结构化的内容（段落、列表、导航、页脚）
     • block形式展现的块级元素不会被嵌入内联元素中
     • 可以嵌套在其他块级元素中

   • 内联元素常出现在块级元素中

     • 不会导致文本换行
     • 通常出现在一堆文字之间

   • CSS显示类型并不会改变元素的分类，也不会改变包含关系

1. 布尔属性

   没有值的属性，如 disabled ，只能有和属性名一样的属性值

2. HTML 中的空白

   无论在 HTML 元素的内容中使用多少空格 (包括空白字符，包括换行)，当渲染这些代码的时候，HTML 解释器会将连续出现的空白字符减少为一个单独的空格符

3. 特殊字符

   原义字符	字符引用
   <	&lt; less than
   &gt; greater than
   "	&quot;
   '	&apos;
   &	&amp;