Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html基础总结
Blogger Information
Blog 64
fans 6
comment 2
visits 82951
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html基础总结
王娇
Original
970 people have browsed it

html基础知识总结

[toc]

1.网页的组成部分

  • 文本内容，我们在网页中看到的文字
  • 文件的引用，例如：音频，视频，图片等
  • 标签，是用来描述图片，音频，视频的

2.html的设计思想

  • html：超文本标记语言
    1. 超文本：带有超链接的文本内容
    2. 标记：html中的标签
    3. 语言：任何文本编辑器都可书写html

3.html页面的基本结构

3.1网页的基本结构

  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>瑄然软件工作室</title>
  7.   </head>
  8.   <body>
  9.     <div>我在第一个html</div>
  10.   </body>
  11. </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代码
  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>瑄然软件工作室</title>
  7.   </head>
  8.   <body>
  9.     <table
  10.       width="400"
  11.       border="0"
  12.       align="center"
  13.       style="font-size: large;color:green;"
  14.     >
  15.       <form action="" method="POST">
  16.         <tr>
  17.           <td colspan="2" align="center">
  18.             <div>登录界面</div>
  19.           </td>
  20.         </tr>
  21.         <tr>
  22.           <td>
  23.             <div align="right">用户名：</div>
  24.           </td>
  25.           <td align="left">
  26.             <input type="text" name="username" required />
  27.           </td>
  28.         </tr>
  29.         <tr>
  30.           <td>
  31.             <div align="right">密码：</div>
  32.           </td>
  33.           <td align="left">
  34.             <input type="password" name="password" required />
  35.           </td>
  36.         </tr>
  37.         <tr>
  38.           <td align="center" colspan="2">
  39.             <input type="submit" id="subbtn" />
  40.             <input type="reset" id="resbtn" />
  41.           </td>
  42.         </tr>
  43.       </form>
  44.     </table>
  45.   </body>
  46. </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地址

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：完成的很好
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
1 comments
王娇 2020-04-04 19:45:45
有两个表格格式不正确，进行了更改
1 floor
Author's latest blog post