HTML基础知识

最新推荐文章于 2025-07-25 21:31:58 发布
最新推荐文章于 2025-07-25 21:31:58 发布
阅读量212 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端基础 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/abhsdb/article/details/117587657
本文深入探讨HTML5的新标准，包括原生多媒体支持、可编程内容和语义Web。重点讲解了HTML5的全局属性、文档和元数据元素、文本元素、内容分组、制表以及表单元素的使用，特别是input元素的多种类型和验证功能。此外，还介绍了如何通过HTML5增强网页内容的结构和含义。

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

文章目录

HTML

1.1 简介

HTML5不仅仅式HTML规范的最新版本，它还是一系列用来制作现代富Web内容相关技术的总称。

1.2 新标准
  • 引入原生多媒体支持
  • 引入可编程内容
  • 引入语义Web
1.3准备工作

浏览器、HTML编译器、Web服务器

初探HTML

  1. 有些HTML元素会对呈现形式产生影响。现在的观点是应该用HTML说明文档内容结构和含义，用CSS控制呈现给用户的形式。

  2. 用于处理HTML文档的各种软件有一个共同名称–>用户代理（浏览器是最常用的）

  3. 标签：标签就是<head><body><h1>…被尖括号"<“和”>"包起来的对象，绝大数的标签都是成双成对的出现，如<div></div><form></form>。当然也有少部分不是称对出现的例如：<br />

  4. 元素：HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码

  <p>这就是一个标签；  
  <p>这里是内容</p>这就是一个元素，也就是说元素由一个开始的标签和结束的标签组成，用来包含某些内容；

  1. 元素属性（全局属性、专有属性、布尔属性、自定义属性–>以data-开头）

  2. 元素让浏览器明白处理的是HTML文档

  3. 父元素、子元素、后代元素、兄弟元素（元素之间的关系有限制）

元素分类： 元数据元素  -->  构建HTML文档的基本结构，以及就如何处理文档向浏览器提供信息指示

​		  流元素 、短语元素 -->  确定一个元素合法父元素和子元素范围

​      	  无法归入的元素（无特别含义、只能用在有限情况下 如：li 只有三种父元素ol、ul、menu）
  1. HTML实体 --> 用来代替特殊字符的代码。 < – &lt – &#60
2.1 HTML5全局属性

所有元素共有行为

accesskey:设定一个或几个用来选择页面上元素的快捷键（windows下同时按ALT+accesskey属性值）
class:元素归类 （一个元素可被归多个类别）
contenteditable:让用户能够修改页面上内容（true:可编辑；false:不可编辑；未设值继承父元素的值）
contextmenu:为元素设置快捷菜单
dir:规定元素中文字方向（ltr/rtl）
draggable:表示元素是否可拖放
dropzone:HTML5支持拖放操作之一，与上述draggable属性搭配使用
hidden:布尔属性，表示相关元素当前毋需关注，隐藏相关元素
id:用来给元素分配一个唯一的标识符
lang:用于说明元素内容使用的语言
spellcheck:表明浏览器是否对元素内容进行拼写检查（true:启用；false:禁用）
style:直接在元素身上定义CSS样式
tabindex:HTML页面上的键盘焦点可以通过TAB键在各元素之间切换（给元素设置值1、2..设置为-1的不会被选中）
title:提供元素额外信息，显示提示
2.2文档和元数据元素

创建HTML文档和说明其内容的元素
在这里插入图片描述

  1. 基本文档结构：DOCTYPE、html、head、body、
  2. 元数据元素说明文档：title、base、meta、style、link、script
  3. head元素包含文档的元数据，必须有一个title元素，其他元素可有可无
  4. body元素内容：所有短语元素和流元素

  1. 元数据元素本身不是文档内容可以用来提供关于HTML文档的信息，放在head 元素中

  2. style元素局部属性：type、media（print|screen…）、scoped

  3. link元素局部属性：herf、hreflang、media、rel(文档与所关资源的关系类型)、size、type(指定MIME类型）

    网站标题显示图标：rel = “shortcut icon” href = “favicon.ico” type = “imge/x-icon”

    预先获取资源：rel = “prefetch” href = “”

  4. meta带charset属性：声明HTML文档的字符编码

    meta带http-equiv属性：设置HTML文档的默认样式表或周期性地刷新页面内容

    每个meta元素只能用于一种用途，想使用多种特性，应添加多个meta元素

  5. 与脚本元素相关的有两个：script、noscript

    script局部元素：type、src、defer、async、charset(与src一同使用)

2.3文本元素

细粒度层次，引入结构和含义（应从语义出发）
在这里插入图片描述

  1. a的局部属性：href、hreflang、media、rel、target(显示所链接资源的方式)、type

    ID选择器#生成内部超链接

2.4对内容分组

给予文档内容更多的结构和含义
在这里插入图片描述

  1. ol表示有序列表，局部属性：start、reversed、type(1、a、A、i、I)
  2. ul表示无序列表，项目符号（list-style-type控制）
  3. li允许的父元素ul、ol、menu 局部属性：value用来生成不连续的有序列表
  4. 说明列表：dl、dt、dd
2.5划分内容

在这里插入图片描述

2.6制表

在这里插入图片描述

  1. 制作不规则属性：用th和td元素的colspan（跨列）与rowspan（跨行）属性
2.7表单

在这里插入图片描述

  1. 制作一个基本表单需要三个元素：form、input、button
  2. form元素局部属性：action、method、enctype、name、accept-charset、novalidate、target、 autocomplete
  3. input元素局部属性：name、disabled、form、type
  4. button元素局部属性：name、disabled、form、type、value、autofocus
2.7.1表单基本知识

在这里插入图片描述

  1. form不能是其他form的后代元素
  2. autocomplete —> on | of
  3. 提交表单时其name属性值不会被发送给服务器，用处仅限于DOM区分各个表单，要是input不设置name属性，用户在其中输入的数据在提交表单时不会被发送给服务器
  4. fieldset与legend搭配
  5. 要将某个这类元素与并非其祖先元素的form元素挂钩，将其form属性设置为相关form元素的id属性即可
2.7.2input元素

在这里插入图片描述

用input元素输入文字（text --> 显示为单行文本框  textarea ---> 显示多行文本框）

text型input元素可用的额外属性
dirname、list、maxlength、pattern、placeholder、redonly、required、size、value

password型input元素可用的额外属性
maxlength、pattern、palceholder、readonly、required、size、value

radio型与checkbox型input元素可用的额外属性
checked、required、value

email、tel、url型input元素可用的额外属性
list、maxlength、pattern、palceholder、readonly、required、size、value

image型input元素可用的额外属性
alt、formaction、formenctpy、formmethod、formtarget、formnovalidate、height、src、width

file型input元素可用的额外属性
accept、multiple（可一次上传多个文件）、required
  1. option元素允许的父元素：datalist、select、optgroup
  2. 将input元素的list属性设置为datalist元素的id属性值，用户在输入数据时从后一元素提供的一批选项中选择
2.7.3其他表单元素及输入验证

  1. select局部属性：name、disabled、form、size、multiple、autofocus和required

    ​ 内容：option、optgroup

  2. textarea局部属性：name、disabled、form、readonly、maxlength、autofocus、required、 placeholder、dirname、rows、wrap、cols

  3. output：表示计算的结果

  4. 验证 ：输入验证、确保用户提供了一个值、确保输入值在某个范围、确保输入与指定模式匹配（pattern）

2.8嵌入内容

在这里插入图片描述

  1. 客户端分区响应图：通过点击某张图像上的不同区域让浏览器导航到不同的URL上

  2. map局部属性：name 内容：一个或多个area

  3. area的属性：第一类处理area所代表的图像区域被用户点击后浏览器会导航到的URL

    ​ （href、alt、target、rel、media、hreflang、type）

    ​ 第二类 shape与coords -->表明用户可点击的各个图像区域

    ​ （rect、circle、poly、default）

  4. img元素添加usemap属性，这个属性的值必须是一个#号串名称引用，这样能把map元素与图像关联

  5. iframe元素局部属性：scr、srcdoc、name、width、height、sandbox、seamless

  6. progress局部属性：value、max、form

  7. meter局部属性：value、min、max、low、high、optimum、form

  8. 嵌入音频和视频（audio、video、source、track）

  9. 嵌入图形：canvas

Python基础知识点总结
Python全栈系列
08-25 8万+
本文包括python基本知识：简单数据结构，数据结构类型（可变：列表，字典，集合，不可变：数值类型，字符串，元组），分支循环和控制流程，类和函数，文件处理和异常等等。
读书笔记∣元数据：用数据的数据管理你的世界 Ch.3-4
女王的code
09-14 2617
第三章 描述性元数据 1、都柏林核心元数据元素集
元数据
litao106的博客
03-16 2386
一、简介 （一）概念 元数据是描述数据的数据，主要用于描述数据属性（property）的信息，包括数据存储位置、历史数据、资源查找、文件记录等功能。 （二）来源 随着信息技术发展，用户需求也在不断发生变化，如何构造一个随着需求改变而平滑变化的软件，是软件工程领域一个重要问答题，传统考文档的方式是云云不够的。平滑变化的核心是数据能够平滑，即当前所谓的元数据。元数据可以整合整个业务的工作流、数据流和信息流，使得系统不依赖特定的开发人员，从而实现系统可扩展性。 （三）历史 传统针对数据的管理，包括几类： 1.数
html5学习19：嵌入内容
八十岁老将的博客
02-08 309
1、嵌入图像 img元素允许我们在HTML文档里嵌入图像。 属性：src,alt,height,width,usemap,ismap <img src="te.png" alt="text image" width="200" height="200"/> src属性指定了图像的URL，alt定义了img元素的备用内容。图像无法显示的时候就呈现alt里面的内容。 1.1 在超链接里嵌入图像 img元素的一个常见用法是结合a元素（第8章已介绍过)创建一个基于图像的超链接。它类似表单里基于图像的提
SVG 形状元素（rect、circle、ellipse、line、polyline、polygon、path）
热门推荐
司马懿的西山居
11-25 1万+
SVG有一些预定义的形状元素 矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path> 矩形 <rect> <rect> 用于创建 矩形 和 圆角矩形 （x，y）是矩形左上角坐标，默认是（0，0） （width，height）是矩形的宽度和高度 （rx，ry）是矩形圆角的水平半径和垂直半径 <s
HTML基础知识总结
qq_40046544的博客
11-14 4935
HTML 是用来描述网页地一种语言。HTML 指的是超文本标记语言（Hyper Text Markup Language）HTML 不是一种编程语言，而是一种标记语言（markup language）标记语言是一套标记标签（markup tag）HTML 使用标记标签来描述网页声明必须是 HTML 文档的第一行，位于 html 标签之前。声明不是 HTML 标签；它是指示 web 浏览器使用哪个 HTML 版本进行编写的指令。
HTML基础知识点
qq_40046544的博客
07-27 9203
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
HTML基础知识点总结
weixin_64704029的博客
07-28 2432
html知识点
HTML基础知识（超详细！）
qq_60950941的博客
04-18 6481
本文全面介绍了html的标签以及新增的html5标签，可以帮助人们在最短的时间里打下基础
HTML基础知识点大全
m0_69674158的博客
05-04 7095
一、什么是HTML HyperText Markup Language，即超文本标记语言 二、第一个HTML <！doctpye html> <html> <head></head> <body></body> <html> 三、常用的标签🀄️🀄️🀄️ 1⃣️p 标签 ，段落标签，占整行 2⃣️img 图片标签： ①src 图片路径：绝对路径http://xxx.xx/xx/x.jpg 相对路径..
html基础知识学习PPT4
07-27
html基础知识学习PPT4html基础知识学习PPT4html基础知识学习PPT4html基础知识学习PPT4html基础知识学习PPT4html基础知识学习PPT4html基础知识学习PPT4
"HTML基础知识与标签讲义：初学者必备资料
HTML基础知识点汇总以及HTML基本标签汇总讲义是一份非常重要的资料，即使只有短短几页，但它包含了HTML所有的标签，对初学者来说是必不可少的。在互联网风行的今天，Web页面作为展现互联网风采的重要载体，受到了...
html基础知识选择题,HTML笔试题目(附答案)HTML基础知识笔试题目(附答案).pdf
weixin_39877805的博客
06-04 2615
1、{HTML 题目 } 在 HTML页面中制作一个图像，想要在鼠标指向这个图像时浮出一条提示信息，应该使用的参数是 :( C ) ( 选择 1 项 )A) POP B) SRC C) ALT D) MSG2、{HTML题目 } 在页面中看不见的表单元素是那种？ ( C ) (选择 1 项)A) B )C) D )3、(HT...
Jenkins中HTML文件显示样式问题解决方案
weixin_46903933的博客
07-25 193
Jenkins中HTML文件样式失效问题通常由CSP安全策略导致。推荐解决方案包括：1) 将CSS样式直接内联到HTML元素中；2) 添加CSP meta标签；3) 修改Jenkins系统设置。内联样式方案最安全稳定，无需修改Jenkins配置。其他方法还包括处理缓存问题和确保文件完全生成。综合使用内联样式和CSP meta标签可获得最佳效果。
vue3 antd modal对话框里的前端html导出成pdf并下载
lfYexun的博客
07-23 234
本文介绍了使用html2canvas和jspdf将HTML内容导出为PDF的实现方法。首先安装依赖包，创建exportToPDF工具函数处理分页渲染和尺寸转换，通过循环截取DOM内容并添加到PDF文档。在Vue组件中通过ref获取目标元素并调用导出方法，同时提示跨域图片需要后端转发或转为base64格式。该方案支持自定义页面边距和像素转换系数，可生成高质量的PDF文档。
html消息提示框封装，默认，失败，警告，成功四个状态
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
07-25 198
该代码实现了一个消息提示弹窗组件，支持四种样式（默认、成功、失败、警告）。通过闭包封装了createMessageElement和showMessage方法，根据传入类型动态设置背景色、边框色、文字颜色及图标。提示框具备自动消失功能（默认1秒），支持z-index层级递增和动画过渡效果。调用方式为message.none()/info()/error()/success()，可传入内容和显示时间。组件会自动清除上一个提示框，确保界面整洁。
HTML 常用标签速查表
最新发布
m0_60525421的博客
07-25 142
本文提供了一个HTML常用标签速查表，分为结构类、文本与标题、富文本、外部资源、表单和语义化标签六大类。包含基本标签如<html>、<head>、<body>，文本标签如<h1>-<h6>、<p>，富文本标签如列表、表格，以及HTML5新增的语义化标签<header>、<nav>等。每个标签都配有简要说明，方便开发者快速查阅和掌握HTML常用标记语言。
Python Requests-HTML库详解：从入门到实战
Dxy1239310216的博客
07-25 216
Requests-HTML是一个集网络请求与HTML解析于一体的Python库，它结合了Requests的易用性和Parsel的选择器功能，并内置JavaScript渲染引擎。该库支持GET/POST请求、CSS/XPath选择器、动态页面渲染、表单提交等核心功能，特别适合现代动态网页抓取。文章详细介绍了安装使用、基础操作、高级特性（如智能编码检测、连接池优化）、实战案例（豆瓣电影数据抓取）以及性能优化建议，并解答了常见问题。最新版本v0.10.0新增WebAssembly支持，优化了CSS选择器性能40%
HTML基础知识速览：文档结构与常用标签
"该文档是关于HTML基础知识点的总结，主要涵盖了HTML文档的基本结构、标题标签、文字属性、特殊符号、行控制、图片插入以及文字布局等方面的内容。适合初学者学习和参考。" HTML（HyperText Markup Language）是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值