简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 2020年4月2日作业--HTML5基础知识
Blogger Information
Blog 29
fans 0
comment 0
visits 27004
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
2020年4月2日作业--HTML5基础知识
暴宇
Original
675 people have browsed it

HTML基础知识

1.网页的组成部分

序号 内容 描述
1 文字 给用户看的文字
2 其他文件 外部引入的文件如图片，视频，音频、样式表、JS脚本等
3 标记 对文字及引用文件的正确描述
  • 每个页面都有这三个部分，并且都是用纯文本进行描述
  • 任何可以写纯文本的编辑器都可以写HTML页面
  • 现在的主流版本是HTML5

2.HTML设计思想

  • HTML文档中的一切都是基于标签实现的
  • HTML是超文本标记语言
术语 描述
超文本 包含有超链接的文本
标记 用来描述内容的固定标签
语言 HTML不是编程语言，只是工具

3.基本的HTML页面

3.1HTML结构源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <!--头部内容区-->
  5.   <!--定义字符编码集-->
  6.   <meta charset="UTF-8">
  7.   <!--定义网页宽度为显示设备屏幕宽度-->
  8.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.   <!--页面在浏览器中显示的名称-->
  10.   <title>HTML5页面结构</title>
  11. </head>
  12. <body>
  13.   <!--页面主体内容区-->
  14. </body>
  15. </html>

3.2源码逐行分析

代码 解析
<!DOCTYPE html> 通知浏览器这是一个HTML5文档，始终写在第一行
<html>...</html> 跟标签/根元素，所有HTML元素都要写在这个标签内
<html lang="en"> 通知搜索引擎网页的编写语言是英语，中文为<html lang="zh-CN">
<head>...</head> 给浏览器和搜索引擎看的,主要描述字符编码集,视口与页面标题
<meta> 解释页面元素的数据，在head中给浏览器和开发者看的
<meta charset="UTF-8"> 告诉浏览器 html的字符集是UTF-8
<meta name="viewport" content="..." /> 视口/可视区屏幕的设置，下面三行是对它的参数详解
name="viewport" 设置属性名name的值为视口/可视区屏幕
width=device-width 页面宽度与显示设备的屏幕宽度一样宽,device-height 显示设备的屏幕高度
initial-scale=1.0 设置页面初始绽放比例,1.0表示原样 1:1 显示,不允许有任何绽放
<title> 显示在浏览器标签上的文本, 指定当前页面的标题, 这个标签对 SEO 非常重要
<body>...</body> 页面主体内容,允许或希望用户的内容都应该写到这里,用户也只对这里的内容感兴趣
<!-- 注释内容 -> 注释用来描述标签功能或用途,它的内容不要出现在显示的网页中, 只会出现在 html 源代码中
<h2>PHP中文网欢迎您...</h2> 浏览器渲染这个 html 文档时,最终只会呈现这个标题内容与效果,并不显示标签<h2>

编写 html 文档的标签字符不区分大小写, 但是推荐全部使用小写字母

4.元素属性与值

4.1元素

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

空元素也有用双标签的，如<script>|<video>|<br>...

4.2属性和值

4.2.1基本语法

  • 属性：必须写到元素的起始标签中，由属性名和属性值组成
  • 语法：属性名=”属性值”，属性名推荐小写字母加双引号
  • 案例：<input type="password" maxlength="20" placeholder="至少8个字符" required>
序号 值类型 描述/HTML代码
1 字符串 <p class="active">...</p>
2 预定义值 <input type="text">
3 指定格式 <a href="http://php.cn">...</a>
4 数值 <table width="200">...</table>
5 布尔值 <input type="email" required>

布尔属性的值时可选的，写了就取真值，默认为假值

4.2.2三大通用属性

  • id
  • class
  • style

这三大属性几乎可以添加到任何元素上

5.层级关系

简单说就是父>子>孙的关系，嵌套要正确

6. 网页中的文本字符

  • 空格、制表符、回车、换行等都会被压缩为一个空格
  • <>&等字符具有特殊意义，需要转义后才能添加到html文档
  • 转义字符语法：&+字符实体名称+；（如<用<表示）

7.文件与文件夹名称

  • 全部小写
  • 用.html，不要用.htm
  • 用连接线-，不要用下划线_分割多个单词

8.URL的语法

8.1唯一性

  • URL：统一资源定位符，具有唯一性
  • 如果 URL 是以路径分隔符/结尾, 则启用默认文件名,如index.html

8.2 URL分类

9.语义化优势

  • 直观
  • 利于SEO优化
  • 代码更少
  • 无障碍支持

10.元素的默认样式

  • 每个元素都有浏览器厂商各自预定义好的默认样式
  • 用户自定义的样式会覆盖默认样式

11.增加代码功能手抄图片

4.2手抄作业

12.总结

  • html5主体结构代码利用编辑器可快速写出，但需了解每个标签的用途和功能
  • <head>,<meta>标签需重点掌握
  • id、class、style三大属性适用于所有标签，必须掌握
  • 要发挥语义化标签的优势，便于书写也便于阅读
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
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！