html5文档结构和属性
1.网页的组成部分
-文本 :用户看到的网页文本,例如新闻,电话等
-引用的内容 :如图片,视频,音频,CSS 样式表,JS 脚本等
-标记 :将普通文本、图片、音乐等静态动态信息通过指定的一些标签显示在页面上。
2. html 设计思想
1 超文本: 是指包含有超链接的文本
2 标记: 就是用来描述内容的固定标签
3 语言 : html 并不编程语言,只是书写 html 文档的工具
3. html页面的基本结构
3.1html的页面基本结构
<!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><!-- 页面主体内容 --><h1>html5文档结构和属性</h1></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> |
页面主体内容,允许或希望用户的内容都应该写到这里,用户也只对这里的内容感兴趣 |
<!-- 注释内容 -> |
注释用来描述标签功能或用途,它的内容不要出现在显示的网页中, 只会出现在 html 源代码中 |
<h2>PHP中文网欢迎您...</h2> |
浏览器渲染这个 html 文档时,最终只会呈现这个标题内容与效果,并不显示标签<h2> |
-html 文档分为两个主要部分: head 和 body。
-herd：给浏览器和开发者看到的。
-body：给用看的。
4 元素,属性与值与其它
4.1 元素
| 元素 | 标签 | 语法 | 描述 |
|---|---|---|---|
| 非空元素 | 双标签 | <p>这是一段文本</p> |
<起始标签>元素内容</结束标签> |
| 空元素 | 单标签 | `<img src="..." alt=""> | <标签> |
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> |
布尔属性的值是可选的, 只要元素中出现该属性,表示它取真值
| 序号 | 属性名 | 描述 | 举例 |
|---|---|---|---|
| 1 | id |
规定元素的唯一 id | <div id="wrap">...</div> |
| 2 | class |
规定元素的类名（classname） | <div class="box">...</div> |
| 3 | style |
规定元素的行内样式（inline 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>Document</title></head><body><table border="1"><tr><th>1</th><th>2</th><th>3</th></tr><tr><td>a</td><td>b</td><td>c</td></tr></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.2 绝对 URL
- 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.3 相对 URL
| 序号 | 使用场景 | 举例 |
|---|---|---|
| 1 | 被引用目标与当前位置无关 | http://php.cn/courses/123.html |
| 2 | 引用其它服务器上的文件 | https://www.php.net/manual/zh/ |
9. html 标签的语义化的优势
| 序号 | 优点 | 描述 |
|---|---|---|
| 1 | 更直观 | 对于一篇文章<article>标签,显然要比使用<div class="article"> |
| 2 | SEO 优化 | 搜索引擎更加喜欢你的网页,有利于 SEO, 得升关键词优化与排名 |
| 3 | 代码更少 | 提高加载速度,也方便代码维护与样式控制 |
| 4 | 无障碍支持 | 例如视力受损使用的屏幕阅读器, 语义化就非常重要了 |
10. html 元素的默认样式
- 为什么同样的内容,添加不同的标签,在浏览器中呈现出不同的显示效果呢?
- 原因是浏览器为这么元素预定了一张样式表,即每个元素都有默认样式
- 不幸的是, 不同浏览器厂商之间因为商业利益或竞争关系,这些元素在不同浏览器表现并不完全相同
- 所以,我们需要使用自定义的样式表,来重置元素的样式,让它们在所有浏览器中看上去是完全一样的
- 用户自定义的样式规则, 优先级要高于默认样式, 这是应该的,也是合理的
总结
-了解html文档的基本结构
1.<html>文档的开始点和结束点</html>
2.<herd>文档的头部</herd>
3.<body>文档的主体</body>
-了解标签
1.单标签和双标签
2.标签的属性和值
-了解url路径
1.url绝对位置：从协议开始访问
2.url相对位置：从当前文件夹开始访问（从3779.html开始一级级往上访问）