HTML基础

HTML->HyperText Markup Language 超文本标记语言
<!doctype html>: doctype标记当前HTML文件是什么样的HTML版本，决定了最终浏览器的渲染模式
<html></html>: 根标签
<head></head>: 放些页面原数据，但不需要直接呈现给用户，有页面标题（显示在标签上），编码方式等
<body></body>: 呈现给用户的内容浏览器拿到html文件后会将其解析成一个DOM树

HTML语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合，如input,meta
属性值推荐用双引号""包裹
某些属性值可以省略，如required,readonly

标题

<h1>~<h6>: 一级到六级标题，字体大小粗细依次减小，表示重要性依次减弱

列表

<ol>: 有序列表，列表项通过<li>表示，展示效果前自动补充1. 2. 3.
<ul>: 无序列表，列表项通过<li>表示，展示效果前自动补充·
<dl>: 定义列表,key-value形式，<dt>表示title,<dd>存放具体值。<dt>与<dd>是多对多的关系。

链接

<a>：href属性指定超链接，target属性指定链接的打开位置,title属性指定鼠标悬停在超链接上时显示的文字内容
<img>: src属性指定图片的地址，alt属性指定图片不被加载时显示的内容 <audio> <video>: src属性指定音频/视频内容的地址，controls属性表示需要显示浏览器默认播放控件

输入

<input>: type属性可选range number date text等，number模式可以设定最小值与最大值，date模式可以指定最晚日期与最早日期, file模式可以上传文件,checkbox radio模式可以指定是多选还是单选, placeholder属性指定默认显示内容
<textarea>: 文本域，用户可自由输入.cols属性设置可视高度，rows属性设置可输入文本行数 <select>: 下拉选择,选项写在<option>里
<dataList>: 对<option>里的内容在用户输入时有提示效果，之外的内容用户可自由输入

引用及其他文本内容处理

<blockquote>: 直接引用的较长的一段文字，cite属性表示该段文字来源地址
<cite>: 短引用，常为章节，标题，书名的引用
<q>: 将标签中内容用双引号""引起来
<code>: 代码引用，可以后续给出具体代码
<strong>: 内容重点强调，页面显示字体加粗
<em>: 通常用于英文内容，表示需要重读的部分,斜体

网页布局标签

<nav> 网页的导航
<header> 网页的头部 <main> 网页的主体部分（一般就一个） <article> 网页中的文章内容部分 <aside> 和主体相关的、在侧边显示的内容 <section> 独立的区块 <footer> 网页的底部

如何做到语义化

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

总结与感悟

尽管HTML对于前端人员入门来讲十分简单，但是其实其中蕴含的内容十分繁多，一些可能平时不会去注意的点其实也值得我们思考。比如之前写代码的时候在vscode中输入一个!就会生成HTML文档的一个模板，但是从未深究过这个模板中具体那一部分都是什么含义，但是通过本次课程我补充了解到doctype的含义与作用。还了解到很多用法值得深究与思考的标签，如和文字、引用相关的一些标签等。最重要的是老师在课程中教授给我们一些我认为是可以成为工程化理念的一些思想，比如我们在写一个页面前要进行美观安全功能性能等等多方面考量，要培养我们的语义化，有助于开发与维护。

前端与HTML | bit笔记