html 基础
1. 网页的组成
| 序号 |
内容 |
描述 |
| 1 |
文本内容 |
用户可见的内容，如新闻，电话… |
| 2 |
其他资源的引用 |
图片、视频、音频… |
| 3 |
标记 |
对文本，其他资源的描述 |
2. html 设计思想
| 术语 |
描述 |
| 超文本 |
是指包括拉超链接的文本 |
| 预定义标记 |
是用来描述内容的固定标签 |
| 语言 |
html 并不是编程语言，只是用来书写 html 文档的工具 |
3. html 页面结构
<!DOCTYPE html><!-- 通知浏览器，我是一个html5文档 --><html lang="en"> <!-- html:根标签/根元素 --> <head> <!-- head中的内容，用户不感兴趣，或者不需要用户看到，给浏览器/开发者 --> <!-- 元数据：描述某种特定信息的数据 --> <!-- 当前字符集是utf-8 --> <meta charset="UTF-8" /> <!-- viewport：视口/可视区屏幕 --> <!-- device-width:与屏幕等宽 --> <!-- initial-scale:页面缩放比例 --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>当前页面的标题</title> </head> <body> <!-- 这是用户真正看到的内容 --> <h2>php中文网欢迎大家...</h2> </body></html>
4. 元素，属性和值
4.1 元素与标签
| 元素 |
标签 |
描述 |
| 非空元素 |
双标签 |
<p>学习让我很快乐</p> |
| 空元素 |
单标签 |
<img src="1.jpg" alt=""> |
空元素也有使用双标签描述的,比如:
<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. 层级关系
- 元素中允许包含另一个元素,被包含的元素叫做子元素, 子元素又可以继承包含其它元素,依此类推
- 元素层级结构中, 必须保持正确的嵌套关系
- 详见代码如下：
<!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> <button>提交</button> </div> </form> </body></html>
6. 网页中的实体字符
- 多个空格,制表符,回车符,换行符,都会被压缩为一个空格
<,>,&等字符具有特殊意义,需要转义后才允许添加到 html 文档- 转义字符语法:
& + 字符实体名称 + ;, 如<,使用: <表示 Unicode极大的缓解了特殊字符的问题,推荐将文档编码设置为utf-8- 只需要在
<head> <mata charset="UTF-8"> </head> - 常用转义字符表
| 序号 |
字符 |
描述 |
转义字符 |
实体编号 |
| 1 |
' ' |
空格 |
nbsp; |
  |
| 2 |
< |
小于 |
< |
< |
| 3 |
> |
大于 |
> |
> |
| 4 |
& |
&符号 |
& |
& |
| 5 |
" |
双引号 |
" |
" |
| 6 |
© |
版权 |
© |
© |
| 7 |
® |
已注册商标 |
® |
® |
| 8 |
× |
乘号 |
× |
× |
| 9 |
÷ |
除号 |
÷ |
÷ |
7. 文件与文件夹
- 全部使用小写字母:
php11/demo1.html - 采用合适的扩展名:
.html, 不要用.htm - 坚持使用连接线
-,而不是下划线_分隔多个单词
8. URL
8.1 语法
如果 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 元素的默认样式
- 为什么同样的内容,添加不同的标签,在浏览器中呈现出不同的显示效果呢?
- 原因是浏览器为这么元素预定了一张样式表,即每个元素都有默认样式
- 不幸的是, 不同浏览器厂商之间因为商业利益或竞争关系,这些元素在不同浏览器表现并不完全相同
- 所以,我们需要使用自定义的样式表,来重置元素的样式,让它们在所有浏览器中看上去是完全一样的
- 用户自定义的样式规则, 优先级要高于默认样式, 这是应该的,也是合理的
