微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > HTML基础知识学习笔记（第一课）

博主信息

博文 36

粉丝 0

访问量 36607

专题推荐

更多>

HTML基础知识

HTML基础知识
学习心得体会
手写代码注释

1、HTML页面的组成

1.1 文本

页面所展现的文字性的内容

1.2 其他文件的引用

如图片,视频,音频,CSS 样式表,JS 脚本等

1.3 标记

对文本以及引用文件的正确描述

2、HTML设计思想

html 文档中的一切,都是基于标签实现的
标签用于对文档中的内容进行分类的
标签就类似于超市中玲琅满目的商品,你能通过一个标签快速识别并找到它们
页面中的每一块内容,如果想识别出来,同样也需要给他们贴上不同的标签
html 是超文本标记语言(下表描述并不精准,但力求简要易记)

术语	描述
超文本	是指包含有超链接的文本
标记	就是用来描述内容的固定标签
语言	html 并不编程语言,只是书写 html 文档的工具

3、基本的 html 页面

3.1 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

<!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>
        <input
          type="password"
          name="password"
          id="papassword"
          placeholder="至少8位"
          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、文件与文件夹名称

全部使用小写字母: chapter1/demo1.html
采用合适的扩展名: .html, 不要用.htm
坚持使用连接线-,而不是下划线_分隔多个单词

8、 URL

8.1 语法

1、URL: 统一资源定位符, 互联网上任何一个文件都有一个唯一的 URL
2、URL由三部分组成：资源类型、存放资源的主机域名、资源文件名。
3、也可认为由4部分组成：协议、主机、端口、路径
4、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 元素的默认样式

html的默认样式：浏览器事先定义好的，不用设置就展现的样子。
不同浏览器厂商之间因为商业利益或竞争关系,这些元素在不同浏览器表现并不完全相同
所以,我们需要使用自定义的样式表,来重置元素的样式,让它们在所有浏览器中看上去是完全一样的
用户自定义的样式规则, 优先级要高于默认样式, 这是应该的,也是合理的

学习心得体会

4月2日晚上的课程学习了HTML的基础知识包括：页面的组成部分，HTML的设计思想，基本的HTML页面，元素、属性和值相关知识，层级关系，网页中的文本字符，文件与文件夹名称，URL,HTML标签的语义化的优势，HTML元素的默认样式。通过这些内容的学习使我对HTML的知识有了全面的认识，并且对部分知识有深层次的理解。