search

博客列表 >html 网页的组成及元素、标签、属性、值、URL 文本字符的语法和使用

html 网页的组成及元素、标签、属性、值、URL 文本字符的语法和使用

辛迪
辛迪原创
2020年04月04日 22:58:112583浏览

1. html 是超文本标记语言。

  • 超文本——含有超链接的文本。
  • 预定义标记——用来描述内容的固定标签，html 文档中的一切,都是基于标签实现的（还有一种为自定义标记）。
  • 语言——html 并不是编程语言,是用标签来标记的标记语言，只是书写 html 文档的工具。

2. html 页面由文本内容、标记、其它文件的引用这三部分组成, 并采用纯文本进行描述。

  • 文本内容——用户看到的网页文本,例如新闻、电话等。
  • 标记——对文本以及引用文件的正确描述。
  • 其它文件的引用——如图片、视频、音频、CSS 样式表、JS 脚本等。
  1. <p>php中文网</p>
  2. <!-- <p>为标记，“php中文网”为文本内容 -->
  3. <img src="logo.jpg" alt="log" />
  4. <!-- logo.jpg为文件的引用 -->
  5. <!-- 一般其它资源的引用为单标签，是通过属性指示出来的 -->
  6. <!-- `<p>`为不可置换元素，`<img>`为可置换元素 -->

任何能编写纯文本的编辑器都可以用来创建 HTML 页面，现在主流 HTML 版本是 5.0。

3. 基本的 html 网页的标签及页面结构

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 ,已成行业标准
<title>…</title> 显示在浏览器标签上的文本, 指定当前页面的标题, 这个标签对 SEO 非常重要
<body>…</body> 页面主体内容，允许或希望用户的内容都应该写到这里
<!--注释内容--> 注释用来描述标签功能或用途，它的内容不出现在显示的网页中, 只会出现在 html 源代码中
<h2>…</h2> 浏览器渲染这个 html 文档时，最终只会呈现这个标题的内容与效果,并不显示标签<h2>
  • 结构源码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <!-- name="viewport" 设置视口(即可视区屏幕) -->
  7.     <!-- width=device-width 页面宽度应该与显示设备的宽度相匹配，类似还有 device-height 表示设备的屏幕高度 -->
  8.     <!-- initial-scale=1.0 设置页面初始绽放比例，1.0 表示原样 1:1 显示,不允许有任何绽放 -->
  9.     <title>HTML5页面结构</title>
  10.   </head>
  12.   <body>
  13.     <!-- 页面主体内容 -->
  14.     <h2>PHP中文网欢迎您...</h2>
  15.   </body>
  16. </html>

4. html 的元素、属性和值及之间的关系

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

非空元素是有内容的，如：<p>文本内容<p>
空元素也有使用双标签描述的，如：<script>|<video>|<br>…，不是没有内容，内容来自外部引用或文件，如：<img src=”1.jpg alt=””>

  • 属性:是用来对元素进一步描述的文本，属性必须写到元素的 “起始标签” 中，由属性和值二部分组成。
语法 属性名=”属性值”
案例 <input type="password" maxlength="20" placeholder="至少8个字符" required>

属性使用小写字母，属性的值加上双引号

  • 值
值类型 描述
字符串 <p class="active">…</p>
预定义值 <input type="text">
指定格式 <a href="https://php.cn">…</a>
数值 <table width="200">…</table>
布尔值 <input type="email" required>

布尔属性的值是可选的, 只要元素中出现该属性,表示它取真值，不需要就不要写，不写默认取假值。

  • 元素、属性和值之间的关系
    实例：
    <a href="https://www.php.cn/">php中文网</a>为元素
    <a></a>为标签
    href="https://www.php.cn/"为属性
    href 为变量名，https://www.php.cn/为变量值

元素、属性和值之间的关系

  • 三大通用属性
属性名 描述 举例
id 元素的唯一标识 <div id="wrap">…</div>
class 给元素添加类样式 <div class="box">…</div>
style 设置当前元素样式 <div style="...">…</div>

id、class、style 三大属性几乎可以添加到任何元素上
id 在当前页面中只能标注一个元素，应该具有唯一性，唯一性由程序员自己保证，浏览器不检查。

实例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       .aaa {
  9.         background-color: brown;
  10.         /* 定义aaa */
  11.       }
  12.     </style>
  13.   </head>
  14.   <body>
  15.     <h2 style="color: aqua;font-size: 36px;" class="aaa" ;>文本内容</h2>
  16.     <!-- color: aqua为预定义值，不能随便写；font-size: 36px为数值；aaa为自定义的字符串，在<head>中<style>定义 -->
  17.     <a href="https://www.php.cn/">php中文网</a>
  18.     <!-- https://www.php.cn/为指定格式 -->
  19.     <form action="">
  20.       <label for="">邮箱</label>
  21.       <input type="email" placeholder="email" id="my-email" required />
  22.       <!-- required是布尔值,my-email为id属性（唯一性） -->
  23.       <button>提交</button>
  24.     </form>
  25.   </body>
  26. </html>

实例效果：

" class="reference-link">实例效果

5. html 中元素之间的层级关系

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

实例：

  1. <!DOCTYPE html>
  2. <!-- 通知浏览器，这是一个html5文档 -->
  3. <!-- html为根标签/根元素，是一个双标签，说明里面有内容 -->
  4. <html lang="en">
  5.   <!-- 当前文档使用的编辑语言为英文，中文：lang="zh-CH" -->
  6.   <head>
  7.     <!-- head中的内容不需要用户看到，是给浏览器/开发者看的，主要是设置网站的元数据（元数据是描述某种特定信息的数据，是用来解释数据的数据） -->
  8.     <meta charset="UTF-8" />
  9.     <!-- 当前字符集是“UTF-8” -->
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  11.     <!-- viewport：视口/可视区屏幕，
  12.     width=device-width：当前页面的宽度为设备的宽度，initial-scale=1.0：页面1:1显示（不允许缩放） -->
  13.     <title>元素的标签,属性和值,正确的嵌套关系</title>
  14.   </head>
  16.   <body>
  17.     <!-- 元素之间应该保持正确的嵌套 -->
  18.     <form action="">
  19.       <div>
  20.         <label for="email">邮箱:</label>
  21.         <!-- 元素值: 预定义值, 指定值, 布尔值,数值 -->
  22.         <input type="email" name="email" id="email" maxlength="100" required />
  23.       </div>
  24.       <div>
  25.         <label for="password">密码:</label>
  26.         <input
  27.           type="password"
  28.           name="password"
  29.           id="papassword"
  30.           placeholder="至少8位"
  31.           required
  32.         />
  33.       </div>
  34.       <div>
  35.         <button>提交</button>
  36.       </div>
  37.     </form>
  38.   </body>
  39. </html>

实例效果：

" class="reference-link">

6. html 网页中的文本字符

  • 空格
    多个空格、制表符、回车符、换行符、都会被压缩为一个空格

  • 具有特殊意义的字符
    <、>、& 等字符具有特殊意义、需要转义后才允许添加到 html 文档

  • 转义字符
    语法：& + 字符实体名称 + ;， 如“<”使用“<”表示

    Unicode极大的缓解了特殊字符的问题，推荐将文档编码设置为 utf-8，如：<head> <mata charset="UTF-8"> </head>

    常用转义字符表

字符 描述 转义字符 实体编号
' ' 空格 &nbsp; &#160;
< 小于 &lt; &#60;
> 大于 &gt; &#62;
& &符号 &amp; &#38;
© 版权 &copy; &#169;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

7. 文件与文件夹名称

格式 实例
全部使用小写字母 chapter1/demo1.html
采用合适的扩展名: .html（不要用“.htm”）
用连接线“-”分隔多个单词 my-note（不用下划线“_”）

html 中设置的名称一般规范用中划线“-”（css 中用中划线），如：my-email；变量名用下划线“_”（提交到 php 的），变量名一般不加连接线。

8. html 中 URL 的使用

  • URL 语法及其描述

    URL 是统一资源定位符, 互联网上任何一个文件都有一个唯一的 URL，语法: http://模式/主机名/路径/文件名 。

名称 描述 实例
模式 也称”协议”,浏览器如何访问这个文件 http,https,ftp,mailto…
主机名 使用”域名”或”IP”表示 https://www.php.cn/,或者 http://127.0.0.1/
路径 使用一个或多个正斜线分割的字符串 public/admin
文件名 最后一个路径后面的,带有扩展名的文档 ablut.html

如果 URL 是以路径分隔符“/”结尾, 则启用默认文件名，如：index.html.
web 访问默认端口 80 ，如：https://www.php.cn/
ftp（文件的上传下载）默认端口 21，如：ftp://123.45.6.5:21/ddd/sss
email 访问默认端口 25

  • URL 的分类及各类型的使用场景
    URL 有绝对与相对两种类型，绝对 URL 被引用目标与当前位置无关；相对 URL 是以包含 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 地址.

9. html 标签语义化的优势

  • 更直观：对于一篇文章<article>标签，显然要比使用<div class="article">更直观。
  • SEO 优化：让搜索引擎更加喜欢你的网页，有利于 SEO, 得升关键词优化与排名
  • 代码更少：提高加载速度,也方便代码维护与样式控制
  • 无障碍支持：例如视力受损使用的屏幕阅读器, 语义化就非常重要了

10. html 元素的默认样式

同样的内容，添加不同的标签，在不同的浏览器中可能呈现出不同的显示效果。原因是浏览器为这些元素预定了一张样式表,即每个元素都有默认样式，这些元素在不同浏览器的表现并不完全相同，所以,我们需要使用自定义的样式表来重置元素的样式,让它们在所有浏览器中看上去是完全一样的。

用户自定义的样式规则, 优先级要高于默认样式。

上一条：语义化的文本元素, 连接元素, 列表元素, 图像元素, 表格元素下一条：HTML链接元素、列表元素、表格元素、表单元素演示0403
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多