HTML5知识点总结

原创 于 2022-01-07 01:27:41 发布 · 1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#服务器 #运维 #html5 #前端 #javascript

这篇博客总结了HTML5的相关知识，包括网页概述和HTML的基本语法。介绍了网页的分类、客户端形式和网页特点，以及HTML的注释、基本语法、标签结构、属性、文档声明、实体和语义化标签的应用。强调了语义化标签在网页结构和SEO中的重要性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

一、网页概述

  1.软件的分类

  2.客户端的形式

  3.网页

二、HTML总结

  1.HTML的注释

  2.HTML基本语法

        (1).HTML结构及常用标签

        (2).标签的属性

        (3).文档声明

        (4).实体

        (5).语义化标签

一、网页概述

  1.软件的分类

        系统软件（Windows、Linux、macOS）、应用软件、游戏软件

        通常情况下，软件由两个部分组成：客户端【用户通过客户端来使用软件】、服务器【服务器在远程处理业务逻辑】

  2.客户端的形式

  • 文字客户端：通过命令行使用软件，方式较为古老
  • 图形化界面：通过点击拖动等来使用软件。
  • 网页：通过访问网页来使用软件。所有的网站都属于这个范畴。（B/S架构）

  3.网页

网页的特点：相较于传统的图形化界面，网页的优点有：不需要安装、不需要更新，跨平台

网页使用的语言：HTML、CSS、JavaScript

关于静态网页与动态网页、网页名词解释、web标准与浏览器内核的内容请参考该博客：网页概述——静态网页与动态网页、网页名词解释、web标准与浏览器内核https://blog.csdn.net/m0_59897687/article/details/118424702

二、HTML总结

  1.HTML的注释

        HTML的注释，注释用来对代码解释说明，注释中的内容会被浏览器忽略，不会在网页直接显示，但是可以在源码中查看注释。开发中一定要养成良好的编写注释的习惯，注释要求简单明了。

        注释不能嵌套。另，注释还可以将一些不想显示的内容隐藏。

<!-- 此处是HTML的注释-->

 

  2.HTML基本语法

        HTML语法由标签 (tags) 和属性 (attributes)组成。标签又称标记符。HTML是影响网页内容显示格式的标签集合，浏览器主要根据标签来决定网页的实际显示效果。

        (1).HTML结构及常用标签

        标签的分类：单标签、双标签

        【单标签】：单标签的形式为 <标签   属性 = 参数>，最常见的如强制换行标签<br/>、分隔线标签<hr>、插入文本框标签 <input>

        【双标签】：双标签的形式为 <标签   属性 = 参数> 对象 </标签> ，如定义XUPT这四个字母大小为8号，颜色为红色的标签为 < font  size='8'  color="red" > XUPT < / font >

关于HTML结构、标签分类及常用标签的内容请参考该博客：

HTML结构、标签分类及常用标签https://blog.csdn.net/m0_59897687/article/details/118424702

 

        (2).标签的属性

        在标签中（开始标签或自结束标签）可以设置属性。属性是一个名值对（x=y），属性和标签名或其他属性应该使用空格隔开。属性需要根据文档中的规定来编写。有些属性有属性值，有些没有，如果有属性值，属性值应该使用引号引起来

        (3).文档声明

        文档声明用来告诉浏览器当前网页的版本。html5的文档声明如下：

        <!DOCTYPE html>

        

        (4).实体

        在网页中编写多个空格时，在默认情况下会被浏览器解析为一个空格。在HTML中有些时候，我们不能直接书写一些特殊符号，比如：多个连续的空格，比如字母两侧的大于号和小于号等等。如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）。

        实体的语法：'&'+'实体的名字'

        例如： 

实体名称描述
&nbsp;空格
&lt;小于号
&gt;大于号
&amp;和号
&trade;商标
&times;称号
&divide;除号

        (5).语义化标签

        在网页中HTML专门用来负责网页的结构，所以在使用html标签时，应该关注的是标签的语义，而不是它的样式 。语义化的标签，旨在让标签有自己的含义。其优势在于：代码结构清晰，方便阅读，有利于团队合作开发。方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。有利于搜索引擎优化（SEO）。浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正。

        在页面中独占一行的元素称为块元素(block element)，块元素在网页中一般通过块元素来对网页进行布局；

        在页面中不会独占一行的元素称为行内元素（inline element），行内元素主要用来包裹文字

        一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素，块元素中基本上什么都能放。

        语义化标签举例：

  • 【标题标签】 是块元素。h1~h6一共有六级标题，从h1到h6重要性递减，h1在网页中的重要性仅次于title标签。
  • 【hgroup标签】是块元素。hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup标签中。
  • 【p标签】是块元素。p标签表示页面中的一个段落。注意：p元素中不能放任何的块元素！
  • 【em标签】是行内元素。em标签用于表示语音语调的加重。
  • 【strong标签】是行内元素。strong标签表示强调，重要内容！
  • 【blockquote标签】是块元素。blockquote标签表示一个长引用。
  • 【q标签】是行内元素。q标签表示一个短引用。
  • 【br标签】是块元素。br标签表示页面中的换行。
  • 【ol标签】是块元素。使用ol标签来创建无序列表，使用 li 表示列表项
  • 【ul标签】是块元素。使用ul标签来创建有序列表，使用 li 表示列表项
  • 【dl标签】使用dl标签来创建定义列表，使用dt来表示定义的内容，使用dd来对内容进行解释说明。

注：列表之间可以互相嵌套 

        布局标签（结构化语义标签）举例：

  • 【header标签】header标签表示网页的头部
  • 【main标签】main标签表示网页的主体部分（一个页面只会有一个main）
  • 【footer标签】footer标签表示网页的头部
  • 【nav标签】nav标签表示网页的导航
  • 【aside标签】aside标签表示和主体相关的其他内容（侧边栏）
  • 【article标签】article标签表示一个独立的文章
  • 【section标签】section标签表示一个独立的区块，上边的标签都不能表示时使用section

div没有语义，就用来表示一个区块，目前来讲div是主要的布局元素

span是行内元素，没有语义，一般用于在网页中选中文字 

       

Python基础知识点总结
Python全栈系列
08-25 8万+
本文包括python基本知识：简单数据结构，数据结构类型（可变：列表，字典，集合，不可变：数值类型，字符串，元组），分支循环和控制流程，类和函数，文件处理和异常等等。
HTML5基础知识归纳汇总
08-30
HTML知识点汇总，包括HTML文档结构和基本语法、HTML4元素、HTML4属性、HTML5元素、HTML5属性和HTML5全局属性的知识点。使用XMind打开。
HTML5+全套知识点
10-16
HTML5+全套知识点打包，是一个很不错的html5语言文件，有兴趣的伙伴们抽时间可以看一下把。
HTML5知识大全
03-02
所有的知识将以代码的形式展示，让你直观地了解HTML5语言的全部用法。当然这也只是抛砖引玉，你可以随时重新编辑和发布，只要顺便提下我就行了。祝你学有所成！Fighting！
html5—史上最全的知识点
贤蛋大眼萌
01-23 606
史上最全的html5知识点新增的主体结构元素article元素section元素nav元素aside元素time元素和pubdate属性新增的非主体结构元素header元素address元素footer元素和hgroup元素网页编排规则 新增的主体结构元素 article元素 article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或者报刊中的文章、一篇论坛的帖子、一段用户评论或独立的插件，或是其他任何独立的内容 article元素可以嵌套使用 article元
HTML5知识点总结汇总
01-02
内容概述：文章包含了最基础的HTML5的知识点。 适用人群：适用于初级选手，可用作复习资料。 能学到什么：最开始的入门学习以及初识HTML。 阅读建议：先看视频在看本文章。
html5知识点总结.txt
06-24
html5知识点总结
前端HTML5常用知识点总结
04-03
#html#初学者#总结#常用知识点
HTML知识点汇总（代码+知识点）
08-21
HTML知识点汇总（代码+知识点），特别全面的覆盖了HTML的所有标签，无论是学习还是没学，都会在这里找到一个知识体系。使用xmind图导出的形式看起来非常方便。
HTML5技术百科收集总结
12-05
HTML5技术百科收集总结
html5知识结构图
04-09
html5知识结构图html5知识结构图html5知识结构图html5知识结构图
HTML5开发技术详细教程, HTML5代码大全, H5技术总结, 附带超详细html5学习路径图
07-07
HTML5开发技术详细教程, HTML5代码大全, H5技术总结, 附带超详细html5学习路径图
HTML5知识框架体系图
07-23
Html5语言的知识框架体系图，希望能够帮助初学者有个学习HTML5语言的路线和支持
【基础html5 基础知识点】(全)
热门推荐
kongjiea笔记
08-16 2万+
新增的结构标签 section元素  表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用，表示文档结构。例：HTML5中……;HTML4中 ……。article元素  表示页面中一块与上下文不相关的独立内容。比如一篇文章。aside元素  表示article元素内容之外的、与article元素内容相关的辅助信息。header元素
HTML5知识点汇总
AdSensca的博客
05-19 729
文章目录前言一、HTML5的特点1.内容类型2.DOCTYPE3.指定字符编码4.确保的和之前HTML的兼容性二、新增元素1.主体元素1）article元素2）section3）nav元素4）aside元素2.非主体标签1）header元素2）hgroup3）footer4）address三、HTML5结构1.大纲的编排规则1）显示编排2）隐式编排3）标题分级4）不同的内容区块可以使用相同级别的标题2.对新的结构元素使用样式4、HTML5中表单元素1.新增表单元素的属性1）表单内元素的form属性2）fo.
HTML5基础知识点总结（一）
张超的博客
01-12 2651
HTML5基础知识（一） HTML是一个超文本标记语言，它不属于一种编程语言， 基本框架如下： <!-- 声明该文档为HTML类型 --> <!DOCTYPE html> <!-- <html></html>指定了html语句的范围，lang="en"指的是语言为英文，中文为"zh" --> <html lang="en"> <!-- <head></head>规定了一些基本属性 --> <he
【html5基础】HTML5 知识点
kongjiea笔记
08-16 1872
HTML5 知识点   (1)语义化标记       ,,,,,,,,,,   (2)表单增强       ①新的INPUT类型: color, email, date, month, week, time, datetime, datetime-local, number, range, search, tel, url     ②新属性:
HTML5网页设计基础知识点总结
在这篇总结中，我们将介绍HTML5网页设计的一些基础知识点。 1. HTML5网页设计的基本结构 HTML5网页设计的基本结构由<!DOCTYPE html>、<html>、以及标签组成。 - <!DOCTYPE html>：用于说明HTML的版本。 - <html...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值