【前端学习笔记01-HTML 自用】

内容来自于B站BV1p84y1P7Z5《尚硅谷禹神前端入门html+css零基础教程》P1-51，仅作笔记自用。

一、准备工作

1.下载VS code，安装插件Chinese、Live Server、Prettier-Code formatter、Auto Rename Tag、WakaTime、vscode-icons。在内置插件emmet中定制属性lang=“zh-CN”。

注：用VScode打开的是文件夹，且打开的网页是标准HTML结构，否则无法自动刷新。在存放代码的文件夹中放一个ico图片可配置网站图标。

常用快捷键：

C+S 保存

C+Z 撤销

C+S+K 删除整行

C+回车

S+A+上下 复制整行

C+S+ +- 界面缩放

S+TAB 左缩进

左键点击编辑目标，A+S拖动选中多行编辑

常用工具网站：

W3C官网： www.w3c.org

W3School： www.w3school.com.cn

MDN： developer.mozilla.org —— 平时用的最多。 

---

二、基本标签 

1.语义化标签

用特定标签去表达特定含义；标签的默认效果不重要，语义最重要。代码结构清晰可读性强，有利于 SEO（搜索引擎优化），方便设备解析（如屏幕阅读器、盲人阅读器等）。

2.块级元素和行内元素

块级元素独占一行，其中几乎什么都能写；行内元素中能写行内元素，不能写块级元素。

注：h1~h6不能相互嵌套，p中不要写块级元素。

3.不常用标签&常用标签

语义感不强的标签尽量不使用： small 、 b 、 u 、 q 、 blockquote

4.图片标签

alt 属性的作用：

搜索引擎通过 alt 属性，得知图片的内容。—— 最主要的作用。

当图片无法展示时候，有些浏览器会呈现 alt 属性的值。

盲人阅读器会朗读 alt 属性的值。

常见图片格式：

jpg：有损压缩，占用空间小，不支持透明背景；常用于网站的产品宣传图。 

png：无损压缩，占用空间略大，支持透明背景；可用于公司logo，重要配图。

bmp：不进行压缩，占用空间极大，不支持透明背景；可用于大型游戏中的图片。

webp：兼具以上优点，但兼容性较差；用于各种图片。

base64：一串特殊的文本，需通过浏览器打开；原理是把图片进行base64编码，形成一串文本；直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响；用于一些较小的图片或者需要和网页一起加载的图片。

5.相对路径&绝对路径 

注：相对路径中的./可省略。

6.超链接

7.列表

 

注：li 标签最好写在 ul 或 ol 中，不要单独使用。 

---

三、表格 

tr ：每一行

th 、 td ：每一个单元格（备注：表格头部中用 th ，表格主体、表格脚注中用： td ）

1.table元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格边框的宽度，只能控制表格最外侧。

2. 默认情况下，每列的宽度，得看这一列单元格最长的那个文字。

3.补充属性：

单元格内文字与边框的距离：cellpadding

外边框颜色和单元格背景色：bordercolor bgcolor 

占位符，占位文字：placeholder 

输入框宽度：style="width: 150"

---

四、表单