前端学习之路10-h5

本文主要是介绍前端学习之路10-h5，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

元素
元素属性
h5文档
- 元数据head
- - 设置文档标题
  - base
  - meta
  - 定义css
  - 指定样式适用的媒体
  - 指定外部资源
- 内容body
- 特殊符号
- 全局属性
文档分节
- 基本标题
- hgroup
- section
- header
- footer
- nav
- article
- aside
- address
- detail
表格
- 单元格合并
表单
- button
input
- 元素大小
- 初始值与占位符
- 显示
- 密码
- 按钮
- 范围
- 输入验证
嵌入
- 图像
- 嵌入文档 iframe

元素

元素属性

属性只能用在开始标签或单个标签上，不能用于结束标签
在这里插入图片描述
一个元素可以应用多个属性，这些属性间以一个或几个空格分隔即可。
有些属性属于布尔属性，即不需要设置值，仍然生效：

<input disabled>

效果等同于disabled=“true"，值得注意的是，空字符串与属性名称字符串也有同样的效果。

在h5编程中，经常会看到data- 的属性标签，尤其是在一些框架中。
此类标签属于用户自定义属性。

h5文档

绝大多数的HTML文档都是针对浏览器创建的，但是也有可能是交给别的软件来处理。

HTML文档的外层结构由两个元素确定：DOCTYPE和html

<! DOCTYPE HTML>
<html>
</html>

元数据head

HTML文档的元数据部分可以用来向浏览器提供文档的一些信息。元数据包含在head元素内部

设置文档标题

<! DOCTYPE HTML>
<html>
<head><title>CSDN</title></head>
</html>

base

设置相对URL的解析基准
href属性指定了解析文档此后部分中的相对URL要用到的基准URL。
target属性的作用是告诉浏览器该如何打开URL。

定义css

指定样式适用的媒体

指定外部资源

引入css和js
收藏夹的图标
在这里插入图片描述
预先获取关联的资源

内容body

标签间有明确的关系，一般分为：父元素，子元素，后代元素，兄弟元素。子元素是关系最近的后代元素。具有同一个父元素的几个元素互为兄弟元素。这种关系在css选择器中显得格外重要。
h5的元素分为三大类：元数据元素（metadata element）、流元素（flow element）和短语元素（phrasing element）

特殊符号

在这里插入图片描述

全局属性

每种元素都能规定自己的属性，这种属性称为局部属性（local attribute）。属性还有另一种类型：全局属性（global attribute）。它们用来配置所有元素共有的行为。全局属性可以用在任何一个元素身上，不过这不一定会带来有意义或有用的行为改变

accesskey 快捷键访问
class
contenteditable属性
contextmenu属性: 快捷菜单
dir：文字方向 ltr rtl
draggable
dropzone
hidden
id
lang: 语言
style
tabindex
title

HTML5中的一大主要变化是基本信念方面的：将元素的语义与元素对其内容呈现结果的影响分开。
HTML元素负责文档内容的结构和含义，内容的呈现则由应用于元素上的CSS样式控制。

文档分节

基本标题

h1-h6

hgroup

section

header

footer

nav

该元素的目的是规划出文档的主要导航区域

article

aside

address

detail

表格

在HTML的早期版本中，用表格控制页面内容布局的现象很常见。在HTML5中已经不再允许这样做，取而代之的是新增的CSS表格特性。
每个表格都必须要有的：table、tr和td

th元素表示表头的单元格，它可以用来区分数据和对数据的说明

单元格合并

colspan, rowspan

表单

一个基本的表单需要三个元素：form、input和button元素
在这里插入图片描述
application/x-www-form-urlencoded编码
multipart/form-data编码
text/plain编码(不推荐)

button

type=submit 提交表单
type=reset input元素重置为初始状态

在HTML4中，input、button和其他与表单相关的元素必须放在form元素中。在HTML5中，这条限制不复存在。现在可以将这类元素与文档中任何地方的表单挂钩。

input

type=text 单行文本，多行文本：textarea

元素大小

maxlength属性设定了用户能够输入的字符的最大数目，size属性则设定了文本框能够显示的字符数目。二者的字符数目均以正整数表示。

初始值与占位符

value属性设置一个默认值，还可以用placeholder属性设置一段提示文字，告诉用户应该输入什么类型的数据

datalist元素是HTML5中新增的，它可以用来提供一批值，以便帮助用户输入需要的数据

显示

readonly和disabled属性都可以用来生成用户不能编辑的文本框
设置了disabled属性，结果该文本框显示为灰色，而且用户不能编辑其中的文字。元素设置了readonly属性，这也会阻止用户编辑文本框中的文字，但不会影响其外观

密码

type属性值设置为password的input元素用于输入密码。用户输入的字符在这种文本框中显示为星号（*）之类的掩饰字符

在提交表单时password型input元素不会对密码加以保护，用户输入的值以明文传输。对于安全至关重要（理应如此）的网站和应用系统，应该考虑使用SSL/HTTPS对浏览器和服务器之间的通信内容加密。

按钮

将input元素的type属性设置为submit、reset和button会生成类似button元素那样的按钮。

范围

type属性设置为number的input元素生成的输入框只接受数值，min、max、step和value属性值可以是整数或小数。
获取数值的另一种办法是使用range型input元素。
checkbox型input元素会生成供用户选择是或否的复选框
radio型input元素可以用来生成一组单选按钮，供用户从一批固定的选项中作出选择。要生成一组互斥的选项，只消将所有相关input元素的name属性设置为同一个值即可。
type属性设置为email、tel和url的input元素能接受的输入数据分别为有效的电子邮箱地址、电话号码和URL
email型input元素还支持一个名为multiple的属性。设置了该属性的input元素可以接受多个电子邮箱地址。
color型input元素只能用来选择颜色。
时间类型最好求助于jQuery之类的主流JavaScript库提供的日历选择工具。
search型input元素会生成一个单行文本框，供用户输入搜索用词。这种input元素有点与众不同，它实际上什么事都不做。它既不会对用户输入的数据作出限制，也没有诸如搜索本页或借助用户的默认搜索引擎进行搜索这样的功能。这类input元素支持的额外属性与text型input元素相同
image型input元素生成的按钮显示为一幅图像，点击它可以提交表单
file型，它可以在提交表单时将文件上传到服务器，表单编码类型为multipart/form-data的时候才能上传文件

输入验证

required，min,max, pattern

嵌入

图像

在这里插入图片描述
创建一个客户端分区响应图，通过点击某张图像上的不同区域让浏览器导航到不同的URL上。这一过程不需要通过服务器引导，因此需要使用元素来定义图像上的各个区域以及它们所代表的行为。客户端分区响应图的关键元素是map