![](https://img-blog.csdnimg.cn/20210917145841510.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML5
文章平均质量分 64
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。
泽哥ins
Java开发工程师:田根旺️
展开
-
(26)HTML兼容写法
html中可以使用条件注释的方法,对IE进行特殊处理。条件注释通过注释演变而来:普通的浏览器认为内部内容为注释,不进行加载,而指定的浏览器会正常加载代码内容。其中:书写时,两个标签前面都要加!,中括号内的每个单词必须用空格分隔。单词意思:if 如果 endif 结束如果 lte 比较符号,小于等于 IE 浏览器的品牌名称 9表示版本。比较符号:lt less than 小于lte less than or equal 小于等于gt great...原创 2021-12-28 15:56:33 · 744 阅读 · 0 评论 -
(25)HTML5之<canvas>和<svg>标签
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的。一、SVGSVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。二、Canvas画布Canvas 通过 JavaScript 来绘制 2D 图形。Canvas 是逐像素进行渲原创 2021-12-20 11:59:50 · 1980 阅读 · 0 评论 -
(24)HTTP 方法:GET 对比 POST
两种最常用的 HTTP 方法是:GET 和 POST。什么是 HTTP ?超文本传输协议(HTTP)的设计目的是保证客户端与服务器之间的通信。HTTP 的工作方式是客户端与服务器之间的请求-应答协议。web 浏览器可能是客户端,而计算机上的网络应用程序也可能作为服务器端。举例:客户端(浏览器)向服务器提交 HTTP 请求;服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。两种 HTTP 请求方法:GET 和 POST在客户机和服务器之间进行请求-响应时,两种原创 2021-12-20 11:29:10 · 204 阅读 · 0 评论 -
(23)HTTP 状态消息
当浏览器从 web 服务器请求服务时,可能会发生错误。以下列举了有可能会返回的一系列 HTTP 状态消息:1xx: 信息消息: 描述: 100 Continue 服务器仅接收到部分请求,如果服务器没有拒绝该请求,客户端应该继续发送其余的请求。 101 Switching Protocols 服务器转换协议:服务器将遵从客户的请求转换到另外一种协议。 103 Checkpoint 用于 PUT 或者 POST 请求恢复失败时的恢复请求建议。 2xx: 成功原创 2021-12-20 11:27:41 · 71 阅读 · 0 评论 -
(22)HTML Emoji
Emoji 是来自 UTF-8 字符集的字符: ???? ???? ????。表情符号(英语:emoji,日语:絵文字/えもじ emoji),是使用在网页和聊天中的形意符号,最初是日本在无线通信中所使用的视觉情感符号(图画文字)。表情意指面部表情,图标则是图形标志的意思,可用来代表多种表情,如笑脸表示笑、蛋糕表示食物等。 Emoji 看起来像一张图片或图标,其实不是。Emoji 实际上是 UTF-8 (Unicode) 字符集上的字符。UTF-8 几乎涵盖了世界上所有的字符和符号。HTML原创 2021-12-20 11:13:02 · 584 阅读 · 0 评论 -
(21)H5之ruby标签
一、浏览器支持IE 9+、Firefox、Opera、Chrome 和 Safari 支持 <ruby> 标签。注释:IE 8 或更早版本的 IE 浏览器不支持 <ruby> 标签。二、标签定义及使用说明<ruby> 标签定义 ruby 注释(中文注音或字符)。在东亚使用,显示的是东亚字符的发音。将 <ruby> 标签与<rt>和<rp>标签一起使用:<ruby> 元素由一个或多个需要解释/发音的.原创 2021-12-20 10:20:33 · 218 阅读 · 0 评论 -
(20)HTML5 <summary>标签
一、浏览器支持二、标签定义及使用说明<summary> 标签为<details>元素定义一个可见的标题。 当用户点击标题时会显示出详细信息。 它是HTML5 中的新标签。三、提示和注释注释:<summary> 元素应该是 <details> 元素的第一个子元素。四、示例<!DOCTYPE html><html lang="en"><head> <meta charset="UT..原创 2021-12-20 10:14:41 · 511 阅读 · 0 评论 -
(19)HTML5 <progress> 标签
一、浏览器支持IE 10、Firefox、Opera、Chrome 和 Safari 6 支持 <progress> 标签。注:IE 9 或者更早版本的 IE 浏览器不支持 <progress> 标签。二、标签定义及使用说明<progress> 标签定义运行中的任务进度(进程)。它是H5新增的标签。三、提示和注释提示:请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。注释:<progress&原创 2021-12-20 09:56:58 · 526 阅读 · 0 评论 -
(18) HTML面试题集锦2
一 HTML 1.H5新特性 1.H5的新特性有哪些 1.画布(Canvas) API2.地理(Geolocation) API3.音频、视频API(audio,video)4.localStorage和sessionStorage5.webworker, websocket6.header,nav,footer,aside,article,section7.web worker是运行在浏览器后台的js程序,他不影响主程序的运行,是另开的一个js线程,可以用这个线程执行复原创 2021-12-16 20:53:57 · 2017 阅读 · 0 评论 -
(17)HTML标准文档流
在我们遇到的 HTML 元素中,有的标签元素如 <div>、<p> 等在浏览器中加载时必须独自占满一行,有的标签元素如 <a> 、<span>等则不会独占一行,原因是什么?一、什么是标准文档流?标准文档流,指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式。前面内容发生了变化,后面的内容位置也会随着发生变化。HTML就是一种标准文档流文件。HTML中的标准文档流特点通过两种方式体现:微观现象和元素等级。1.1微观现象:①.原创 2021-11-29 20:27:44 · 1739 阅读 · 0 评论 -
(16)WEB前端开发规范之HTML规范
一、WEB前端开发规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档: 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发: 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改。二、WEB前端基本准则符合web标准, 语义化html,遵循内容(HTML)、显示(CSS)、行为(JavaScript)分离的代码组织模式。 代码格式化,保持干净整洁。 换行必须缩进一个tab。 编写所有前台页面时,请使用已有原创 2021-11-22 10:02:16 · 940 阅读 · 0 评论 -
(15)HTML面试题集锦
一、如何理解HTML语义化?用正确的标签做正确的事情。HTML结构,用对应的有一定语义的标签表示,让HTML标记语言容易阅读,书写。那么为什么语义化?a. 为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构 b. 用户体验:例如title、alt用于解释名词或解释图片信息的标签尽量填写有含义的词语、label标签的活用; c. 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重; d. 便于团队开发和维护,.原创 2021-11-19 15:11:09 · 667 阅读 · 0 评论 -
(14)H5新增表单属性
一、required属性演示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ..原创 2021-11-19 12:03:41 · 429 阅读 · 0 评论 -
(13)<datalist> 标签
一、<datalist>标签的作用<datalist> 标签规定了<input> 元素可能的选项列表。 <datalist>元素包含了一组<option>元素,这些元素表示预定义可选值,在<input>元素输入过程中,会自动响应<option>元素的值。 绑定的<input>标签必须设置list 属性,属性值等于<datalist>标签的id 属性值。二、<datalist>标签原创 2021-11-19 10:19:18 · 5446 阅读 · 0 评论 -
(12)H5新增语义化标签布局案例
一、标签语义化以前制作网页布局,我们基本用div来做。div就是一个普通的块级标签,对于搜索引擎来说,是没有语义的。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="原创 2021-11-18 11:07:10 · 1574 阅读 · 1 评论 -
(11)多媒体标签
多媒体标签包含两个,音频:<audio> 视频:<video>使用它们可以很方便的在页面中嵌入音频和视频,而不再去使用落后的flash和其他浏览器插件。一、音频标签<audio><audio>是一个双标签,它同图片一样,需要使用src属性设置音频查找的路径,支持音频文件的格式有:.mp3、.ogg、.wav后缀的文件。如下是<audio>标签引入不同的音频文件格式,对应兼容不同的浏览器表。如下是兼容写法:(推荐用)&.原创 2021-11-16 13:52:29 · 1207 阅读 · 0 评论 -
(10)<label>标签的用途
一、<label>标签的作用所有的表单元素都可以通过绑定其他内容去扩大触发点击范围,也就是<label>标签它的作用就是扩大了选区范围,可以不只是单击表单元素才能被选中,还可以点击表单元素对应的文字内容进行选中该表单元素,浏览器会自自动将焦点转到和标签相关的表单控件上,帮助表单元素定义标注(标记)。二、绑定方法1.绑定方法一绑定步骤:1.给表单元素设置id属性<form> <input type="radio" name="原创 2021-11-16 09:21:55 · 2736 阅读 · 0 评论 -
(9)<textarea>标签在mac环境下的问题
一、问题:mac环境下<textarea>效果有误差?解决方法:在真正的工作中,我们不会利用<textarea>标签的cols和rows属性去设置文本框的宽高度,我们一般会利用css设置元素的样式,使用css的width和height去设置它的宽高度,这样不会保持默认的样式的加载,不管使用什么操作系统,它的宽高度尺寸永远是一样的。二、如何禁止文本框被用户拖拽?这个文本框它的尺寸宽高度默认是可以被用户进行拉伸拖拽的,这样用户如果拉伸较大,导致网页就不美观了,所以我们为了避免原创 2021-11-11 16:47:12 · 293 阅读 · 0 评论 -
(8)HTML注释
一、什么是HTML注释HTML注释:就是自己标记的信息,它是我们自己看到的信息,用户在网页中无法看到,是用来给我们自己看的。那么注释的好处是什么呢?添加适当的注释方便我们后期维护,比如我们以后进入企业中,会遇到大量的网页和代码,那么我们再运行时候,某个网页的某个区域出现问题了,我们如果再代码中找到它非常困难,看起来不优雅,不容易维护,都是代码。所以我们可以适当加一些注释,每个功能,每个布局的区块都可以给他加一个注释,方便我们以后的维护。二、如何使用HTML注释HTML注释语法:<!..原创 2021-11-11 16:35:53 · 259 阅读 · 0 评论 -
(7)<a>标签之锚点和回到顶部功能
一、什么是锚点?这里,我们拿京东官网距离,如下图可以看到京东官网首页右侧的导航条选项卡,当我们点击其中一个选项卡的时候,他会自动给你定位跳到当前页的符合该选项卡标题的位置,省去我们从上往下鼠标滚轮一直翻滚的操作,节省了用户的时间,提高了用户体验度效率。二、如何实现锚点?首先我们写一个内容,并且写一个<a>标签再内容的上方,该超链接不需要填写内容,使用空的即可,给该标签添加一个name属性。然后写一个<a>标签,作为类似上边所说的京东的选项卡一样,我们使用a标签的.原创 2021-11-11 15:16:04 · 1668 阅读 · 0 评论 -
(6)<a>标签如何实现点击既不刷新也不跳转的功能
一、<a>标签跳转页面相信大家对于<a>标签跳转到一个新网页的写法不陌生吧,这里如下举个跳转到百度的例子。<a href="https://www.baidu.com">点击跳转到百度</a>二、a标签之js调用方式1:调用js的某个方法,不建议使用代码书写方式一:<a href="javascript:alert(111);">点击</a>代码书写方式二:<a href="javascript:原创 2021-11-11 11:50:17 · 5341 阅读 · 0 评论 -
(5)容器级标签和文本级标签
划分依据:根据标签内部可以存放的元素内容不同进行划分,它与CSS样式无关。1.什么是容器级标签?标签内部可以存放任意内容,包含容器级的标签。比如<h1>,<div>标签等。2.什么是文本级标签?标签内部只能存放文字或者类似文字的内容,比如存放图片、表单元素等。例如<p>标签。示例:...原创 2021-11-05 21:02:35 · 641 阅读 · 0 评论 -
(4)HTML标签补充和HTML转义字符
一、HTML标签1.超链接<a>标签(1)普通的超级链接:<a href="指向的链接地址" target="_blank|_self|_top|_parent">百度</a>(2)锚点:<a href="网址#ID名">锚点</a>锚点要配合页面上的一个ID名来实现这个功能,同时还必须有滚动条才能看到效果。锚点找到的位置,浏览器默认是将其放在第一行的。(3)邮件客户端自动调用:<a href="mailto:tgw18原创 2021-11-05 10:24:18 · 630 阅读 · 0 评论 -
(3)<meta>标签
SEO优化密切相关三大标签1.<meta name="keywords" content="CSDN">2.<meta name="description" content="CSDN是一个程序员博客平台。">3.<title></title>1. 避免IE使用兼容模式<meta http-equiv="X-UA-Compatible" content="IE=edge">2.为移动设备添加 viewport视口,适用于原创 2021-11-04 21:01:40 · 217 阅读 · 0 评论 -
(2)HTML基本标签
一、认识纯文本格式1.什么是纯文本格式?纯文本格式,就是没有任何文本修饰的,没有任何粗体,下划线,斜体,图形,符号或特殊字符及特殊打印格式的文本,只保存文本,不保存其格式设置。2.纯文本格式和富文本格式的对比?纯文本格式:最常见的是.txt文件。在存储和传输过程中,只能保存文字,不能保存格式。富文本格式:与纯文本对应,最常见的是.rtf文件,类似.doc文件,内部可以保存文本的样式、图片等。从如下图我们可以看到,富文本格式占用大小大于纯文本格式的文件,所以纯文本格式更利于传输,因为它原创 2021-11-04 17:01:06 · 978 阅读 · 0 评论 -
(0)前端开发介绍
一、什么是前端开发?前端开发是创建Web页面或app等前端界面呈现给用户的过程 核心技术:HTML、CSS、JavaScript以及衍生出的各种技术、框架等。 前端开发其实算半个程序员,因为它不是一门编程语言,但也是我们做IT开发中必不可少的一门岗位技术。二、网页案例1.早期的网页我们可以看到早期的网页都是满屏的文字,看起来不美观,功能少,速度慢。2.现在的网页如今现在的网页内容丰富,动态效果炫酷,功能更加强大,用户体验度更加友好。随着互联网的不断发展,对于前端的技术也是更新非原创 2021-10-31 21:06:01 · 2124 阅读 · 3 评论 -
(1)HTML5概述
一、HTML简介HTML英文全称: Hyper Text Markup Language 中文全称: 超文本标记语言 HTML 是制作网页最基本的语言 用该语言编写的文件,以.html或者.htm为后缀 由浏览器解释执行 HTML的基本规则就是用“标记语言” ---- 成对尖括号组成的标签元素来描述网页内容如何在浏览器中显示。二、网页的构成三、网页的本质四、什么是HTML5? h5是html5的简称 html5是html的第5个版本,2014年W3C (万维网联...原创 2021-10-31 19:53:17 · 3039 阅读 · 0 评论