HTML5 基础总结

HTML5

HTML全称为超文本标记语言,是一种标记语言。由一系列标签构成,这些标签将分散的Internet资源链接成为了一个整体。

文档声明

HTML5之前 以SGML(通用标准标记语言)为标准 H5不再采用这个标准 声明方式比较简洁

语法特性

  • HTML5里边部分结束标签可以省略 例如:HTML BODY li tr …
  • 单标签:不需要加结束的/ 例:input img br hr
  • 属性值可以不放在引号当中

HTML基本结构

<!DOCTYPE html> <!--告诉浏览器我们要使用什么规范!-->
<html lang="en"><!--网页头部-->
<head><!--meta 描述标签,描述网站信息--><meta charset="UTF-8">  <!--keywords 属性说明,网站的关键字--><meta name="keywords" content="">   <!--description 网站的描述--><meta name="description" content="">    <!--表示链接到网站的图标,如favicon--><link rel="icon" href="./images/favicon.ico" /><!--title标签 网页标题--><title>这是我的第一个网页</title>   <!-- 链接到外部CSS样式表 --> <link rel="stylesheet" href="styles.css"> </head><body>  <!--body表示网页主体部分-->hello,world;
</body>
</html>

标签

span a i img ul li div p form input textarea select option…

  1. 语义化标签
  • header main footer nav section(一节)
  • aside article hgroup(放置标题)
  • figure (放置音频视频媒体文)
  • figcaption(放置媒体文件标题)
     <figure><figcaption>标题</figcaption><img src="" alt=""></figure>
  • address time progress(进度条效果)
  <section><progress value="50" max="100"></progress></section>
  1. 功能性的标签
  • 视频:video
        <video src="demo.mp4" controls autoplay></video>
    
  • 音频:audio
        <audio src="demo.mp3" controls autoplay></audio>
    
  • 视频源:source
    <video><source src="demo.mp4"><source src="demo.ogg"></video>
    
  • 画布绘制:canvas

属性

  • hidden (隐藏,类似于display:none;的效果)
<header hidden>123</header> 
  • contenteditable内容可编辑
<div style="width:300px; height:300px;background:#ccc;"contenteditable="true"></div>
  • draggable是否可以拖拽
<div style="width:300px; height:300px;background:#ccc;"draggable="true"></div>
  • video audio
    • controls 播放控件
    • autoplay 是否自动播放
    • poster 封面图片

表单

form input textarea select option label

  • 控件类型:
    • text password radio checkbox file(文件域) button reset hidden(隐藏域)submit
    • H5的控件类型:email url year month week date time datetime-local tel search number range(滑块) color
  • 属性
    • form标签
      • action 表单提交的地址
      • method 提交的方式(HTTP方法 GET/POST)
      • enctype 提交内容的数据格式(form-data/urlencoded)
      • novalidate 在提交的时候不进行验证
      • autocomplete 表单自动补全/提示
      • name 名字 用来进行选择
    • 表单控件可以使用的属性:
      • type 控件类型
      • name 名字 用来进行提交
      • value 值
      • readonly 只读(只能提交不能修改)
      • disabled 禁用 (不能提交不能修改)
      • form 表示当前的控件要提交的表单是哪个(和form标签的id属性相关联的)
      • required 当前控件是必填项
      • pattern 用正则进行验证
      • autofocus 自动获得焦点
      • placeholder 默认的提示文字
      • submit中可以用到的属性:
        • formaction(跳转到其他界面)
        • formmethod
        • formenctype
        • formtarget(跳转时打开新窗口)【一套表单多种提交】
      • 数值类型(min max step)最小值 最大值 步进值 —只能用在数值里边
<!-- 举例1 -->
<form action="demo.html" novalidate autocomplete="off"><ul><li><input type="file"><li><input type="hidden"><li><label>电子邮件:<input type="email" name="n" value="123@qq.com" readOnly></label><li><label for="url">网址:</label><input type="url" name="u" id="url" ><li><input type="year" name="y" disabled><li><input type="month" name="m"><li><input type="week" name="w"><li><input type="date" name="d"><li><input type="time" name="t"><li><input type="datetime-local" name="dt"><li><input type="tel" name="t"><li><input type="search" name="s"><li><input type="number" name="n" min="0" max="10" step="2"><li><input type="range" name="r"><li><input type="color" name="c"><li><input type="submit" value="demo.html"><li><input type="submit" value="百度" formaction="http://www.baidu.com" formtarget="_blank"></ul></form>
<!-- 举例 -->
<form action="http://www.baidu.com" id="myform" target="_blank"></form><section><input type="text" name="user" form="myform" required pattern="\d{6,8} autofocus placeholder="请输入6-8个数字" ><input type="submit" form="myform" ></section>

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

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

相关文章

在机器学习或者深度学习中是否可以直接分为训练集和测试集而不需要验证集?我的答案如下:

文章目录 一、训练集是什么&#xff1f;二、验证集是什么&#xff1f;三、测试集是什么&#xff1f;四、是否可以直接分为训练集和测试集而不需要验证集&#xff1f;总结 在机器学习和深度学习项目中&#xff0c;通常会将数据集划分为三个部分&#xff1a;训练集&#xff0c;验…

SpringMVC实验(四)——前后端分离下的数据交互

【知识要点】 前后端分离概念 前端开发不依赖与后端&#xff0c;二者均可独立发展。二者责任与分工明确&#xff0c;前端负责人机交互操作&#xff0c;后者负责仅提供数据服务&#xff0c;不再参与前端页面的跳转的控制。随着前端设备的多元化&#xff0c;前后端分离开发已经成…

UVM实现component之间transaction级别的通信

my_model是从i_agt中得到my_transaction&#xff0c;并把 my_transaction传递给my_scoreboard。在UVM中&#xff0c;通常使用TLM&#xff08;Transaction Level Modeling&#xff09;实现component之间transaction级别 的通信。 在UVM的transaction级别的通信 中&#xff0c;数…

在Word中移动页面主要靠导航窗格,有了它,移动页面就事半功倍

本文包括有关在Microsoft Word 2019、2016和Office 365中使用导航窗格移动页面以及复制和粘贴页面的说明。 如何设置导航窗格以重新排列页面 Microsoft Word并不将文档视为单独页面的集合,而是将其视为一个长页面。正因为如此,重新排列Word文档可能会很复杂。在Word中移动页…

【精选】ATKCK红队评估实战靶场二 (超详细过程思路)

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【ATK&CK红队评估实战靶场】 【VulnHub靶场复现】【面试分析】 &#x1f…

【.NET Core】Linq查询运算符(一)

【.NET Core】Linq查询运算符&#xff08;一&#xff09; 文章目录 【.NET Core】Linq查询运算符&#xff08;一&#xff09;一、概述二、筛选数据三、投影运算3.1 Select 3.2 SelectMany3.3 Zip3.4 Select 与 SelectMany 四、Set&#xff08;设置&#xff09;运算4.1 Distinct…

智能优化算法应用:基于堆优化算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于堆优化算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于堆优化算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.堆优化算法4.实验参数设定5.算法结果6.参考文献7.…

Verilog if语句阻断z状态传播

一、测试代码 设置两组输入输出&#xff0c;对比使用assign赋值语句与always if语句。 if_assign_test.v timescale 1ns / 1ps // // Engineer: wkk // Module Name: if_assign_test // module if_assign_test(input if_a_in,input if_b_in,input if_c_in,input if_d_in…

在线网页视频提取工具哪个好用?建议收藏!

随着短视频的崛起&#xff0c;很多人都喜欢将视频下载到手机中慢慢观看&#xff0c;这样可以避免在线播放的卡顿问题&#xff0c;但是会遇到一个问题就是在线网页视频提取工具哪个好用&#xff0c;有的可以提取但是画质太差模糊&#xff0c;有的自带水印飞来飞去。今天小编给大…

同旺科技 USB TO SPI / I2C --- 调试W5500_读写网关地址

所需设备&#xff1a; 内附链接 1、USB转SPI_I2C适配器(专业版); 首先&#xff0c;连接W5500模块与同旺科技USB TO SPI / I2C适配器&#xff0c;如下图&#xff1a; 这里的网关地址设置为192.168.1.1 先将网关地址写入寄存器&#xff0c;然后再读取出来&#xff1a;

关于神舟-战神TA5NS系统重装问题

加装固态卡在log处无法开机问题 下面是我的步骤 1.按f7选择pe安装系统&#xff0c;然后发现卡在战神log处不转动 2.下载驱动 TA5NS驱动地址 下载RAID驱动&#xff08;如果没有私信我&#xff0c;我网盘里有&#xff09;&#xff0c;拷到u盘中&#xff0c;然后进入pe系统里面…

Educational Codeforces Round 159 (Rated for Div. 2) 之 A - E 题

目录 [A. Binary Imbalance](https://codeforces.com/contest/1902/problem/A)DescriptionSolutionCode [B. Getting Points](https://codeforces.com/contest/1902/problem/B)DescriptionSolutionCode [C. Insert and Equalize](https://codeforces.com/contest/1902/problem/…

分享126个图片JS特效,总有一款适合您

分享126个图片JS特效&#xff0c;总有一款适合您 126个图片JS特效下载链接&#xff1a;https://pan.baidu.com/s/1sOKHo4RciQXwQX9vhLIm3g?pwd6666 提取码&#xff1a;6666 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整…

【Maven】更新依赖索引

有时候给idea配置完maven仓库信息后&#xff0c;在idea中依然搜索不到仓库中的jar包。这是因为仓库中的jar包索引尚未更新到idea中。这个时候我们就需要更新idea中maven的索引了&#xff0c;具体做法如下&#xff1a; 打开设置----搜索maven----Repositories----选中本地仓库-…

【C++】友元函数

文章目录 一、友元二、友元函数三、友元类 一、友元 友元分为&#xff1a;友元函数和友元类 友元提供了一种突破封装的方式&#xff0c;有时提供了便利。但是友元会增加耦合度&#xff0c;破坏了封装&#xff0c;所以友元不宜多用。 二、友元函数 友元可以是一个函数&#…

Javafx实现浏览器

浏览器是一种计算机程序&#xff0c;主要用于显示互联网上的网页。通过浏览器&#xff0c;用户可以访问各种网站、搜索引擎、在线应用程序、社交媒体等。常见的浏览器包括Google Chrome、Mozilla Firefox、Safari、Microsoft Edge、Opera等。浏览器的功能不仅限于浏览网页&…

shell编程

1、开发内存监测脚本 功能描述 监测linux剩余可用的内存&#xff0c;当可用内存小于100M时&#xff0c;就发邮件给我&#xff1b;并且将该脚本加入crontab&#xff0c;每3分钟检查一次内存知识点 获取当前内存的命令&#xff1a;free -m # 以兆的形式显示代码 #! /bin/bashf…

15、pytest的fixture调用fixture

官方实例 # content of test_append.py import pytest# Arrange pytest.fixture def first_entry():return "a"# Arrange pytest.fixture def order(first_entry):return [first_entry]def test_string(order):# Actorder.append("b")# Assertassert orde…

Python中检查字符串是否仅包含字母的多种方法:深入探究

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 随着Python在数据处理和字符串操作方面的广泛应用&#xff0c;经常需要对字符串进行验证&#xff0c;确认其是否仅包含字母。本文将探讨Python中的多种方法来检查字符串是否只由字母组成&#xff0c;以及它们的应…

springboot的配置文件加载总结

优先级 在同一级目录下&#xff0c;会先比较前缀bootstrap、application&#xff0c;其中bootstrap比application的优先级高&#xff0c;其次再去比较后缀.properties、.yml&#xff0c;其中.properties比.yml优先级高 所以它们的执行顺序如下&#xff1a; bootstrap.propert…