html基础知识总结
[toc]
1.网页的组成部分
- 文本内容，我们在网页中看到的文字
- 文件的引用，例如：音频，视频，图片等
- 标签，是用来描述图片，音频，视频的
2.html的设计思想
- html：超文本标记语言
- 超文本：带有超链接的文本内容
- 标记：html中的标签
- 语言：任何文本编辑器都可书写html
3.html页面的基本结构
3.1网页的基本结构
<!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> <div>我在第一个html</div> </body></html>
3.2网页结构分析
- 网页由两部分组成
1.网页头部，包裹在<head>标签内
2.网页主体部分，包裹在<body>标签内 - 整个网页包裹在<html>标签内
- 网页头部代码分析
| 代码 |
解析 |
<!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> |
页面主体内容,允许或希望用户的内容都应该写到这里,用户也只对这里的内容感兴趣 |
<div>我的第一个网页</div> |
浏览器只显示内容，并不显示标签 |
<!-- 注释内容 -> |
用来描述网页，主要是给自己或者同事看的 |
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. 层级关系
- 元素可以包含子元素，子元素还可以包含下级子元素
- 元素包含时，必须要正确的嵌套，不能交叉嵌套
- 详见如下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> <table width="400" border="0" align="center" style="font-size: large;color:green;" > <form action="" method="POST"> <tr> <td colspan="2" align="center"> <div>登录界面</div> </td> </tr> <tr> <td> <div align="right">用户名：</div> </td> <td align="left"> <input type="text" name="username" required /> </td> </tr> <tr> <td> <div align="right">密码：</div> </td> <td align="left"> <input type="password" name="password" required /> </td> </tr> <tr> <td align="center" colspan="2"> <input type="submit" id="subbtn" /> <input type="reset" id="resbtn" /> </td> </tr> </form> </table> </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 语法
- URL: 统一资源定位符, 互联网上任何一个文件都有一个唯一的 URL
- 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 元素的默认样式
- 相同的标签不同的浏览器会有不同的默认样式，为了让我们的网页无论在哪个浏览器下观看效果都一样，需要添加自定义样式，自定义样式的优先级高于默认样式
11.课后总结
- 主要了解html的文件结构，包括头部和主体
- 了解标签，标签的属性和值，有单标签和双标签，双标签必须成对出再，属性和属性值写在开始标签内
- 了解html中的转义字符
- 了解URL,网络中任何一个网页都有自己独立的URL地址
