HTML 笔记

叶涟风不息

已于 2022-09-28 20:03:58 修改

阅读量100

点赞数 1

分类专栏：学习笔记前端文章标签： html 前端 html5

于 2022-08-03 02:43:43 首次发布

本文链接：https://blog.csdn.net/weixin_50926053/article/details/126132900

版权

学习笔记同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

文章目录

HTML
- 基本概念
- 标签

HTML

基本概念

网页与网站
- 网页：通常为 HTML 格式文件，使用浏览器阅读，是构成网站的基本元素，.htm/.html 后缀
- 网站：网页的集合
HTML（HyperText Markup Language）：超文本标记语言
- 超文本：图片、声音等超越文本限制的内容，超链接文本
常用浏览器：IE、Firefox、Chrome、Safari、Opera
- 浏览器内核（渲染引擎）：读取 HTML 文档，整理讯息，计算显示方式并显示页面
  浏览器内核备注
  IE Trident IE、Edge
  firefox Gecko 火狐浏览器内核
  Safari Webkit 苹果浏览器内核
  chrome/Opera Blink chrome/opera 浏览器内核。Blink 其实是 WebKit 的分支
- 国产浏览器多采用 Webkit/Blink 内核
Web 标准：W3C（World Wide Web Consortium）组织和其他标准化组织指定的一系列标准的集合
- 构成：结构、表现、行为
  标准说明
  结构整理分类网页元素、HTML
  表现设置网页元素外观样式、CSS
  行为网页模型的定义和交互、JavaScript
- 最佳体验方案：结构、样式、行为相分离

浏览器	内核	备注
IE	Trident	IE、Edge
firefox	Gecko	火狐浏览器内核
Safari	Webkit	苹果浏览器内核
chrome/Opera	Blink	chrome/opera 浏览器内核。Blink 其实是 WebKit 的分支

标准	说明
结构	整理分类网页元素、HTML
表现	设置网页元素外观样式、CSS
行为	网页模型的定义和交互、JavaScript

语法规范
- 标签是由尖括号包围的关键词 <html>
- 标签通常成对出现 <html> </html> 双标签，开始/结束标签
- 标签也可单个出现 <br /> 单标签
双标签关系：包含关系、并列关系
标签分类
- 块元素
  - <h1>~<h6> <p> <div> <ul> <ol> <li>
  - 特点
    - 独占一行
    - 宽度、高度、内外边距可控制
    - 宽度默认父级宽度（100%）
    - 作容器盒子可容纳任何标签
  - 注意：文字类元素（<h1>~<h6> <p>）内不能放块级元素
- 行内元素（内联元素）
  - <a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>
  - 特点
    - 一行显示多个
    - 宽度、高度直接设置无效
    - 宽度默认内容宽度
    - 容纳文本或行内元素
  - 注意：链接（<a>）不能嵌套，可放块级元素，但最好转换为块级模式
- 行内块元素
  - <img /> <input /> <td>
  - 特点
    - 一行显示多个
    - 宽度、高度、内外边距可控制
    - 宽度默认内容宽度

常用标签

基本结构标签（骨架标签）

标签名	定义	说明
`<html></html>`	HTML 标签	最大的标签、根标签
`<head></head>`	文档头部	内部必须设置 title 标签
`<title></title>`	文档标题	网页标题
`<body></body>`	文档主题	包含所有页面内容元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

<!DOCTYPE html> 文档类型声明标签，表明使用 HTML5 显示网页，位于文档开头，不是 HTML 标签
lang="zh-CN" 定义网页显示语言，对浏览器和搜索引擎有警示作用，对网页内容的语言类型没有限制
<meta charset="UTF-8" /> 定义字符集，必须写以防止乱码

标题标签 <h1>一级标题</h1> <h6>六级标题</h6>
- 语义：作标题使用，1~6 重要性递减
- 字体加粗、独占一行
段落标签 <p>段落</p>
- 语义：分割段落
- 段落内文本根据窗口大小自动换行、段落间有一定间距
换行标签 <br />
- 语义：强制换行
- 单标签、换行后行间没有额外间距
水平线标签 <hr />
- 语义：水平线
文本格式化标签推荐使用前一种
标签语义
<strong></strong> <b></b> 加粗
<em></em> <i></i> 倾斜
<del></del> <s></s> 删除线
<ins></ins> <u></u> 下划线
- 语义：突出显示
盒子标签
标签说明
<div></div> 独占一行、大盒子
<span></span> 非独占一行、小盒子
- 容器标签，没有语义

标签	语义
`<strong></strong>` `<b></b>`	加粗
`<em></em>` `<i></i>`	倾斜
`<del></del>` `<s></s>`	删除线
`<ins></ins>` `<u></u>`	下划线

标签	说明
`<div></div>`	独占一行、大盒子
`<span></span>`	非独占一行、小盒子

图像标签 <img src="" />

语义：显示图像

属性：

属性	属性值	说明
src	图像路径	必须属性
alt	文本	图像无法显示时的替换文本
title	文本	鼠标悬停时的提示文本
width	像素	图像宽度
height	像素	图像高度
border	像素	边框粗细（不推荐使用）

src 必须属性，指定图像路径和文件名
width/height 只修改一个，另一个默认等比例缩放

路径：相对路径、绝对路径
- 相对路径：相对于 HTML 文件的位置
  分类符号
  同一级
  下一级 /
  上一级 ../
- 绝对路径：本地路径、网络路径（网址）

分类	符号
同一级
下一级	`/`
上一级	`../`

超链接标签 <a href="" target=""></a>

语义：定义超链接
属性：
属性作用
href 指定目标 url 地址、打开指定文件、必须属性
target 目标页面打开方式 _self 默认当前页面打开 _blank 新标签页打开

属性	作用
href	指定目标 url 地址、打开指定文件、必须属性
target	目标页面打开方式 `_self` 默认当前页面打开 `_blank` 新标签页打开

链接分类

类型	说明	示例
外部链接	外部网站链接	`href="https://www.baidu.com"`
内部链接	网站内部其他网页链接	`href="index.html"`
空链接	未确定的链接目标	`href="#"`
下载链接	下载文件	`href="img.zip"`
网页元素链接	给各种网页元素添加超链接	`<a href=""><img src="" /></a>`
锚点链接	快速定位到当前页面的某一位置	`<a href="#标签 id"></a>` `<h1 id="标签 id"></h1>`

注释标签 
- 语义：注释
特殊字符
特殊字符代码
空格  
< <
> >

特殊字符	代码
空格	` `
<	`<`
>	`>`

表格标签

<table>
  <thead>
    <tr>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

标签	说明
`<table></table>`	定义表格
`<thead></thead>`	在 table 标签内、定义表格头部
`<tbody></tbody>`	在 table 标签内、定义表格主体
`<tr></tr>`	在 table 标签内、定义行
`<td></td>`	在 tr 标签内、定义单元格
`<th></th>`	在 tr 标签内，定义表头单元格、文字加粗居中

语义：绘制表格，展示数据

table 标签属性

属性	属性值	说明
align	left center right	表格相对周围元素的对齐方式
border	1 0	是否有边框
cellpadding	像素	单元格边缘与内容的距离、默认 1
cellspacing	像素	单元格之间的距离、默认 2
width	像素	表格宽度
height	像素	表格高度

合并单元格
- 合并方式属性：跨行 rowspan="合并格数" 跨列 colspan="合并格数"
- 目标单元格：左上
- 步骤：确定合并方式、在目标单元格添加合并属性、删除多余单元格

列表标签
- 语义：页面布局
- 分类：无序列表、有序列表、自定义列表
- 无序列表
```
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>
```
  - 各项并列，没有顺序
  - <ul></ul> 子元素只能为 <li></li> 不可为其他标签或文字
  - <li></li> 可容纳所有元素
- 有序列表
```
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>
```
  - <ol></ol> 子元素只能为 <li></li> 不可为其他标签或文字
  - <li></li> 可容纳所有元素
- 自定义列表
```
<dl>
  <dt>名词</dt>
  <dd>解释1</dd>
  <dd>解释2</dd>
  <dd>解释3</dd>
</dl>
```
  - 语义：名词解释说明
  - <dl></dl> 子元素只能为 <dt></dt> <dd></dd> 不可为其他标签或文字
  - <dt></dt> <dd></dd> 个数无限制

表单标签

语义：收集信息
组成：表单域、表单控件/元素、提示信息
表单域 <form action="" method="" name=""></form>
- 语义：向服务器提交范围内的表单元素信息
- 属性：
  属性属性值说明
  action url地址目标服务器的地址
  method get post 定义提交方式
  name 文本命名表单

属性	属性值	说明
action	url地址	目标服务器的地址
method	get post	定义提交方式
name	文本	命名表单

表单控件

输入标签 <input type="" />

语义：交互控件，收集信息

属性：

属性	属性值	说明
type	类型名	定义控件类型
name	文本	用于区分控件、同组单复选相同
value	文本	定义控件文本初始值、单复选时表示传给后台的值
checked	checked	规定默认选中
maxlength	正整数	规定最多输入字符个数、不常用

type 属性值

属性值	说明
text	输入单行文本
password	文本字符被掩码
radio	单选按钮
checkbox	复选框
submit	提交表单
reset	初始化表单
button	搭配 JS 使用
file	上传文件
hidden	隐藏输入字段
image	图片形式的提交按钮

标注标签 <label for=""></label>
- 语义：扩大控件触发范围
- for 通过 id 绑定表单控件，点击 label 标签内的文本时触发目标控件
下拉标签
```
<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
</select>
```
- 语义：多选一、不占用过多空间
- option 标签属性 selected=“selected” 规定默认选中项
文本域标签 <textarea></textarea>
- 语义：输入多行信息
- 可通过 rows cols 改变显示行列数，从而改变大小，不常用