html 基础知识的学习
1.网页组成部分
| 序号 |
详细内容 |
描述 |
| 1 |
html的文本内容 |
用户看到的网页内容，如：新闻、广告、产品介绍说明等 |
| 2 |
其他文件的引用、插入 |
如：图片、视频、音频、css样式表等 |
| 3 |
html 的标记使用 |
主要是对文本及引用文件正确的描述说明 |
- 每个网页都是由这三部分组成的，并且都是采用纯文本进行描述
- 任何能编写纯文本的编辑器都可以用来创建html页面
- 现在主要使用的 html 的版本是5.0，教学用的也是HTML5版本
2.html 的设计思想
- html 文档中的所有一切都是通过有效的标签来实现的
- 标签就是类似身份证明，通过输入标签能快速找到、或者识别到标签
- html 是超文本标记语言
| 序号 |
术语 |
描述 |
| 1 |
超文本 |
指包含有超链接的文本 |
| 2 |
标记 |
用来描述内容的固定标签 |
| 3 |
语言 |
html 并不是编程语言，只是书写 html 文档的工具 |
## 3. 基本的 html 页面 ### 3.1 html de 结构及源代码 ```html<!DOCTYPE html><html lang="en"> <head> <meat charset="UTF-8" /> <meat name="viewport" content="width=device-width,initial-scale=1.0" /> <title>HTML5网页结构学习</title> </head> <body> <h2>纳职欢迎您...</h2> </body></html>
3.2 源代码的解释说明（代表什么，传递什么信息）
| 序号 |
源代码 |
解析说明 |
| 1 |
<!DOCTYPE html> |
通知浏览器这是一个 html5 文档，源代码始终放在第一行 |
| 2 |
<html>...</html> |
这是根标签，也叫根元素， html 的整个文档内容都必须写在标签内 |
| 3 |
<head>...</heaf> |
视口与页面标题，供浏览器或搜索引擎使用，用户并不感兴趣 |
| 4 |
<html lang="en" |
通知搜索引擎 html 文档使用的编程语言，也可以换成中文的<html lang="zh-cn"> |
| 5 |
<meat> |
这是元数据,描述某种特定信息的数据 |
| 6 |
<meat charset="UTF-8" /> |
文档编写语言所属的字符集，现流行UTF-8，已成行业标准 |
| 7 |
name="viewprt" |
视口设置，如何显示页面，例如是否允许缩放页面等 |
| 8 |
width=device-width |
页面的宽度与显示器的宽度相匹配，类似的device-height表示的是高度 |
| 9 |
initial-scale=1.0 |
设置页面初始的比列，1.0表示原样1:1 |
| 10 |
<title> |
显示当前文本页面的标题，这个标签对 SEO 非常重要 |
| 11 |
<body>...</body> |
页面的主体内容，用户看到的，感兴趣的内容都应该编写在里面 |
| 12 |
<!--注释内容-> |
用来描述标签的功能或用途，只会出现在 HTML 源代码中，不会显示在网页页面中 |
| 13 |
<h2><h2>纳职欢迎您...</h2> |
最终呈现的标题内容或效果，但是标签<h2>并不会显示 |
编写的 HTML 文档的标签字符不区分大小写字母，为了显示效果，最好是全部使用小写字母|
4. 元素，属性与值
4.1 元素
| 元素的分类 |
标签性质 |
表达语法 |
描述 |
| 非空元素 |
是双标签，即有开始标签，就要用结束标签 |
例如<p>我爱学习</p> |
<起始标签>元素内容</结束标签> |
| 空元素 |
单标签 |
例如 <img src="..." alt="">,<link> |
<标签> |
空标签也有特殊的，要使用双标签的，例如`<script>/<video><br>….等
4.2 基本语法
- 属性：由属性名和属性值组成，必须写到元素的“起始标签中”
- 语法：
属性名=属性值，属性名使用小写字母，属性值要加上双引号：“ ” - 案例：
<input type="password" maxlength="20" placeholder="至少8个字符" required>
| 序号 |
值类型 |
描述说明 |
| 1 |
字符串 |
<p class="active">...</p> |
| 2 |
预定义值 |
<input type="text"> |
| 3 |
指定格式 |
<a href="https"//www.nazhi.com">...</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> <meat charst="UTF-8" > <meat name="viewport" content="width=denice-width,initial-scale=1.0" /></meat> <title>元素的标签、属性和值的正确嵌套关系</title> </head> <body> <!-- 元素之间应该保持正确的嵌套关系 --> <form action=""> <div> <label for="email">邮箱：</label> <!-- 元素值：预定义值，指定值，布尔值，数值 --> <input type="email" name="email" id="emali" maxlength="100" required /> </div> <div> <label for="password">密码：</label> <input type="password" name="password" id="password" placeholder="至少8位" required /> </div> <div> <button>提交 </button> </div> </form> </body></html>
6. 网页中的文本字符
- 多个空格、制表符、回车符、换行符都会被压缩为一个空格
<，>,&等特殊字符，需要转义后才可以添加到 html 文档- 转义字符语法：
& + 字符实体名称 + ；, 如<,使用；<表示 unicode极大的缓解了特殊字符的问题，将文档编码设置为utf-8
7.文件与文件夹的名称
- 全部使用小写字母：
chapter1/demo1.html - 采用合适的扩展名：
.html,不能用.htm - 坚持使用连接线“-”，而不是下划线
_分隔多个单词
8. URL
8.1 语法
- URL: 统一资源定位符，互联网上任何一个文件都有唯一一个 URL
- URL 语法：
http/https://模式/主机名或域名/文件路径/文件名
| 序号 |
名称 |
描述 |
案例 |
| 1 |
模式 |
也称“协议”，是浏览器如何访问文件 |
如 http,https,ftp,mailto… |
| 2 |
主机名 |
也称“域名”或者“IP” |
如 https://www.nahzi.com/或者http://127.0.0.1/ |
| 3 |
文件路径 |
使用一个或者多个正斜线分割字符串 |
如 public/admin |
| 4 |
文件名 |
最后一个路径后面，带有扩展名的文件 |
如 index.html |
8.2 绝对 URL
唯一的 URL
8.3 相对 URL
大部分情况下使用在本机电脑的文件查找等
9. html 标签的语义化优势
| 序号 |
优点 |
描述 |
| 1 |
更直观 |
如 <div class="artcle">可以直接用<srticle>`标签 |
| 2 |
SEO 优化 |
有利于 SEO 优化，提升关键字优化与网站排名 |
| 3 |
代码少 |
提高加载速度，方便维护与样式控制 |
| 4 |
无障碍支持 |
如视力受损等情况 |
10. html 元素的默认样式
- 浏览器为元素预定了一张样式表，每个元素都有默认样式，由于浏览器厂商的不同，元素在不同的浏览器表现并不完全相同
- 因此，我们可以重置元素的样式，使用自定义的样式表，让元素在所有的浏览器中看上去却是完全一样的
- 用户自定义的样式规则，优先级别要高于默认样式。
总结
1.通过今天的对 html 基础知识的学习，让我清楚的知道了网页的组成部分、文本下的专业术语及表现形式。
2.了解 html 代码的表现意思，及代码的页面结构，掌握编写源代码细节性、统一性的问题
3.通过对源代码的了解，知道源代码在文本中的关键性作用及用途，以及文本中的层级关系。
4.掌握记住了一些以后经常用到的元素及属性，属性值。
5.知道了平时在进入网站前输入的域名，代表什么
