首页 > 博客列表 > html基础总结

博主信息

博文 64

粉丝 6

访问量 102117

专题推荐

更多>

html基础知识总结

[toc]

1.网页的组成部分

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

2.html的设计思想

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

3.html页面的基本结构

3.1网页的基本结构

<!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>
    <div>我在第一个html</div>
  </body>
</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代码

<!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>
    <table
      width="400"
      border="0"
      align="center"
      style="font-size: large;color:green;"
    >
      <form action="" method="POST">
        <tr>
          <td colspan="2" align="center">
            <div>登录界面</div>
          </td>
        </tr>
        <tr>
          <td>
            <div align="right">用户名：</div>
          </td>
          <td align="left">
            <input type="text" name="username" required />
          </td>
        </tr>
        <tr>
          <td>
            <div align="right">密码：</div>
          </td>
          <td align="left">
            <input type="password" name="password" required />
          </td>
        </tr>
        <tr>
          <td align="center" colspan="2">
            <input type="submit" id="subbtn" />
            <input type="reset" id="resbtn" />
          </td>
        </tr>
      </form>
    </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. 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地址

批改老师：

天蓬老师

批改状态：合格

老师批语：完成的很好

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

1条评论

王娇 2020-04-04 19:45:45

有两个表格格式不正确，进行了更改

1楼

作者最新博文

laravel--新建模型--实现前台用户登录验证

2020-08-05 19:06:28

html基础知识总结

1.网页的组成部分

2.html的设计思想

3.html页面的基本结构

3.1网页的基本结构

3.2网页结构分析

4.元素 标签 属性 值

4.1 元素

4.2 属性和值

4.2.1 基本语法

4.2.2 三大通用属性

5. 层级关系

6. 网页中的文本字符

7. 文件与文件夹名称

8. URL超链接的地址

8.1 语法

8.2 绝对 URL

8.3 相对 URL

9. html 标签的语义化的优势

10. html 元素的默认样式

11.课后总结

4.元素标签属性值