前端学习之路10-h5

2024-09-02 12:18
文章标签 学习 前端 之路 frontend 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。

meta

meta元素可以用来定义文档的各种元数据。每个meta元素只能用于一种用途。如果在这些特性中想要使用的不止一个,那就应该在head元素中添加多个meta元素。

  • 指明键值对
  • 声明字符编码
  • 模拟HTTP标头字段
    在这里插入图片描述

定义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

在这里插入图片描述
在这里插入图片描述

嵌入文档 iframe

这篇关于前端学习之路10-h5的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1129926

相关文章

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo