Code More Create | Code More Create

On this page

前端应该关注的点

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

HTML

超文本标记语言。
传递内容，而不是样式。

html

<!DOCTYPE html>：决定浏览器以标准模式进行加载。

<head>：规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。

<meta>:包含文档级元数据，网站的一些配置，在网页移动端开发中需要配置相关属性。
	
<body>:包含网站的主体内容。

语法

标签和属性不区分大小写，推荐小写
属性值用“”括起来
部分属性不需要属性值，如required

分类

常见标签
- h1-h6：标题标签
- ol > li ：有序列表
- ul > li ：无序列表
- dl > dt > dd ：定义列表 > 标签 > 值
- a：链接
  - 最重要的属性href
  - target
- img：图片
  - alt可以设定图像的备用文本描述
- audio：音频
  - controls启动浏览器默认控件
- video：视频
- input：输入
  - type：range、number、date、...
- textarea：文本域
- label > input：单选框/多选框
  - input的type为radio/checkbox
- select > option：下拉选项
- datalist > option：可选输入
- blockquote：块级引用元素
  - cite：表示出处、引用
- cite：短引用，一般表示书名等
- q：短引用，一般表示上文已经说明过的内容
- code：表示代码
- pre > code：多行代码
- strong：加粗，表示事情重要、紧急
- em：斜体，多表示语气上的强调
布局标签
- header > nav
- main > article
- aside
- footer

语义化

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

好处

方便开发者 - 增强代码可读性、可维护性
搜索引擎优化，提取关键词、排序
屏幕阅读器 - 给盲人读页面内容，提高无障碍性

如何做到语义化

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

其他

html

<template> ：内容模板标签。可以将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器

在加载页面时确实会处理元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。随后可

以在运行时使用JavaScript实例化。
	
<iframe>：嵌入外部网页