微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 0402文档作业，不知道为什么用`-`表示在预览文档中的小黑点没有出来

博主信息

博文 2

粉丝 0

访问量 2861

专题推荐

更多>

html 基础知识的学习

1.网页组成部分

序号	详细内容	描述
1	html的文本内容	用户看到的网页内容，如：新闻、广告、产品介绍说明等
2	其他文件的引用、插入	如：图片、视频、音频、css样式表等
3	html 的标记使用	主要是对文本及引用文件正确的描述说明

每个网页都是由这三部分组成的，并且都是采用纯文本进行描述
任何能编写纯文本的编辑器都可以用来创建html页面
现在主要使用的 html 的版本是5.0，教学用的也是HTML5版本

2.html 的设计思想

html 文档中的所有一切都是通过有效的标签来实现的
标签就是类似身份证明，通过输入标签能快速找到、或者识别到标签
html 是超文本标记语言

序号	术语	描述
1	超文本	指包含有超链接的文本
2	标记	用来描述内容的固定标签
3	语言	html 并不是编程语言，只是书写 html 文档的工具

 ## 3. 基本的 html 页面
 ### 3.1 html de 结构及源代码
 ```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meat charset="UTF-8" />
    <meat name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>HTML5网页结构学习</title>
  </head>
  <body>
    <h2>纳职欢迎您...</h2>
  </body>
</html>

3.2 源代码的解释说明（代表什么，传递什么信息）

序号	源代码	解析说明
1	`<!DOCTYPE html>`	通知浏览器这是一个 html5 文档，源代码始终放在第一行
2	`<html>...</html>`	这是根标签，也叫根元素， html 的整个文档内容都必须写在标签内
3	`<head>...</heaf>`	视口与页面标题，供浏览器或搜索引擎使用，用户并不感兴趣
4	`<html lang="en"`	通知搜索引擎 html 文档使用的编程语言，也可以换成中文的`<html lang="zh-cn">`
5	`<meat>`	这是元数据,描述某种特定信息的数据
6	`<meat charset="UTF-8" />`	文档编写语言所属的字符集，现流行`UTF-8`，已成行业标准
7	`name="viewprt"`	视口设置，如何显示页面，例如是否允许缩放页面等
8	`width=device-width`	页面的宽度与显示器的宽度相匹配，类似的`device-height`表示的是高度
9	`initial-scale=1.0`	设置页面初始的比列，`1.0`表示原样1:1
10	`<title>`	显示当前文本页面的标题，这个标签对 SEO 非常重要
11	`<body>...</body>`	页面的主体内容，用户看到的，感兴趣的内容都应该编写在里面
12	`<!--注释内容->`	用来描述标签的功能或用途，只会出现在 HTML 源代码中，不会显示在网页页面中
13	`<h2><h2>纳职欢迎您...</h2>`	最终呈现的标题内容或效果，但是标签`<h2>`并不会显示

编写的 HTML 文档的标签字符不区分大小写字母，为了显示效果，最好是全部使用小写字母|

4. 元素，属性与值

4.1 元素

元素的分类	标签性质	表达语法	描述
非空元素	是双标签，即有开始标签，就要用结束标签	例如`<p>我爱学习</p>`	`<起始标签>元素内容</结束标签>`
空元素	单标签	例如 `<img src="..." alt="">,<link>`	`<标签>`

空标签也有特殊的，要使用双标签的，例如`<script>/<video><br>….等

4.2 基本语法

属性：由属性名和属性值组成，必须写到元素的“起始标签中”
语法：属性名=属性值，属性名使用小写字母，属性值要加上双引号：“ ”
案例：<input type="password" maxlength="20" placeholder="至少8个字符" required>

序号	值类型	描述说明
1	字符串	`<p class="active">...</p>`
2	预定义值	`<input type="text">`
3	指定格式	`<a href="https"//www.nazhi.com">...</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. 层级关系

元素中允许包含另一个元素，被包含的元素叫子元素，子元素又可以继续承包含其它元素，以此类推
元素层级结构中，必须保持正确的嵌套关系
详见如下案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meat charst="UTF-8" >
    <meat name="viewport" content="width=denice-width,initial-scale=1.0" /></meat>
    <title>元素的标签、属性和值的正确嵌套关系</title>
   </head>
   <body>
     <!-- 元素之间应该保持正确的嵌套关系 -->
     <form action="">
       <div>
         <label for="email">邮箱：</label>
         <!-- 元素值：预定义值，指定值，布尔值，数值 -->
         <input type="email" name="email" id="emali" maxlength="100" required />
       </div>
       <div>
         <label for="password">密码：</label>
         <input
           type="password"
           name="password"
           id="password"
           placeholder="至少8位"
           required />
       </div>
       <div>
         <button>提交 </button>
       </div>
     </form>
   </body>
</html>

6. 网页中的文本字符

多个空格、制表符、回车符、换行符都会被压缩为一个空格
<，>,&等特殊字符，需要转义后才可以添加到 html 文档
转义字符语法： & + 字符实体名称 + ；, 如<,使用；<表示
unicode极大的缓解了特殊字符的问题，将文档编码设置为utf-8

7.文件与文件夹的名称

全部使用小写字母：chapter1/demo1.html
采用合适的扩展名： .html,不能用.htm
坚持使用连接线“-”，而不是下划线_分隔多个单词

8. URL

8.1 语法

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

序号	名称	描述	案例
1	模式	也称“协议”，是浏览器如何访问文件	如 `http`,`https`,`ftp`,`mailto`…
2	主机名	也称“域名”或者“IP”	如 `https://www.nahzi.com/`或者`http://127.0.0.1/`
3	文件路径	使用一个或者多个正斜线分割字符串	如 `public/admin`
4	文件名	最后一个路径后面，带有扩展名的文件	如 `index.html`

8.2 绝对 URL

唯一的 URL

8.3 相对 URL

大部分情况下使用在本机电脑的文件查找等

9. html 标签的语义化优势

序号	优点	描述
1	更直观	如 `<div class="artcle">可以直接用`<srticle>`标签
2	SEO 优化	有利于 SEO 优化，提升关键字优化与网站排名
3	代码少	提高加载速度，方便维护与样式控制
4	无障碍支持	如视力受损等情况

10. html 元素的默认样式

浏览器为元素预定了一张样式表，每个元素都有默认样式，由于浏览器厂商的不同，元素在不同的浏览器表现并不完全相同
因此，我们可以重置元素的样式，使用自定义的样式表，让元素在所有的浏览器中看上去却是完全一样的
用户自定义的样式规则，优先级别要高于默认样式。

总结

1.通过今天的对 html 基础知识的学习，让我清楚的知道了网页的组成部分、文本下的专业术语及表现形式。
2.了解 html 代码的表现意思，及代码的页面结构，掌握编写源代码细节性、统一性的问题
3.通过对源代码的了解，知道源代码在文本中的关键性作用及用途，以及文本中的层级关系。
4.掌握记住了一些以后经常用到的元素及属性，属性值。
5.知道了平时在进入网站前输入的域名，代表什么

批改老师：