html页面组成介绍

html页面组成介绍

要点

• 网页的组成部分：

序号	内容	描述
1	文本内容	用户看到的网页文本,例如新闻,电话等
2	其它文件的引用	如图片,视频,音频,CSS 样式表,JS 脚本等
3	标记	对文本以及引用文件的正确描述

• html 页面的必备四大元素：html, head, title, body
• html 文档中的一切,都是基于标签实现的
• html页面是由元素,属性与值与其它组成
• 元素：包含非空元素和空元素

元素	标签	语法	描述
非空元素	双标签	<p>1</p>	<起始标签>元素内容</结束标签>
空元素	单标签	<img src="..." alt="">	<link>

• 另，元素中允许包含另一个元素,被包含的元素叫做子元素, 子元素又可以继承包含其它元素,依此类推，此结构中必须保持正确的嵌套关系

• 属性：必须写到元素的 “起始标签” 中,由属性名和属性值二部分组成，属性名="属性值",属性名推荐只使用小写字母,属性值推荐加上双引号

序号	值类型	描述
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>

• 在网页中，多个空格,制表符,回车符,换行符,都会被压缩为一个空格，具有特殊意义的字符,需要转义后才允许添加到 html中

• 常用转义字符表

序号	字符	描述	转义字符	实体编号
1	' '	空格	nbsp;
2	<	小于	<	<
3	>	大于	>	>
4	&	&符号	&	&
5	"	双引号	"	"
6	©	版权	©	©
7	®	已注册商标	®	®
8	×	乘号	×	×
9	÷	除号	÷	÷

注：文件与文件夹名称中全部使用小写字母；采用合适的扩展名: .html, 不要用.htm；坚持使用连接线-,而不是下划线_分隔多个单词

• 相对和绝对URL

URL	使用场景	举例
相对	被引用目标与当前位置无关	http://php.cn/courses/123.html
相对	引用其它服务器上的文件	https://www.php.net/manual/zh/
绝对	引用同一目录下文件	直接写文件名,如demo2.html
绝对	引用子目录下文件	目标文件前带上子目录名,使用目录分隔符/连接,如chapter2/demo2.html
绝对	引用上层目录的文件	文件名前添加二个点,同样使用目录分隔符/连接,允许逐级向上查询,如../../demo2.html
绝对	根路径/	为防止过多层级的向上递归查询,可以从当前服务器根目录开始查询,如/admin/books/chapter2/

另外，访问同一个网站的文件,应该始终坚持使用相对 URL 地址