Web前端开发 - 1 - HTML5基础

HTML5基础

    • 1. HTML文档结构和基本语法
    • 2. HTML4元素(91)
      • 1. 结构元素
      • 2. 内容元素
      • 3. 修饰元素
    • 3. HTML4属性
      • 1. 核心属性
      • 2. 语言属性
      • 3. 键盘属性
      • 4. 内容属性
      • 5. 其他属性
    • 4. HTML5元素
      • 1. 结构元素
      • 2. 功能元素
      • 3. 表单元素
    • 5. HTML5属性
      • 1. 表单属性
      • 2. 链接属性
      • 3. 其他属性
      • 4. HTML5全局属性
    • 6. 其他

1. HTML文档结构和基本语法

  • 概念： (HyperText Marked Language) 超文本标记语言
  • 本质： 用HTML书写的一种纯文本文件
  • 工具：Dreamweaver 网页编辑器 视觉化网页开发工具 ； Hbuilder 等

HTML5文档的结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"> <!-- width=device-width ：表示宽度是设备屏幕的宽度initial-scale=1.0：表示初始的缩放比例minimum-scale=0.5：表示最小的缩放比例maximum-scale=2.0：表示最大的缩放比例user-scalable=yes：表示用户是否可以调整缩放比例  --><title>Document</title>
</head>
<body><!-- 主体信息 -->
</body>
</html>

2. HTML4元素(91)

HTML 参考手册- (HTML5 标准)

1. 结构元素

用于构建网页文档的结构，多指块状元素

<div>	定义文档中的节。在文档中定义一块区域，即包含框、容器
<ul>	定义一个无序列表
<ol>	定义一个有序列表
<li>	定义一个列表项
<dl>	定义一个定义列表
<dt>	定义一个定义定义列表中的项目。
<dd>	定义定义列表中项目的描述。
<del>	定义被删除文本。
<ins>	定义被插入文本。
<h1> to <h6>	定义 HTML 标题
<p>	定义一个段落
<hr>	定义水平线。

2. 内容元素

内容元素定义了元素在文档中表示内容的语义，一般指文本格式化元素，多是行内元素

<span>	定义文档中的节。
<a>	    定义一个链接
<abbr>	定义缩写
<address>	定义文档作者或拥有者的联系信息
<dfn>	定义定义项目，术语，以斜体显示
<kbd>	定义键盘文本
<samp>	定义计算机代码样本。
<var>	定义文本的变量部分。
<tt>	定义打字机文本。
<code>	定义计算机代码文本
<pre>	定义预格式文本，保留源代码格式
<blockquote>	定义长的引用
<cite>	定义引用(citation)
<q>	    定义短的引用。
<strong>	定义强调文本。
<em>	定义强调文本

3. 修饰元素

定义文本的显示效果

<b>	    定义粗体文本。
<i>	    定义斜体文本。
<big>	HTML5不再支持。 定义大号文本。
<small>	定义小号文本。
<sub>	定义下标文本。
<sup>	定义上标文本。
<bdi>	设置文本，使其脱离其父元素的文本方向设置。
<bdo>	定义文本的方向。
<br>	定义简单的折行。
<u>	    定义下划线文本。
已废除：
<center>	HTML5不支持，不赞成使用。定义居中文本。
<font>	HTML5不支持，不赞成使用。定义文字的字体、尺寸和颜色。
<s>		不赞成使用。定义加删除线的文本。
<strike>	HTML5不支持，不赞成使用。定义加删除线文本。

3. HTML4属性

1. 核心属性

基本属性，为大部分元素所拥有

class：定义类规则或样式属性
id：定义元素的唯一标识
style：定义元素的样式声明

2. 语言属性

定义元素的语言类型

lang：定义元素的语言代码或编码
dir：定义文本方向，包括ltr和rtl取值

3. 键盘属性

定义元素的键盘访问方法

accesskey：定义访问某元素的键盘快捷键
tabindex：定义元素的Tab键索引编号

4. 内容属性

alt: 定义元素的替换文本
title: 定义元素的提示文本
longdesc: 定义元素包含内容的大段描述信息
cite: 定义元素包含内容的引用信息
datetime: 定义元素包含内容的日期和时间

5. 其他属性

rel: 定义当前页面与其他页面的关系，表示从源文档到目标文档的关系
rev: 定义其他页面与当前页面的关系，表示从目标文档到源文档的关系
<a href="4-3.html" rel="prev">链接到集合中的前一个文档</a>

4. HTML5元素

1. 结构元素

<header>	定义一个文档头部部分
<footer>	定义一个文档底部
<section>	定义了文档的某个区域，内容区块，标识文档结构
<article>	定义一个与上下文不想管的独立内容
<aside>		定义article元素内容之外的、与article内容相关的辅助信息
<nav>		定义导航链接
<main>		表示网页中的主要内容
<figure>	一段独立的流内容，一般表示文档主体流内容中的一个独立单元。
可以使用figcaption元素为figure元素添加标题

2. 功能元素

<video>: 	定义视频
<audio>: 	定义音频
<embed>: 	用来插入各种多媒体，格式可以是Midi/Wav/AIFF/AV/MP3等
<mark>		定义带有记号的文本。请在需要突出显示文本时使用 <em> 标签。
<dialog>	定义对话框，比如提示框
<bdi>		设置文本方向，使其脱离其父元素的文本方向设置。
<figcaption>定义<figure> 元素的标题
<time>		定义日期或时间，或者两者。
<canvas>	定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形
<output>	定义不同类型的输出，比如脚本的输出。
<source>	为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<menu>		定义菜单列表，HTML4中不赞成使用。
<rp>		定义不支持 ruby 元素的浏览器所显示的内容。
<rt>		定义字符（中文注音或字符）的解释或发音。
<ruby>		定义 ruby 注释（中文注音或字符）。
<wbr>		规定在文本中的何处适合添加换行符。
<command>	定义用户可能调用的命令（比如单选按钮、复选框或按钮）。
<details>	定义了用户可见的或者隐藏的需求的补充细节。
<summary>	定义一个可见的标题。 当用户点击标题时会显示出详细信息。
<datalist>	定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen>	规定用于表单的密钥对生成器字段。
<progress>	定义运行中的进度（进程）。
<meter>		定义度量衡。仅用于已知最大和最小值的度量。
<track>		为诸如 video 元素之类的媒介规定外部文本轨道。

3. 表单元素

HTML5input类型
HTML5表单元素

<input type="tel" />
tel ： 表示必须输入电话号码的文本框
search ： 表示搜索文本框
url ： 必须输入URL地址的文本框
email ： 不需输入电子邮件地址的文本框
datetime ： 表示日期和时间文本框
date ： 日期文本框
month ： 月份文本框
week ： 周几文本框
time ： 时间文本框
datetime-local ： 表示本地日期和时间文本框
number ： 表示必须输入数字的文本框
range ：表示范围文本框
color ：表示颜色文本框

5. HTML5属性

1. 表单属性

HTML5表单属性

  • 为input(type=text)、select、textarea与button元素新增加autofocus属性。它以指定属性的方式让元素在画面打开时自动获得焦点。
  • 为input元素（type=text)与textarea元素新增加placeholder属性，它会对用户的输入进行提示，提示用户可以输入的内容。
  • 为input、output、select、textarea、button与fieldset新增加form属性，声明它属于哪个表单， 然后将其放置在页面上任何位置，而不是表单之内。
  • 为input元素（type=text）与textarea元素新增加required属性。该属性表示在用户提交的时候 进行检查，检查该元素内一定要有输入内容。
  • 为input元素增加 autocomplete、min、max、multiple、pattern和step属性。同时还有一个新的list元素与datalist元素配合使用。datalist元素与autocomplete属性配合使用。multiple属性允许在上传文件时一次上传多个文件。
  • 为input元素与button 元素增加了新属性formaction、formenctype、formmethod、formnovalidate与formtarget，它们可以重载form元素的action、enctype、method、novalidate与target属性。为fieldset元素增加了disabled属性，可以把它的子元素设为disabled（无效）状态。
  • 为input元素、button元素、form元素增加了novalidate属性，该属性可以取消提交时进行的有关检查，表单可以被无条件地提交。

2. 链接属性

  • 为a与area元素增加了media属性，该属性规定目标URI是为什么类型的媒介/设备进行优化 的，只能在href属性存在时使用。
  • 为area元素增加了hreflane属性与rel属性，以保持与a元素、link元素的一致。
  • 为link元素增加了新属性sizes。该属性可以与icon元素结合使用（通过rel属性)， 该属性指定关联图标（icon元素）的大小。
  • 为base元素增加了target属性，要目的是保持与a元素的一致性。

1.6.3 其他属性

  • 为ol元素增加属性reversed，它指定列表倒序显示。
  • 为meta元素增加charset属性，因为这个属性已经被广泛支持了，而且为文档的字符编码的指定提供了一种比较良好的方式。
  • 为menu元素增加了两个新的属性_tvne与bbelsbel屋性为菜单定义一个可见的标注，type属性让菜单可以上下文菜单、工具条与列表菜单3种形式出现。
  • 为style元素增加scoped属性，用来规定样式的作用范围，譬如只对页面上某个树起作用。
  • 为script元素增加 async属性，它定义脚本是否异步执行。
  • 为html元素增加属性manifest，开发离线Web应用程序时它与API结合使用，定义一个URL，在这个URL上描述文档的缓存信息。
  • 为iframe元素增加3个属性，即sandbox、seamless与sredoc，用来提高页面安全性，防止不信任的Web页面执行某些操作。

3. 其他属性

4. HTML5全局属性

HTML全局属性

HTML5新增8个全局属性：
contenteditable	规定是否可编辑元素的内容，布尔值属性
contextmenu	指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单【目前只有Firefox支持
data-*	用于存储页面的自定义数据
draggable	指定某个元素是否可以拖动
dropzone	指定是否将数据复制copy，移动move，或链接link，或删除【目前浏览器不支持
hidden		对元素进行隐藏。
spellcheck	是否对元素进行拼写和语法检查
translate	指定是否一个元素的值在页面载入时是否需要翻译，值为yes/no【目前浏览器无法正确支持

6. 其他

HTML特殊字符编码对照表

##空格符 &nbsp; 
要输入多个空格，可以交替使用“&nbsp”和“ ”（空格）

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

isinstance和type区别

isinstance和type区别

isinstance和type区别 在python中&#xff0c;我们由两种方式来判断一个类所属的类型&#xff1a; isinstance(x, A)用来判断x是不是由类A实例化得到&#xff0c;或者由A的子类实例化变量得到 type()&#xff0c;返回这个类的类型 通过type(x) is A来判断x是不是由A来创建的&…
阅读更多...
深入探索网络代理：SOCKS5、代理IP与HTTP在网络安全中的作用

深入探索网络代理：SOCKS5、代理IP与HTTP在网络安全中的作用

在网络通信的广阔领域中&#xff0c;数据安全和隐私保护是绕不开的重要话题。网络代理&#xff0c;特别是SOCKS5代理、代理IP和HTTP代理&#xff0c;是实现这些保护的关键技术。它们在匿名性、数据加密和跨地域通信方面发挥着至关重要的作用。本文将深入探讨这些技术的机制、优…
阅读更多...
山东齐鲁文化名人颜廷利：教育的本质区别重点是什么

山东齐鲁文化名人颜廷利：教育的本质区别重点是什么

教育的本质区别重点是‘方式’&#xff0c; 现在的教育却成为了一种‘形式’&#xff1b; 教育的核心价值关键载于‘实践’&#xff0c; 当前我们的教育观念却变成了消耗‘时间’&#xff1b; ‘读书’的原则在于‘堵疏’&#xff0c;作为汉语‘堵疏’一词&#xff0c;顾名思义…
阅读更多...
Mongodb操作与Java（二）查询语句汇总

Mongodb操作与Java（二）查询语句汇总

MongoDB概念 MongoDB 基本概念指的是学习 MongoDB 最先应该了解的词汇&#xff0c;比如 MongoDB 中的"数据库"、"集合"、"文档"这三个名词&#xff1a; 文档&#xff08;Document&#xff09;&#xff1a; 文档是 MongoDB 中最基本的数据单元&…
阅读更多...
设计模式在JavaScript中的应用：介绍一些常见的设计模式如观察者模式，工厂模式，策略模式等，并展示如何在JavaScript中实现

设计模式在JavaScript中的应用：介绍一些常见的设计模式如观察者模式，工厂模式，策略模式等，并展示如何在JavaScript中实现

1、观察者模式&#xff1a;观察者模式是一种在项目中创建可观察者的方法&#xff0c;以便在对象之间实现好的通信机制。 在JavaScript中我们可以使用EventEmitter类来实现观察者模式。 class EventEmitter {constructor() {this.events {};}on(type, listener) {this.events…
阅读更多...
掌握学习平台中的高效学习技巧

掌握学习平台中的高效学习技巧

学习在我们生活中起着至关重要的作用。随着科技的发展&#xff0c;越来越多的学习平台为我们提供了更广阔的学习机会。然而&#xff0c;要实现高效学习&#xff0c;我们需要掌握一些技巧。 规划学习目标 首先&#xff0c;一个明确的学习目标是高效学习的基础。在使用学习平台…
阅读更多...
如何将jsp项目转成springboot项目

如何将jsp项目转成springboot项目

昨天说过&#xff0c;springboot推荐使用Thymeleaf作为前后端渲染的模板引擎&#xff0c;为什么推荐用Thymeleaf呢&#xff0c;有以下几个原因&#xff1a; 动静结合&#xff1a;Thymeleaf支持HTML原型&#xff0c;允许在HTML标签中增加额外的属性来实现模板与数据的结合。这样…
阅读更多...
ts中type和interface的区别

ts中type和interface的区别

面试中被问到&#xff0c;在TypeScript中&#xff0c;Type和Interface的区别这个问题。 区别 首先&#xff0c;在TypeScript中&#xff0c;Type和Interface都用于定义对象或函数的类型&#xff0c;区别如下&#xff1a; 语法不同 interface使用关键字interface来定义&#…
阅读更多...
Redis缓存雪崩，击穿，穿透问题

Redis缓存雪崩，击穿，穿透问题

缓存雪崩、击穿、穿透、发生的背景 ​ 作者最近在写一个社区论坛项目&#xff0c;初始设想将论坛里用户发布的帖子内容存到数据库中&#xff0c;当用户访问论坛里的帖子时&#xff0c;帖子信息都从数据库中查。众所周知数据库的帖子数据是存在磁盘中的&#xff0c;而磁盘读写数…
阅读更多...
20240509解决Protel99se导入philips.ddb出现File is not recognized的问题

20240509解决Protel99se导入philips.ddb出现File is not recognized的问题

20240509解决Protel99se导入philips.ddb出现File is not recognized的问题 2024/5/9 16:25 缘起&#xff1a;最近需要用到/画PCB&#xff0c;想到十年前用过Protel99SE。 使用的系统&#xff1a;WIN10/WIN11都会出错。WIN7没有测试&#xff01; 从115网盘的角落里找到七集视频…
阅读更多...
【笔记】Anaconda命令提示符（Anaconda Prompt）操作

【笔记】Anaconda命令提示符（Anaconda Prompt）操作

通过anaconda配置python环境有时需要conda安装一些包或者文件&#xff0c;这里作为一个笔记记录如何打开Anaconda命令提示符&#xff08;Anaconda Prompt&#xff09;&#xff0c;并用conda操作 1.打开Anaconda命令提示符&#xff08;Anaconda Prompt&#xff09; 可直接在搜…
阅读更多...
DELL EMC unity存储系统如何初始化

DELL EMC unity存储系统如何初始化

在客户的存储使用过程中&#xff0c;经常会碰到一些场景需要对存储系统做重新初始化&#xff0c;就是回到出厂时候的配置。比如&#xff0c;客户设备要利旧&#xff0c;二次使用&#xff0c;一般都要回到出厂状态做重新配置的动作。存储严重故障&#xff0c;没有能力修复或者数…
阅读更多...
十四五”智慧城市：视频大数据汇聚系统2.0建设方案与特点分析

十四五”智慧城市：视频大数据汇聚系统2.0建设方案与特点分析

一、背景需求分析 随着科技的不断发展&#xff0c;智慧城市的建设已经成为城市发展的重要方向。视频汇聚系统作为智慧城市建设的重要组成部分&#xff0c;已经得到了广泛的应用和推广。视频汇聚系统是智慧城市中非常重要的组成部分&#xff0c;它利用摄像头和传感器技术来收集…
阅读更多...
IDEA切换分支

IDEA切换分支

1、选择要切换分支的module 2、右键&#xff0c;选择git 3、再点击branches 4、可以看到当前module的本地分支&#xff08;local Branches&#xff09;及远程分支&#xff08;Remote Branches&#xff09;列表。点击你要切换到的分支,Checkout即可。
阅读更多...
MySQL变量的定义与使用

MySQL变量的定义与使用

# MySQL变量的定义与使用 # 标识符命名规范 # 1、不允许使用数字作为开头 # 2、只能使用_和$符号&#xff0c;不允许使用其他符号 # 3、不允许使用关键字和保留字 set userName小可爱; select userName; # 定义数值类型&#xff1a;整数&#xff0c;小数 set x100,y2; select x…
阅读更多...
卡牌——蓝桥杯十三届2022国赛大学B组真题

卡牌——蓝桥杯十三届2022国赛大学B组真题

样例输入 4 5 1 2 3 4 5 5 5 5样例输出 3样例说明 这 5 张空白牌中,拿2张写1,拿1张写2,这样每种牌的牌数就变为了3,3,3,4, 可以凑出 3套牌,剩下2张空白牌不能再帮助小明凑出一套。 评测用例规模与约定 对于30%的数据&#xff0c;保证n ⩽ \leqslant ⩽ 2000; 对于100%的数据…
阅读更多...
Baidu Comate：智能编码，编程效率的革新者

Baidu Comate：智能编码，编程效率的革新者

文章目录 一、何为智能编码助手&#xff1f;二、Baidu Comate智能编码助手简介三、Baidu Comate注册四、Baidu Comate体验Comate插件功能1.注释生成代码2.函数注释生成3.行间注释生成4.生成代码解释5. 调优建议 五、插件功能的使用体验感受和建议 &#x1f6a9;结语 一、何为智…
阅读更多...
JS中的扩展运算符...

JS中的扩展运算符...

JS中的…是扩展运算符&#xff0c;是es6的新语法&#xff1b; 其作用在对象上&#xff0c;返回一个对象&#xff0c;取出对象所有可遍历属性&#xff1b; 场景1&#xff1a; let person { name:张三&#xff0c;age:18}let someone {...person}console.log(someone) //返回 {…
阅读更多...
走进标杆企业 | 山东国屹建材实现双站一体化管理

走进标杆企业 | 山东国屹建材实现双站一体化管理

走进标杆企业 走进标杆企业&#xff0c;感受名企力量&#xff0c;探寻学习优秀企业领先之道。本期要跟砼行们推介的标杆企业是山东国屹新型建材有限公司。 山东国屹新型建材有限公司成立于2018年&#xff0c;共建有两个站点、四条混凝土生产线&#xff0c;预拌混凝土实际日产…
阅读更多...
手写SpringBoot核心功能流程

手写SpringBoot核心功能流程

本文通过手写模拟实现一个简易版的Spring Boot 程序&#xff0c;让大家能以非常简单的方式知道Spring Boot大概的工作流程。 工程依赖 创建maven工程&#xff0c;并创建两个module springboot模块&#xff1a;手写模拟springboot框架的源码实现 test模块&#xff1a;业务系统…
阅读更多...
最新文章

Copyright @ 2022~2023