HTML5学习笔记(一)

news2024/10/7 11:27:59

XHTML,全称“EXtensible HyperText Mark-up Language(扩展的超文本标记语言)”,它是XML风格的HTML4.01,我们可以称之为更严格、更纯净的HTML4.01。
HTML语法书写比较松散,比较利于开发者编写。但是对于机器如电脑、手机等来说,语法越松散,处理起来越困难。因此,为了让机器更好地处理HTML,才在HTML的基础上引入了XHTML。
HTML指的是HTML4.01,XHTML是XML风格的HTML4.01,它是HTML的过渡版本。而HTML5指的是下一代HTML,也就是HTML4.01的升级版。

html5特点


1.文档类型简写

<!DOCTYPE html>

2.字符编码简写

<meta charset="utf-8" />

3.标签不再区分大小写
4.允许属性值不加引号
5.允许部分属性的属性值省略

<input type="text" readonly/>
<input type="checkbox" checked/>

HTML5除了新增部分标签之外,还增加了大量新技术:
▶ 视频音频
▶ 元素拖放
▶ 本地存储
▶ 文件操作
▶ 地理位置

HTML5使得HTML从一门“标记语言”转变为一门“编程语言”。

新增结构元素

在HTML5中,新增了一组结构元素,以帮助完善页面的语义化SEO(即搜索引擎优化)。
HTML5新增的主要结构元素有6个:header、nav、article、aside、section、footer。

header元素一般用于3个地方:页面头部、文章头部(article元素)和区块头部(section元素)。
nav元素一般用于3个地方:顶部导航、侧栏导航和分页导航。
article元素一般只会用于一个地方:文章内容部分。
aside元素一般用于表示跟周围区块相关的内容。
section元素一般用于某一个需要标题内容的区块。如果页面某个区块不需要标题,直接使用div元素就可以了。如果需要标题,则建议使用section元素。
footer元素一般用于两个地方:一个是“页面底部”,另一个是“文章底部”。

表单的扩展

HTML5在HTML4.01的基础上,对表单进行了以下两个方向的扩展。
▶ 新增input元素类型。
▶ 新增其他表单元素。

新增input元素类型

 当type属性取值为“range”时,我们可以通过拖动滑动条获取某一个范围内的数字。

<input type="range" min="最小值" max="最大值" step="间隔数"/>

number类型跟range类型功能非常相似,都是获取某一个范围内的数字。不过两者的外观不一样,其中number类型使用的是“微调按钮”,而range类型使用的是“滑块”。

<input type="number" min="-10" max="10" step="5" value="-10"/>

当type属性取值为“color”时,我们可以直接使用浏览器自带的取色工具来获取颜色值。

<input type="color" value=""/>

value属性用于设置颜色初始值,格式必须是十六进制颜色值如#F1F1F1,不能是关键字(如black)和rgba颜色(如rgba(255, 255, 255, 0.5))。

当type属性取值为“date”时,我们可以直接使用浏览器自带的日历工具来获取日期(年、月、日)。

<input type="date" value=""/>

新增表单元素

HTML5还新增了3个表单元素:output、datalist、keygen。
我们可以使用output元素来定义表单元素的输出结果或计算结果。

<output></output>

output元素是一个行内元素,只不过它比span元素更具有语义化。output元素一般放在form元素内部,并且配合其他表单元素(如文本框等)来使用。

var output = document.getElementsByTagName("output")[0];

在HTML5中,我们可以使用datalist元素来为文本框提供一个可选的列表。

<input type="text" list="" />
<datalist id="">
  <option label="" value=""></option>
  <option label="" value=""></option>
  <option label="" value=""></option>
</datalist>

如果想要把datalist绑定到某个文本框,需要设置该文本框的list属性值等于datalist的id值。

我们可以使用keygen元素来生成页面的密钥。如果表单内部有keygen元素,则提交表单时,keygen元素将生成一对密钥:一个保存在客户端,称为“私密钥(Private Key)”;另一个发送到服务器,称为“公密钥(Public Key)”。

keygen元素主要是作为客户端安全保护的一种方法,不过它在各大浏览器中的兼容性很差。

增加语义化元素

HTML5还增加了大量语义化元素,其中最重要的有以下6个。
▶ address
▶ time
▶ progress
▶ meter
▶ figure和figcaption
▶ fieldset和legend

在HTML5中,我们可以使用更具有语义化的address元素来为“整个页面”或者“某一个article元素”添加地址信息(电子邮件或真实地址)。
当address元素应用于整个页面时,它一般放于整个页面的底部(footer元素内部),表示该网站所有者的地址信息。

在HTML5中,我们可以使用更具有语义化的time元素来显示页面中的日期时间信息。datetime属性取值是一个时间,可以省略不写。datetime属性中的时间是提供给搜索引擎看的,而time标签内的时间是提供给用户看的,两者内容可以一样也可以不一样。time元素与datetime属性的关系,有点类似于img元素与alt属性的关系。

<time datetime="时间"></time>

在HTML5中,我们可以使用progress元素以进度条的形式来显示某一个任务的完成度,如上传文件、下载文件等。

<progress max="最大值" value="当前值"></progress>

在HTML5中,我们可以使用进度条的形式来显示数据所占的比例。

<meter min="最小值" max="最大值" value="当前值"></meter>

▶ meter元素一般用于显示静态数据比例。所谓的静态数据,指的是很少改变的数据,例如男生人数占全班人数的比例。
▶ progress元素一般用于显示动态数据比例。所谓“动态数据”,指的是会不断改变的数据,例如下载文件的进度。

HTML5中,引入了figure和figcaption这两个元素来增强图片的语义化。figure元素用于包含图片和图注,figcaption元素用于表示图注文字。在实际开发中,对于“图片+图注”效果,我们都建议使用figure和figcaption这两个元素来实现,从而使得页面的语义更加良好。

<figure>
  <img src="" alt=""/>
  <figcaption></figcaption>
</figure>

在HTML5中,我们还可以使用fieldset元素来给表单元素进行分组。其中,legend元素用于定义某一组表单的标题。

<fieldset>
  <legend>表单组标题</legend>
  ……
</fieldset>

使用fieldset和legend有两个作用:增强表单的语义;定义fieldset元素的disabled属性来禁用整个组中的表单元素。

对已有元素的改良

除了新增元素,HTML5还对已有的某些元素进行了改良,其中改良的元素有以下4种。
▶ a
▶ ol
▶ small
▶ script

a元素的新增属性


HTML5为a元素新增了3个属性:

<a href="文件地址" download="新文件名"></a>

download属性用于为文件取一个新的文件名。如果download属性值省略,则表示使用旧的文件名。下载该图片,并且图片名字换成新的文件名beauty.png。

<a href="img/princess.png" download="beauty.png">下载图片</a>

ol元素的新增属性

HTML5为ol元素新增了一个reversed属性,用于设置列表顺序为降序显示。

small元素

在HTML5中,我们可以使用更具有语义化的small元素来表示“小字印刷体”的文字。small元素一般用于网站底部的免责声明、版权声明等。

<small>你的内容</small>

script元素的新增属性

HTML5为script元素新增了两个属性:defer和async。这两个属性的作用都是加快页面的加载速度,两者区别如下。

▶ defer属性用于异步加载外部JavaScript文件,当异步加载完成后,该外部JavaScript文件不会立即执行,而是等到整个HTML文档加载完成才会执行。
▶ async属性用于异步加载外部JavaScript文件,当异步加载完成后,该外部JavaScript文件会立即执行,即使整个HTML文档还没有加载完成。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/30237.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

计算机的种类

文章目录计算机的种类一&#xff0c;模拟计算机二&#xff0c;数字计算机三&#xff0c;混合计算机计算机的种类 《计算机是什么》一节中讲到&#xff0c;根据不同计算机的尺寸&#xff0c;可以将计算机分为微型计算机、小型计算机、大型计算机、工作站和超级计算机5类。实际上…

string类(一)

目录 一、 string类对象的常见构造 二、string类对象的容量操作 2.1 size(返回字符串有效字符长度) 2.2 capacity(返回空间总大小) 2.3 reserve扩空间​编辑 2.4 resize初始化不会覆盖本来的空间​编辑 2.5 对于test_string7中每一句代码进行调试运行 三、string类对象的…

云中网络的隔离:GRE、VXLAN

对于云平台中的隔离问题&#xff0c;前面咱们用的策略一直都是 VLAN&#xff0c;但是我们也说过这种策略的问题&#xff0c;VLAN 只有 12 位&#xff0c;共 4096 个。当时设计的时候&#xff0c;看起来是够了&#xff0c;但是现在绝对不够用&#xff0c;怎么办呢&#xff1f; …

真的,Java并发编程基础入门看这个就够了

Java并发编程学习之02Java并发编程入门指南 真的&#xff0c;Java并发编程入门看这个就够了1. Java天生多线程2. Java启动多线程实现方式2.1 实现代码2.2 Thread和Runnable的区别2.3 start和run方法的区别3. Java如何停止线程呢3.1 已弃用方法3.2 推荐使用4. 守护线程5. 优先级…

JVM的GC算法CMS和G1

GC算法 -XX:UseSerialGC 新生代和老年代都使用串行收集器 串行收集器使用单线程并且是独占式的垃圾回收 -XX:UseParNewGC 新生代使用ParNew垃圾回收器&#xff0c;老年代使用串行收集器 ParNew是串行收集器的多线程版本&#xff0c;只工作在新生代&#xff08;可以见名知…

jmeter逻辑控制器和定时器

常用逻辑控制器和定时器一、认识逻辑控制器一、作用&#xff1a;⼀个事务会包含并请求二、常见逻辑控制器介绍1、simple controller2、recorder controller3、loop controller4、random controller5、if controller6、module/include controller7、transaction controller三、J…

A Survey on Bias and Fairness in Machine Learning 阅读笔记

论文链接 Section 1 引言 1. In the context of decision-making, fairness is the absence of any prejudice or favoritism toward an individual or group based on their inherent or acquired characteristics. 公平是指基于个人或群体的固有或后天特征而对其没有任何偏…

【sfu】rtc 入口

rtc 入口 入口是 rtc adpter 类。 准备 call模块的所有资源 通过call模块使用webrtc内置 各类 rtcadpter的创建类rtcadpterfactory 是外部创建的 创建adapterfactory的外部类是peerconnection adapter_factory_ = std::move(std::make_unique

融云全球社交泛娱乐洞察,互联网社交换挡期的「社区产品」机遇

一切应用都将社交化。关注【融云全球互联网通信云】回复【融云】抽取高颜值大容量高端可乐保温杯哦~ 融入社交能力&#xff0c;创造增长奇迹。激活用户在不同场景的社交需求&#xff0c;让应用焕发新的生命力&#xff0c;也让“社交X”成为出海最大的浪。 《2022 社交泛娱乐出…

编译原理--基本块的划分

基本块的划分原则有4条 初始语句作为第一个基本块的入口遇到标号类语句&#xff0c;结束当前基本块&#xff0c;标号作为新基本块的入口&#xff08;标号不在当前基本块中&#xff0c;而是划到下一个基本块&#xff09;遇到转移类语句时&#xff0c;结束当前当前基本块&#x…

Java反序列化之CommonsCollections(CC1)分析篇

文章目录前言一、过程分析 1.入口点---危险方法InvokerTransformer.transform() 2.触发危险函数TransformedMap.checkSetValue() 3.AnnotationInvocationHandler类 4.ChainedTransformer类 5.ChainedTransformer类前言 本文包括&#xff1a;Java反序列化之CommonsCol…

3DMAX一键生成螺母和螺栓插件使用教程

插件介绍 3DMAX一键生成螺母和螺栓插件&#xff0c;用于创建精缰化的螺母和螺栓模型。这些模型是逼真的&#xff0c;只需单击一下即可生成。有许多参数可以定制模型的外观或尺寸。 主要功能 单击创建螺母、螺栓和垫圈在螺栓顶部创建文本标记&#xff08;商标&#xff09;直径…

关于不同长度PEG的丙炔:Pyrene-PEG2/PEG3/PEG4/PEG5-propargyl,1817735-33-3

Pyrene-PEG2-Propargyl中芘用于蛋白质构象和相互作用研究中的荧光探针&#xff0c;降冰片烯很容易与叠氮化物和四嗪反应&#xff0c;可用于用荧光团和功能分子标记细胞&#xff0c;亲水性 PEG 间隔臂可以增加水溶性。包括PEG2、PEG3、PEG4、PEG5等不同长度的PEG。 1、Pyrene-PE…

大数据:Shell的操作

文章目录HDFS常用命令一、创建目录1、创建单层目录2、创建多层目录查看目录三、上传本地文件到HDFS四、查看文件内容五、下载HDFS文件到本地六、删除HDFS文件七、删除HDFS目录HDFS常用命令 启动Hadoop集群命令&#xff1a;start-all.sh 一、创建目录 1、创建单层目录 命令…

Spring Boot Auto-Configuration

Spring 自定义Auto-Configuration Spring Boot 可以根据classpath中依赖关系自动装配应用程序。通过自动装配机制&#xff0c;可以使开发更快、更简单。今天&#xff0c;学习下如何在Spring Boot 中创建自定义 auto-configuration。 代码运行环境 JDK17MYSQL8源码地址 Mave…

[附源码]Python计算机毕业设计大学生心理健康管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

VSCODE编译阿里云HaaS程序时遇到Win32file找不到错误怎么办?

摘要&#xff1a;本文介绍DLL load failed while importing win32file&#xff1a;找不到指定的程序&#xff0c;这个错误的解决方法。使用vscode拉取阿里云HaaS物联网开发案例代码时&#xff0c;可能会遇到编译出错的情况&#xff0c;可能会遇到一些意外的问题&#xff0c;并非…

通过Native Memory Tracking查JVM的线程内存使用(线上JVM排障之九)

很多时候会面对线上内存使用很多,特别是本地内存怎么用的说不太清,就是每一块内存总和和总的Java线程占用内存不匹配。 很多时候如果dump出来内存也没有太大的作用,因为本地内存是看不到。本地内存有很多是线程占用的空间。 以下图为例,这是一个线上的服务的JVM各块内存使…

YOLOV5在deepstream6.1.1上应用

目录 0.前言 1.Yolov5模型 1.1模型生成 1.2模型转换 1.2.1 yolov5模型转换为onnx 1.2.2 onnx模型转换为engine 2.deepstream介绍 2.1简介 2.2安装 2.2.1 dGpu 2.2.2 Jetson 2.3使用方法 3.Yolov5模型在deepstream6.1.1上应用 3.1Yolov5输出与deepstream对接 3.1…

[附源码]java毕业设计学生信息管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…