多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
# html 基础知识 [toc] ## 1. 网页的组成部分 | 序号 | 内容 | 描述 | | ---- | ------------------ | ------------------------------------- | | 1 | **文本内容** | 用户看到的网页文本,例如新闻,电话等 | | 2 | **其它文件的引用** | 如图片,视频,音频,CSS 样式表,JS 脚本等 | | 3 | **标记** | 对文本以及引用文件的正确描述 | - 每个页面都是由这三部分组成的, 并且都是采用纯文本进行描述 - 意味着任何能编写纯文本的编辑器都可以用来创建 HTML 页面 - 现在主流 HTML 版本是 5.0,后面的教程默认就是 HTML5 版本 ## 2. html 设计思想 - html 文档中的一切,都是基于**标签**实现的 - 标签就类似于超市中玲琅满目的商品,你能通过一个标签快速识别并找到它们 - 页面中的每一块内容,如果想识别出来,同样也需要给他们贴上不同的标签 - html 是超文本标记语言(_下表描述并不精准,但力求简要易记_) | 术语 | 描述 | | ------ | ------------------------------------------ | | 超文本 | 是指包含有超链接的文本 | | 标记 | 就是用来描述内容的固定标签 | | 语言 | html 并不编程语言,只是书写 html 文档的工具 | --- ## 3. 基本的 html 页面 ### 3.1 html 结构源码 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HTML5页面结构</title> </head> <body> <!-- 页面主体内容 --> <h2>PHP中文网欢迎您...</h2> </body> </html> ``` ### 3.2 源码逐行分析 | 代码 | 解析 | | ---------------------------------------- | ----------------------------------------------------------------------------------- | | `<!DOCTYPE html>` | 通知浏览器这是一个 HTML5 文档,应始终写在第一行 | | `<html>...</html>` | 根标签,或叫根元素,整个 hmtl 文档内容都必须写到这对标签中 | | `<html lang="en">` | 通知搜索引擎 html 文档使用的编写语言,如果是中文建议改成`<html lang="zh-CN">` | | `<head>...</head>` | 供浏览器和搜索引擎使用,描述字符编码集,视口与页面标题,用户并不感兴趣 | | `<meta>` | 设置页面元素数据, 所谓元数据, 就是描述某种特定信息的数据 | | `<meta charset="UTF-8">` | 通知浏览器 html 文档编写语言所属的字符编码集,最流行的是`UTF-8`,已成行业标准 | | `<meta name="viewport" content="..." />` | 下面三行是对它的解读 | | `name="viewport"` | 设置视口(即可视区屏幕)如何显示这个页面, 例如是否允许缩放这个页面 | | `width=device-width` | 页面宽度应该与显示设备的宽度相匹配,类似还有`device-height` 表示设备的屏幕高度 | | `initial-scale=1.0` | 设置页面初始绽放比例,`1.0`表示原样 1:1 显示,不允许有任何绽放 | | `<title>` | 显示在浏览器标签上的文本, 指定当前页面的标题, 这个标签对 SEO 非常重要 | | `<body>...</body>` | 页面主体内容,允许或希望用户的内容都应该写到这里,用户也只对这里的内容感兴趣 | | `<!-- 注释内容 ->` | 注释用来描述标签功能或用途,它的内容不要出现在显示的网页中, 只会出现在 html 源代码中 | | `<h2>PHP中文网欢迎您...</h2>` | 浏览器渲染这个 html 文档时,最终只会呈现这个标题内容与效果,并不显示标签`<h2>` | > 编写 html 文档的标签字符不区分大小写, 但是推荐全部使用小写字母 --- ## 4. 元素,属性与值与其它 ### 4.1 元素 | 元素 | 标签 | 语法 | 描述 | | -------- | ------ | ------------------------------- | ------------------------------- | | 非空元素 | 双标签 | `<p>学习让我变得更强大</p>` | `<起始标签>元素内容</结束标签>` | | 空元素 | 单标签 | `<img src="..." alt="">|<link>` | `<标签>` | > 空元素也有使用双标签描述的,如`<script>|<video>|<br>...` ### 4.2 属性和值 #### 4.2.1 基本语法 - 属性: 必须写到元素的 "起始标签" 中,由属性名和属性值二部分组成 - 语法: `属性名="属性值"`,属性名推荐只使用小写字母,属性值推荐加上*双引号* - 案例: `<input type="password" maxlength="20" placeholder="至少8个字符" required>` | 序号 | 值类型 | 描述 | | ---- | -------- | ---------------------------------- | | 1 | 字符串 | `<p class="active">...</p>` | | 2 | 预定义值 | `<input type="text">` | | 3 | 指定格式 | `<a href="https://php.cn">...</a>` | | 4 | 数值 | `<table width="200">...</table>` | | 5 | 布尔值 | `<input type="email" required>` | > 布尔属性的值是可选的, 只要元素中出现该属性,表示它取**真**值 #### 4.2.2 三大通用属性 | 序号 | 属性名 | 描述 | 举例 | | ---- | ------- | ---------------- | ------------------------------------ | | 1 | `id` | 元素的唯一标识 | `<div id="wrap">...</div>` | | 2 | `class` | 给元素添加类样式 | `<div class="box">...</div>` | | 3 | `style` | 设置当前元素样式 | `<div style="...">...</div>` | > 这几个属性,几乎可以添加到任何元素上 --- ## 5. 层级关系 - 元素中允许包含另一个元素,被包含的元素叫做子元素, 子元素又可以继承包含其它元素,依此类推 - 元素层级结构中, 必须保持正确的嵌套关系 - 详见: `demo2.html` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>元素的标签,属性和值,正确的嵌套关系</title> </head> <body> <!-- 元素之间应该保持正确的嵌套 --> <form action=""> <div> <label for="email">邮箱:</label> <!-- 元素值: 预定义值, 指定值, 布尔值,数值 --> <input type="email" name="email" id="email" maxlength="100" required> </div> <div> <label for="password">密码:</label> <inpu type="password" name="password" id="papassword" placeholder="至少8位" required> </div> <div> <button>提交</button> </div> </form> </body> </html> ``` --- ## 6. 网页中的文本字符 - 多个空格,制表符,回车符,换行符,都会被压缩为一个空格 - `<`,`>`,`&`等字符具有特殊意义,需要转义后才允许添加到 html 文档 - 转义字符语法: `& + 字符实体名称 + ;`, 如`<`,使用: `&lt;`表示 - `Unicode`极大的缓解了特殊字符的问题,推荐将文档编码设置为`utf-8` - 只需要在`<head> <mata charset="UTF-8"> </head>` - 常用转义字符表 | 序号 | 字符 | 描述 | 转义字符 | 实体编号 | | ---- | ----- | ---------- | ---------- | -------- | | 1 | `' '` | 空格 | `nbsp;` | `&#160;` | | 2 | `<` | 小于 | `&lt;` | `&#60;` | | 3 | `>` | 大于 | `&gt;` | `&#62;` | | 4 | `&` | `&符号` | `&amp;` | `&#38;` | | 5 | `"` | 双引号 | `&quot;` | `&#34;` | | 6 | `©` | 版权 | `&copy;` | `&#169;` | | 7 | `®` | 已注册商标 | `&reg;` | `&#174;` | | 8 | `×` | 乘号 | `&times;` | `&#215;` | | 9 | `÷` | 除号 | `&divide;` | `&#247;` | --- ## 7. 文件与文件夹名称 - 全部使用小写字母: `chapter1/demo1.html` - 采用合适的扩展名: `.html`, 不要用`.htm` - 坚持使用连接线`-`,而不是下划线`_`分隔多个单词 --- ## 8. URL ### 8.1 语法 - URL: 统一资源定位符, 互联网上任何一个文件都有一个唯一的 URL - URL 语法: `http://模式/主机名/路径/文件名` | 序号 | 名称 | 描述 | 举例 | | ---- | ------ | ----------------------------------- | --------------------------------------------- | | 1 | 模式 | 也称"协议",浏览器如何访问这个文件 | `http`,`https`,`ftp`,`mailto`... | | 2 | 主机名 | 使用"域名"或"IP"表示 | `https://www.php.cn/`,或者`http://127.0.0.1/` | | 3 | 路径 | 使用一个或多个正斜线分割的字符串 | `public/admin` | | 4 | 文件名 | 最后一个路径后面的,带有扩展名的文档 | `ablut.html` | > 如果 URL 是以路径分隔符`/`结尾, 则启用默认文件名,如`index.html` ### 8.2 绝对 URL | 序号 | 使用场景 | 举例 | | ---- | ------------------------ | -------------------------------- | | 1 | 被引用目标与当前位置无关 | `http://php.cn/courses/123.html` | | 2 | 引用其它服务器上的文件 | `https://www.php.net/manual/zh/` | ### 8.3 相对 URL - 当有人向你问路时,你肯定不会从国家/省/市/县/区开始,而是从他当前的位置给你指示 - 同样, 相对 URL 是以包含 URL 本身的文件位置为参考点,描述目标文件的位置 | 序号 | 使用场景 | 举例 | | ---- | ------------------ | -------------------------------------------------------------------------------------- | | 1 | 引用同一目录下文件 | 直接写文件名,如`demo2.html` | | 2 | 引用子目录下文件 | 目标文件前带上子目录名,使用目录分隔符`/`连接,如`chapter2/demo2.html` | | 3 | 引用上层目录的文件 | 文件名前添加二个点,同样使用目录分隔符`/`连接,允许逐级向上查询,如`../../demo2.html` | | 4 | 根路径`/` | 为防止过多层级的向上递归查询,可以从当前服务器根目录开始查询,如`/admin/books/chapter2/` | > 访问同一个网站的文件,应该始终坚持使用*相对 URL 地址* --- ## 9. html 标签的语义化的优势 | 序号 | 优点 | 描述 | | ---- | ---------- | --------------------------------------------------------------- | | 1 | 更直观 | 对于一篇文章`<article>`标签,显然要比使用`<div class="article">` | | 2 | SEO 优化 | 搜索引擎更加喜欢你的网页,有利于 SEO, 得升关键词优化与排名 | | 3 | 代码更少 | 提高加载速度,也方便代码维护与样式控制 | | 4 | 无障碍支持 | 例如视力受损使用的屏幕阅读器, 语义化就非常重要了 | --- ## 10. html 元素的默认样式 - 为什么同样的内容,添加不同的标签,在浏览器中呈现出不同的显示效果呢? - 原因是浏览器为这么元素预定了一张样式表,即每个元素都有默认样式 - 不幸的是, 不同浏览器厂商之间因为商业利益或竞争关系,这些元素在不同浏览器表现并不完全相同 - 所以,我们需要使用自定义的样式表,来重置元素的样式,让它们在所有浏览器中看上去是完全一样的 - 用户自定义的样式规则, 优先级要高于默认样式, 这是应该的,也是合理的