收藏
天蓬老师批改状态：合格
老师批语：学习一定会遇到困难, 加油
| 序号 | 内容 | 描述 |
|---|---|---|
| 1 | 文本内容 | 用户看到的网页文本，所有的文字信息 |
| 2 | 其他文件的引用 | 包含图片，视频，音频，CSS 样式表，JS 脚本等 |
| 3 | 标记 | 对文本及引用文件的正确描述 |
目前主流的 HTML 版本都是 5.0 的版本。
html 文档是基于标签实现，也叫标签语言。
| 术语 | 描述 |
|---|---|
| 超文本 | 包含有超级链接的文本 |
| 标记 | 用来描述内容的固定标签 |
| 语言 | html 并不是编程语言，是一种标签语言 |
<!DOCTYPE html><html lang="en"></html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>HTML5页面结构分析</title></head><body><h1>PHP中文网<h1></body></html>
| 代码 | 解析 |
|---|---|
<DOCTYPE html> |
宣告文件为 html 文档 |
<html></html> |
根标签，所有页面内容都此标签中 |
<html lang="en"> |
告诉浏览器文档内容为哪种语言，默认英语，国内网站一般用 lang=”zh-CN” |
<head>...</head> |
供浏览器和搜索引擎使用，描述字符编码集，视口与页面标题 |
<meta> |
设置页面元数据，所谓元数据，就是描述某种特征特定信息的数据 |
<meta charset="UTF-8"> |
设定本 html 文档编码集，目前最多使用的是“UTF-8” |
<meta name="viewport" > |
设定可视区屏幕显示方式，比如是否可以缩放 |
| width=device-width | 根据显示设备宽度来匹配 |
| initial-scale=1.0 | 设置初始缩放比例为 1:1，即不允许缩放。 |
<title> |
显示在浏览器标签上的文本，指定标题和关键字有利于搜索引擎收录，SEO 非常重要 |
<body>...</body> |
想呈现给用户的内容 |
<!--注释内容--> |
用来描述标签用途，只有源代码中显示，页面中不显示，方面开发者阅读 |
<h1>PHP 中文网</h1> |
标题标签 |
| 元素 | 标签 | 语法 | 描述 | |
|---|---|---|---|---|
| 非空元素 | 双标签 | <h3>学习让我变得更强大</h3> |
<起始标签>元素内容</结束标签> |
|
| 空元素 | 单标签 | `<img src="..." alt=""> | <link>` | <标签> |
空元素也有使用双标签描述的,如
<script>|<video>|<br>...
属性名="属性值",属性名推荐只使用小写字母,属性值推荐加上双引号<input type="password" minlength="8" 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 |
元素的唯一标识 | <div id="wrap">...</div> |
| 2 | class |
给元素添加类样式 | <div class="box">...</div> |
| 3 | style |
设置当前元素样式 | <div style="...">...</div> |
这几个属性,几乎可以添加到任何元素上
<!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="30" required /></div><div><label for="password">密码:</label><inputtype="password" name="password" id="papassword" placeholder="至少8位" required /></div><div><button>提交</button></div></form></body></html>
<,>,&等字符具有特殊意义,需要转义后才允许添加到 html 文档& + 字符实体名称 + ;, 如<,使用: <表示Unicode极大的缓解了特殊字符的问题,推荐将文档编码设置为utf-8<head> <mata charset="UTF-8"> </head>| 序号 | 字符 | 描述 | 转义字符 | 实体编号 |
|---|---|---|---|---|
| 1 | ' ' |
空格 | nbsp; |
  |
| 2 | < |
小于 | < |
< |
| 3 | > |
大于 | > |
> |
| 4 | & |
&符号 | & |
& |
| 5 | " |
双引号 | " |
" |
| 6 | © |
版权 | © |
© |
| 7 | ® |
已注册商标 | ® |
® |
| 8 | × |
乘号 | × |
× |
| 9 | ÷ |
除号 | ÷ |
÷ |
chapter1/demo1.html.html, 不要用.htm-,而不是下划线_分隔多个单词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
| 序号 | 使用场景 | 举例 |
|---|---|---|
| 1 | 被引用目标与当前位置无关 | http://php.cn/courses/123.html |
| 2 | 引用其它服务器上的文件 | https://www.php.net/manual/zh/ |
| 序号 | 使用场景 | 举例 |
|---|---|---|
| 1 | 引用同一目录下文件 | 直接写文件名,如demo2.html |
| 2 | 引用子目录下文件 | 目标文件前带上子目录名,使用目录分隔符/连接,如chapter2/demo2.html |
| 3 | 引用上层目录的文件 | 文件名前添加二个点,同样使用目录分隔符/连接,允许逐级向上查询,如../../demo2.html |
| 4 | 根路径/ |
为防止过多层级的向上递归查询,可以从当前服务器根目录开始查询,如/admin/books/chapter2/ |
访问同一个网站的文件,应该始终坚持使用相对 URL 地址
| 序号 | 优点 | 描述 |
|---|---|---|
| 1 | 更直观 | 对于一篇文章<article>标签,显然要比使用<div class="article"> |
| 2 | SEO 优化 | 搜索引擎更加喜欢你的网页,有利于 SEO, 得升关键词优化与排名 |
| 3 | 代码更少 | 提高加载速度,也方便代码维护与样式控制 |
| 4 | 无障碍支持 | 例如视力受损使用的屏幕阅读器, 语义化就非常重要了 |
基本认识了html文档的结构，一般可实现的功能，本次作业前三部分自己参考写的，由于时间关系后面部分直接复制老师老师的md加了部分自己理解。仔细看完收获甚多，10期由于种种原因基本没有跟着学，这次一定要克服困难，跟上节奏走。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
