HTML 基础知识

最新推荐文章于 2023-12-25 15:10:24 发布

流动的时间里找你的旋律

最新推荐文章于 2023-12-25 15:10:24 发布

阅读量393

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/qq_52590569/article/details/120043024

版权

HTML 基础知识

学习日志 2135周

HTML 网页结构

基础
 元素
 属性
 格式化标签
 使用样式表
 内联元素与块元素
 链接
 图像
 表格
 列表
 内联框架
 头部
 HTML5布局
 计算机代码元素
 实体、符号、表情符号
 URL
音频、视频
 待了解

基础

标题 h1到h6 等（一般就用h1-h3)
段落p标签
链接a标签
图像img标签
注释
字符编码，字符集charset，编码解码
- 乱码: 编码与解码字符集不同
- ASCII（美）
- GBK，GB2312（中国）
- ISO88591（欧）
- UTF-8（万国码，所有语言）
基本结构
- doctype 文档声明
- html根标签
- lang 设置语言
- meta 设置网页元数据属性：
  - name 值 keywords，description（content的值会显示在搜索结果的超链接中）
  - content 值可多个，逗号隔开
  - charset
  - http-eqiuv = “refresh” content = “3; url=地址” 用于重定向, 3表示3秒后
- title标签，不显示，用于搜索引擎搜索判断网页内容
- body标签主体所有可见内容
实体
- 多个空格默认解析为一个
- & nbsp ; (空格)
- & gt ; (大于符号)
- & lt ; （小于符号）
- & copy ；（版权符号©）
br/ 用于换行
hr/ 创建水平线
class，id
文档的首行声明文档类型
请使用小写元素名，使用小写属性名，属性值加引号
关闭所有 HTML 元素；关闭空的 HTML 元素；</>
请始终对图像使用 alt 属性。当图像无法显示时该属性很重要
请始终定义图像尺寸。这样做会减少闪烁，因为浏览器会在图像加载之前为图像预留空间。
等号两边的空格是合法，精简空格易读
避免长代码行
请勿毫无理由地增加空行
为了提高可读性，请增加空行来分隔大型或逻辑代码块。
为了提高可读性，请增加两个空格的缩进。请勿使用 TAB
不推荐省略 html 和 body 标签
短注释应该在单行中书写，并在 之前增加一个空格
长注释，跨越多行，应该通过在独立的行中书写
请使用简单的语法来链接样式表（type 属性不是必需的）
请使用简单的语法来加载外部脚本（type 属性不是必需的）
短规则可以压缩为一行，长规则应该分为多行
开括号与选择器位于同一行
在开括号之前用一个空格
使用两个字符的缩进
在每个属性与其值之间使用冒号加一个空格
在每个逗号或分号之后使用空格；在逗号或分号之后添加空格，是所有书写类型的通用规则
在每个属性值对（包括最后一个）之后使用分号
只在值包含空格时使用引号来包围值
把闭括号放在新的一行，之前不用空格
避免每行超过 80 个字符
使用小写文件名

元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码
元素的内容是开始标签与结束标签之间的内容
空元素在开始标签中进行关闭（以开始标签的结束而结束，自结束标签）
大多数 HTML 元素可拥有属性

属性

属性总是以名称/值对的形式出现，比如：name=“value”
值可以用单引号引用，如果属性值本身就含有双引号，必须使用单引号
属性总是在 HTML 元素的开始标签或自结束标签中规定
有些属性没有值
属性和属性值对大小写不敏感，建议小写
常用属性：class， id， style，title（style中为css的语法）

格式化（关注语义）

文本格式化标签
- em（着重文字），strong（加重语气），sub，sup，ins（插入，文本有下划线），del（文本中间划线）
“计算机输出”标签
- code， kbd，samp，var，pre（可保留空格换行，用来表示计算机的源代码）
引用、引用和术语定义
- abbr（缩写），acronym（首字母缩写），address（文档作者或拥有者的联系信息），bdo（文字方向），blockquote（长的引用），q（短的引用语），cite（引用、引证义著作的标题），dfn （一个定义项目或缩写的定义，可结合abbr 标签，对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息）
关注语义

em 把文本定义为强调的内容。
strong 把文本定义为语气更强的强调的内容。
dfn 定义一个定义项目。
code 定义计算机代码文本。
samp 定义样本文本。
kbd 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
var 定义变量。您可以将此标签与 pre 及 code 标签配合使用。
cite 定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

使用样式表

内联样式：特殊的样式需要应用到个别元素（对一个有效）style标签
内部样式表：单个文件需要特别样式，可以在 head 部分通过 style 标签定义内部样式表
外部样式表：样式需要被应用到很多页面，用link标签引入
- link rel=“stylesheet” type=“text/css” href=“地址”
- rel：规定当前文档与被链接文档之间的关系
- type：规定被链接文档的类型

内联元素与块元素

内联元素（包裹文字），块元素（网页布局）
一般不在内联元素中放块元素，块元素中可以放内联元素
p 标签块元素不能在其中放任何块元素
常用内联元素：span；常用块元素：div
结构化语义标签（块元素）
- h1-h6, hgroup（标题分组）,
- main（网页主体，只有一个）, footer（底部）, nav（导航）, aside（侧边框）, article, section（类似div）
div：定义文档中的分区或节（division/section）。
span：用来组合文档中的行内元素。

链接

a标签（锚）行内元素
herf属性跳转地址可以是外部网址，也可以是内部网址
- 相对路径：./（或者不写，表示当前所在目录）或…/（回到当前目录的上一级）
- 路径最后记得再加上’/’（这样写a/b/)，否则(这样写a/b）就会向服务器产生两次 HTTP 请求这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求(a/b/)
- herf = "#"转到当前页面顶部
- herf = “#id或者是name”, 这里id或者name是id或者name属性对应的值，页面跳转到指定位置
target属性指定超链接打开位置
- target = "_blank"在新窗口打开文档
- target = “_self” 默认
name属性（或用id属性，id唯一，区分标签，以字母开头）
假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端

图像

img
scr 属性
map 属性
area 属性
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。描述用于搜索；无法显示图像，将显示 “alt” 属性中的文本
align 设置位置；width/height只改一个，等比例缩放

表格

table

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr>标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
表格的表头

表格的表头使用<th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：
表格中的空单元格
在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。
<caption>定义表格标题。
<th>定义表格的表头。内联元素
<tr> 定义表格的行。块元素
<td> 定义表格单元。内联元素
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。

列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。
有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以<dl> 标签开始。<dt> 定义定义项目。
<dd> 定义定义的描述。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等

内联框架

ifame
src；height；width；frameborder（0或1）；name
iframe 可用作链接（a标签）的目标（target）。

链接的 target 属性必须引用 iframe 的 name 属性

头部

title、base、link（比如css）、meta（见上）、script（JavaScript）、style（css）
title 元素能够：
- 定义浏览器工具栏中的标题
- 提供页面被添加到收藏夹时显示的标题
- 显示在搜索引擎结果中的页面标题
base：标签为页面上的所有链接规定默认地址或默认目标（target）
link：标签定义文档与外部资源之间的关系。rel（关系属性，值例如stylesheet），type，href

HTML5布局（上面块元素）

header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题

计算机代码元素

<code> 定义计算机代码文本，<code> 元素不保留多余的空格和折行，如需解决该问题，您必须在 <pre> 元素中包围代码，pre：定义预格式化文本
<kbd> 定义键盘文本，<samp> 定义计算机代码示例，<var> 定义变量

实体、符号、表情符号

请前往w3school查询

URL (Uniform Resource Locator)统一资源定位符

scheme://host.domain:port/path/filename

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
scheme
- http 超文本传输协议以 http:// 开头的普通网页。不加密。
- https 安全超文本传输协议安全网页。加密所有信息交换。
- ftp 文件传输协议用于将文件下载或上传至网站。
- file 您计算机上的文件.
URL 只能使用 ASCII 字符集来通过因特网进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码
- 使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。
- URL 不能包含空格。URL 编码通常使用 + 来替换空格。