HTML笔记

HTML初识

基础认识：

大前端：网页，小程序，服务器，客户端，数据可视化
HTML:HTML4,HTML5
CSS:CSS2,CSS3

计算机：

 1.硬件：cpu（中央处理器） 内存，硬盘（存储器）  键盘，鼠标（输入设备）  音箱，显示器（输出设备）

补充： |内存和硬盘区别 |
|内存|硬盘|
| 暂时性存储 | 持久化存储 |
| 读写速度快 |容量大 |

2.软件：系统软件 ，应用软件

应用软件：

C/S架构 （需要安装，偶尔更新，不跨平台）（大型专业应用，安全性要求较高）
B/S架构 （无需安装，无需更新，可跨平台）（前端工程师主要开发-写网页）

浏览器：

五大主流：chrome（webkit，blink），safari（webkit），Firefox（gecko），opera(blink)，IE（trident）
内核：是浏览器的核心，用于处理浏览器所得到的各种资源（五大浏览器，四大内核）
网页：
标准：结构（THLM），表现（CSS），行为（JavaScript）

HTLM:

全称：HyperText Markup Language
译为：超文本标记语言
超文本：超级文本，内容更丰富
标记：文本要变成超文本，就需要用到各种标记符号
语言：每一个标记的写法，读音，使用规则，构成标记语言

一些基本操作：

（1）查看文件夹的几种布局 ：左上角点击查看-八种布局方案

（2）查看文件详细信息：鼠标右键可选择，还可调整位置

（3）展示文件的扩展名：右上角，勾选文件扩展名
（4）指令程序打开某个文件：鼠标右键-打开方式

（5）默认打开文件方式：右键-属性-打开方式-更改-选择-确定

（6）统一格式：菜单-设置-默认应用

（7）查看电脑是多少位数：菜单-设置-系统-关于

HTML初体验：
（1）创建一个网页：鼠标右键-创建文本文档-输入内容-保存（直接保存：文件-保存，快捷键保存：ctrl+s），右键重命名（.html）
（2）网页改造：变回记事本添加网页内容：右键-打开方式-其他应用-记事本& 菜单-记事本-左键点击文件拖动-鼠标加号-文字左右加<>，（文档改写成文件：win11在文件资源管理器选项里查看，把隐藏已知文件类型的扩展名这选项点掉，在重新应用即可）
（3）程序员写的叫源代码，要交给浏览器进行渲染
（4）借助浏览器看网页的源代码：在网页空白处鼠标右键-查看源代码

HTML标签

  (1)标签又称元素，是HTML的基本组成单位
（2）标签分为：双标签与单标签（绝大多数为双标签）
（3）标签名不区分大小写，但推荐小写
（4）

双标签：左为起始标签（<标签名>），标签体，结束标签（小写）
（5）单标签：<标签名/>
（6）标签可以嵌套（需要缩进-TAB,换行）,并列

HTML标签属性

（1）用于给标签提供附加信息
（2）

（0次为不限循环）

（3）有些特殊的属性，没有属性名，只有属性值，且属性名前需要空格（bgcolor-背景色）（input后加bgcolor和loop无用）
（4）注意点：

（5）一个标签可以有多个属性但不能重复，重复会以前一个为主

HTML基本结构：

1.

2.（1）想要呈现在网页中的内容写在body标签中
（2）head标签中的内容不会出现在网页中
（3）head标签中的title标签可以指定网页的标题
（4）

代码编译器：Visual studio code
插件：LiveServe
右键-

双击文件（文件路径）&通过LiveServe（服务器路径）（优点：自动刷新，自动保存（3））(缺点：必须用Visual studio code打开一个文件夹，网页不标准失去自动刷新功能)

注释：
特点：注释内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见
作用：对代码进行解释说明
开头:（CTRL+z撤销）（就近原则，不能嵌套）（注释可以让某段代码暂时不参加运行）（快捷键注释：CTRL+/）

文档声明：

HTML字符集编码：

右下角显示编码方式（通过编码方式重新打开：解码，通过编码保存：编码）（问号无救，乱码可救：解码错误）
需要告诉浏览器编码方式

总结：

设置网络语言：

翻译按钮：直接刷新，强制刷新：shift+ 刷新，重新打开，等

扩展知识：lang属性的编写规则（了解）

标准结构：

删除快捷键：光标放在所删位置：shift+ctrl+k
改lang后的语言：齿轮，设置，扩展，Emmet,variables,添加项
配置图标：（右键，检查，小红点），图片（.ico）-拖拽（图片存放在visual studio code所打开的大文件夹中，不宜过深）
合并成一个文件夹：右键新建文件夹，shift移动

开发者文档：

w3school（正统）
MDN（用的多）

排版标签：

标题不能互相嵌套
p标签里面不能含有p/h/div，不能含有标题标签
换行快捷键：ctrl+回车

语义化标签：

优点：代码可读性强清晰，有利于搜索引擎优化（seo），爬虫（机器人，得到重要信息），方便设备解析

块级元素与行内元素：

复制快捷键：shift+alt+向上/下

文本标签：

不常用的文本标签：

（b-加粗文字，strong-加重文字）

（最后两个为块元素）

图片标签：

相对路径，绝对路径：

放大字体快捷键：ctrl+shift+-/+

常见图片格式：

超链接-跳转页面：

超链接-跳转文件：

跳转锚点：

唤起指定应用：

超文本含义：

列表：

（<.dt>数与名称，<d.d>定义+描述）

列表注意事项：

（a标签不能直接列在o1/u1中，否则会丢失序号，需要嵌套在li中）

（嵌套使用例子）

表格-基本结构：

表格组成：

（表格脚注可写可不写）

表格边框：

（值大于1是控制最外层边框）
最后呈现结果：

表格-常用属性：

控制表格宽度（width）高度（height）间隔（cell spacing）水平对齐（align）

表格跨行与跨列：

常用标签：

（回车不管写多少个最后都解析为一个）
表单-基本结构：

表单-文本框与密码框：

表单-单选框和多选框：

文本域和下拉域：

（有value的先显示，没有的则显示后面的文字）
（select当中默认选择则为selected而不是checked）

（rows和cols之后可以拉动再调）

表单-禁用表单控件：

（disabled禁用）

表单-label标签

表单-fieldset与legend