html 基础知识
1.网页的组成
- 任何一个页面都有三部分：
| 序号 | 内容 | 说明 |
|---|---|---|
| 1 | 文本内容 | 用户所看到的文字信息 |
| 2 | 资源文件 | 网页内使用的图片、视频、音频等资源文件等 |
| 3 | 标记（标签） | 对文本及引用文件的描述 |
- 示例：
<!--文本内容：123标记：<p></p>资源文件：logo.png--><p>123</p><img src="logo.png" alt="logo" />
2.html 设计思想
- 超文本：是指包括了超链接的文本
- 预定义标记：是用来描述内容的固定标签
- 语音：html 不是编程语言，只是用来书写 html 文档的工具
3.html 页面结构
html 基本页面源码
<!DOCTYPE html><!-- 通知浏览器，我是一个html5文档 --><html lang="en"><!-- html:根标签/根元素，lang='en' 默认语音为英文 --><head><!-- head中的内容，用户不感兴趣或者不需要用户看到，给浏览器/开发者看的 --><!-- 元数据：描述某种特定信息的数据 --><meta charset="UTF-8" /><!-- name:视图窗口，content：页面内容设置 --><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- 标签页顶部中的文本内容 --><title>php学习中...</title></head><!-- 页面主体内容 --><body><h1>我是文本内容</h1></body></html>
4.元素、属性和值
4.1 元素与标签
- 非空元素使用双标签，空元素使用单标签，如下表：
| 元素 | 标签 | 语法 | 描述 |
|---|---|---|---|
| 非空元素 | 双标签 | <a>我是一个标签</a> |
<起始标签>元素内容<结束标签/> |
| 空元素 | 单标签 | <img src='/../0402/hello.png'> |
<标签> |
空元素也有使用双标签的：如
<script></script>、<style></style>
4.2 属性和值
4.2.1 基本语法
属性：属性必须写到起始标签中，由属性名和属性值组成；
语法：
属性名="值"属性名使用小写，属性值用双引号" "包住；示例：
<inputtype=”email”width="80" placeholder="请输入邮箱" />值类型：
| 序号 | 类型 | 示例 |
|---|---|---|
| 1 | 字符串 | <p class="active"><p/> |
| 2 | 数值 | <input width="80"/> |
| 3 | 预定义值 | <input type="email" /> |
| 4 | 指定格式 | <img src='/../0402/hello.png'> |
| 5 | bool 值 | <buttonhidden></button> |
4.2.2 三大通用属性
| 序号 | 属性 | 描述 | 示例 |
|---|---|---|---|
| 1 | id |
元素的唯一标识 | <button id="submit"></button> |
| 2 | class |
给元素添加类样式 | <button class="redbtn"></button> |
| 3 | style |
设置当前这个元素的样式 | <button style="color: red;"></button> |
5.网页中的实体字符
- 空白的处理：空格，制表符，换行符等会被压缩为一个空格，需要使用转义符；
- 常用的转义符如下：
| 序号 | 字符 | 描述 | 转义字符 | 实体编号 |
|---|---|---|---|---|
| 1 | ' ' |
空格 | nbsp; |
|
| 2 | < |
小于 | < |
< |
| 3 | > |
大于 | > |
> |
| 4 | & |
&符号 |
& |
& |
| 5 | " |
双引号 | " |
" |
| 6 | © |
版权 | © |
© |
| 7 | ® |
已注册商标 | ® |
® |
| 8 | × |
乘号 | × |
× |
| 9 | ÷ |
除号 | ÷ |
÷ |
6.文件与文件夹
- 全部使用小写
html,htm- 文件名与定义变量不同坚持使用连接线
-,而不是下划线_分隔多个单词,
例如：hello-world.php
7.URL
URL：统一资源定位符，互联网上的任何一个文件/资源必须要有一股唯一的访问地址
例如:
https://www.php.cn/course/379.html- http/https:协议，模式
- www.php.cn:域名/主机名，
- /course/379.html：访问的资源在服务器上的真实路径
总结 URL 格式：http://模式/主机名/路径/文件名
7.1 绝对 URL 与相对 URL
| URL | 使用场景 | 示例 |
|---|---|---|
| 绝对 URL | 被引用目标与当前位置无关 | http://php.cn/courses/123.html |
| 引用其它服务器上的文件 | https://www.php.net/manual/zh/ |
|
| 相对 URL | 引用同一目录下文件 | 直接写文件名,如demo2.html |
| 引用子目录下文件 | 目标文件前带上子目录名,使用目录分隔符/连接,如chapter2/demo2.html |
|
| 引用上层目录的文件 | 文件名前添加二个点,同样使用目录分隔符/连接,允许逐级向上查询,如../../demo2.html |
|
根路径/ |
为防止过多层级的向上递归查询,可以从当前服务器根目录开始查询,如/admin/books/chapter2/ |
访问同一个网站的文件,应该始终坚持使用相对 URL 地址
8. html 标签的语义化的优势
| 序号 | 优点 | 描述 |
|---|---|---|
| 1 | 更直观 | 对于一篇文章<article>标签,显然要比使用<div class="article"> |
| 2 | SEO 优化 | 搜索引擎更加喜欢你的网页,有利于 SEO, 得升关键词优化与排名 |
| 3 | 代码更少 | 提高加载速度,也方便代码维护与样式控制 |
| 4 | 无障碍支持 | 例如视力受损使用的屏幕阅读器, 语义化就非常重要了 |
9. html 元素的默认样式
- 为什么同样的内容,添加不同的标签,在浏览器中呈现出不同的显示效果呢?
- 原因是浏览器为这么元素预定了一张样式表,即每个元素都有默认样式
- 不幸的是, 不同浏览器厂商之间因为商业利益或竞争关系,这些元素在不同浏览器表现并不完全相同
- 所以,我们需要使用自定义的样式表,来重置元素的样式,让它们在所有浏览器中看上去是完全一样的
- 用户自定义的样式规则, 优先级要高于默认样式, 这是应该的,也是合理的
