Community Learn Tools Library Leisure

English

Home > List of blog posts > HTML基础知识

Blogger Information

Blog 5

fans 0

comment 0

visits 4754

Special Recommendation

More>

Related recommendations

html 基础

1. 网页的组成

HTML页面的三部分

序号	内容	描述
1	文本内容	用户可见的内容，如新闻，电话…
2	其他资源的引用	图片、视频、音频…
3	标记	对文本，其他资源的描述

HTML页面基本语句

<p>我是PHP中文网的学员</p>
<img src="logo.png" alt="log" />

2. html 设计思想

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：统一资源定位符，互联网上的任何一个文件/资源必须要有一个唯一的访问地址
URL：http://模式//主机名/路径/文件名（https://www.php.cn/live/1088.html）
- http/https：协议，模式
- www.php.cn：域名/主机名
- live/1088.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 元素的默认样式

为什么同样的内容,添加不同的标签,在浏览器中呈现出不同的显示效果呢?
原因是浏览器为这么元素预定了一张样式表,即每个元素都有默认样式
不幸的是, 不同浏览器厂商之间因为商业利益或竞争关系,这些元素在不同浏览器表现并不完全相同
所以,我们需要使用自定义的样式表,来重置元素的样式,让它们在所有浏览器中看上去是完全一样的
用户自定义的样式规则, 优先级要高于默认样式, 这是应该的,也是合理的

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：总结写得不错

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

前段基础（PHP开发环境与工具）

2020-04-02 02:21:13