前端基础：HTML | 青训营笔记

来自小星星的你
100 阅读2分钟

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

0 前端篇

0.1 什么是前端

  • 解决GUI（图形用户界面）人机交互问题
  • 跨终端
    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR等
  • Web技术栈
  • Web工程师就是使用Web技术栈解决多端GUI人机交互问题的工程师

0.2 前端技术栈

image.png

0.3 前端关注点

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

0.4 前端的边界

Node、Electron、React Native、WebRTC、WebGL、WebAssembly

1 HTML篇

1.1 HTML介绍

HyperText：图片、标题、链接、表格

Markup Language：标签，比如<h1></h1>

1.2 HTML代码示例

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

注释：

  • <!DOCTYPE html>：用来告诉浏览器使用哪个版本的HTML
  • <meata charset="UTF-8" />： 页面的编码方式,使用UTF-8编码

1.3 DOM树

image.png 浏览器解析HTML文件时会生成一个DOM树

2 HTML语法篇

2.1 HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 属性值推荐用双引号包裹
  • 某些属性值可以省略，比如required、readonly

2.1 HTML中的列表

  • 有序列表
  • 无序列表
  • 自定义列表
<h1>霸王别姬</h1>
<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>演员：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>         
</dl>

输出效果

image.png

2.2 HTML中的input标签

  • type="range"：范围选择
  • type="number"：数字选择，可以设置min和max
  • type="date"：日期选择
  • placeholder="":默认输入框显示的文字
  • <textarea>标签：多行文本狂
  • type="checkbox"：复选框如下，渲染样式为方框
<!-- 写法一 -->
<input type="checkbox" id="dog"><label for="dog">🐶</label>
<input type="checkbox" id="cat"><label for="cat">😺</label>
<!-- 写法二 -->
<label><input type="checkbox">🦝</label>
<label><input type="checkbox">🐯</label>
  • type="radio"：单选框，渲染样式为小圆点,书写方式与checkbox类似
  • select标签：下拉选择框，语法如下
<select>
  <option>🌰</option>
  <option>🍎</option>
  <option>🍌</option>
</select>
  • list="countries"：提示选项，语法如下
<input list="countries">
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>

2.3 文本类标签

  • <blockquote></blockquote>:长引用
  • <cite></cite>：短引用（一般表示作品名字）
  • <q></q>：短引用，带双引号（一般表示作品内容）
  • <code></code>：代码标签。多行代码在外层加个<pre></pre>

2.4 内容划分

image.png

3 语义化篇

3.1 语义化

  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML
    • 有序列表用ol；无序列表用ul
    • lang属性表示内容所使用的的语言

3.2 谁在使用我们写的HTML

  • 开发者：修改、维护页面
  • 浏览器：展示页面
  • 搜索引擎：提取关键词、排序
  • 屏幕阅读器：给盲人读页面内容

3.3 语义化的好处

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

3.4 传达内容，而不是样式

image.png

3.4 如何做到语义化

  • 了解每个标签和属性的定义（前往MDN学习）
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码
avatar
文章
阅读
粉丝