首页 > 其他分享 >HTML5(笔记)

HTML5(笔记)

时间:2022-11-12 00:45:02浏览次数:59  
标签:定义 标签 元素 笔记 表单 HTML5 跳转 type

1.基础

1.HTML标题通过


2.段落用标签

定义
3.链接通过定义例如:

<a href="http://www.runoob,com">这是一个链接</a>

4.图像标签

<img> eg:<img src="/images/logo.png" width="258"height="39"/>

5.
换行

2.属性

1.class 为元素定义一个或者多个类名
2.id 定义元素的唯一id
3.style 规定元素的行内样式
4.title规定元素的额外信息
5.html水平线标签



6.注释

3.文本格式化

定义粗体文本
定义着重文字 斜体
定义斜体字
定义小号字
定义加重语气
定义下标字
定义上标字
定义插入字
定义删除字

<img src:"地址"alt:"图片不显示时显示的文字"title:"图片悬停文字"
<a href:“地址” target=“_blank”></a>跳转地址 target表示窗口在哪里打开 _blank在新页面打开  默认_self在本页面跳转

3.1锚链接

先定义一个name <a name="顶部"></a>
1.需要一个锚链接标记
2.然后跳转到标记
<a href:“#顶部”></a> 页面间跳转

3.2邮件连接

mailto:<a href="mailto:839486172@qq.com>点击联系我</a>
qq链接:<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="你好请联系我" title="你好请联系我"/>
。

3.3块元素

无论内容多少,该元素独占一行(p.h1-h6)

3.4行内元素

内容撑开宽度,左右都是行内元素的可以排在一行(a.strong.em)

3.5列表

无序列表

    应用范围 :导航 侧边栏
    有序列表
      应用范围 :试卷 问答

      自定义列表 :

      <dl>
      	  	<dt>学科</dt>
      	  	<dd>java</dd>
      	  	<dd>linux</dd>
      	  	<dd>python</dd>
      	  </dl>
       <!--描述:dl:标签 dt:列表名称 dd:列表内容  应用范围:公司  列表里都用<li></li>-->
      

      ​ 行 tr
      ​ 列 td
      ​ 跨行:rowspan
      ​ 跨列:colspan

       <table border="1px" cellspacing="" cellpadding="">
              	<tr>
              		<td rowspan="2">范</td>
              		<td>腾</td>
              		<td>龙</td>
              	</tr>
              	<tr>
              		<td colspan="2">谷</td>
              		<td>雨</td>
              		<td>荷</td>
              	</tr>
      

      4.视频音频学习

      4.1视频标签

      src:资源路径
      controls:控制条
      autoplay:自动播放

      谷歌需要:muted=muted 添加这个自动播放

      viedo{width height} 设置高度宽度

      loop=“loop”循环播放

      poster=“imgurl(显示未加载完成的图片)”

      <video src="sources/录课1.mp4" controls autoplay></video>
      

      4.2音频文件标签

       <audio src="" autoplay="autoplay" controls="controls" loop="loop"></audio>
      

      5.页面结构分析

      header 标题头部区域内容
      footer脚部区域内容
      section web页面中的一块独立区域
      article独立的文章内容
      aside相关内容或应用常用于侧边栏
      nav导航类辅助内容

      iframe内联框架 :

      <iframe src="http://www.baidu.com" width="1000px" height="800px"></iframe>
      src:地址 w-h:宽度高度 name:写名字 可以用超链接标签跳转
      

      6.表单

      form表单

      action:表单提交的位置 可以是网站,也可以是一个请求处理地址
      method:post get 提交方式
      get方式提交:我们可以在url中看到我们提交的信息 不安全 但是高效
      post方式提交:比较安全,传输大文件
      type:指定元素类型 text password checkbox radio submit rest file hidden image button默认为text
      name:指定表单元素的名称
      vlaue:元素的初始值,type为radio时必须指定一个值
      size:指定表单元素的初始宽度 当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位
      maxlength:type为text或者password时。,输入的最大字符数
      checked:type为radio或者checked时,指定按钮是否被选中

      账号密码框:

      <h1>注册</h1>
      		<form action="2.html" method="get">
      			
      			名字:<input type="text"  name="username"/>
      			密码:<input type="password" name="pwd" /><br />
      			<input type="submit" value=“提交”/>
      			<input type="reset"  vlaue=“重置”/>
      

      单选框:

      性别:<input type="radio"   value="男"  name="sex"/>男
      			<input type="radio" value="女" name="sex"/>女
      

      多选框:

       爱好: <input type="checkbox" value="sleep" name="hobby" />睡觉
                  <input type="checkbox" value="code" name="hobby"/>敲代码
                  <input type="checkbox" value="chat" name="hobby"/>聊天
                  <input type="checkbox" value="game" name="hobby"/>游戏
                  <input type="submit" />
                  <input type="reset" />
                  <input type="button" name="btn1"value="点击变长" />
                  <input type="image"  src=".."/>
      checked默认选中
      

      下拉框:

      <select name="列表名称">
                  	<option value="china">中国</option>
                  	<option value="us">美国</option>
                  	<option value="ruishi" selected>瑞士</option>
                  	<option value="yindu">印度</option>
          </select>
      selected 默认选中
      

      文本域:

      反馈:<textarea name="textarea"  cols="50" rows="10">文本内容</textarea>
      

      文件域:

      文件域:<input type="file"  />
                  <input type="button" value="上传" name="upload" />
      

      验证:

      邮件验证:<input type="email"  name="email"/>
      url验证:<input type="url"  name="url"/>
      数字验证:<input type="number"  name="num" max="100" step="10"/>
      滑块验证: <p>
               	<input type="range" min="100" name="voice" max="100" step="2"/>
               </p>
      <input type="data"></input>
      <input type="tel"></input>
      <input type="time"></input>
      <input type="color"></input>
      

      搜索框:

       <p>
              	<input type="search" name="search"/>
              </p>          
      

      表单的应用:只读 realyonly 禁用 disabled 隐藏 hidden

      增加鼠标可用性:label标签

      表单验证:placeholder 提示信息
      required 非空判断 不能为空
      pattern 正则表达式:随查询随用

      ​ autofocus:自动获得焦点

      autocomplete 浏览器根据你之前输入成功过的值记录

      autocomplete:on/off

      multiple 可以多选文件提交

      <style>
                    修改提示字体
              input::placeholder{
                  color: pink;
              }
              
          </style>
      </head>
      <body>
          <div>
             <form action="">
                 <input type="search" name="sear" id="" placeholder="范腾龙" autofocus autocomplete="off">
             <input type="file" name="" id="" multiple>
              </form>
      

      标签:定义,标签,元素,笔记,表单,HTML5,跳转,type
      From: https://www.cnblogs.com/ftDragon/p/16882526.html

      相关文章

      • 道长的算法笔记:二分图匹配
        二分图的概念二分图又称作二部图,是图论中的一种特殊模型。假设\(G=(V,E)\)是一个无向图,如果顶点\(V\)能够分割为两个互不相交的子集\((S,T)\),并且图中的每条边\((......
      • Flutter 笔记 |macOS 下载安装配置
        好久不见,再度启程。一、前言起初,初始Flutter,简单配置了一波,完了会儿,然后懒散的放弃了。2020,不平凡的一年,多数在加办公,完成日常工作,也变得更加懒散。想想以后,撸农药也是浪费......
      • 笔记本 Optimus MUXless 下的 Intel 和 NVIDIA 虚拟机显卡直通
        参考https://lantian.pub/article/modify-computer/laptop-intel-nvidia-optimus-passthrough.lantian/......
      • NoneBot笔记(一):初识Bot
        Windows开发安装NoneBot配置电脑python环境用pycharm创建一个项目,启用新的虚拟环境开发项目,避免依赖冲突在pycharm内使用Terminal安装包管理工具nb-cli,Nonebot2......
      • 算法笔记(三):数学问题
        最大公约数辗转相除法intgcd(inta,intb){ if(b==0)returna; returngcd(b,a%b);}最小公倍数根据最大公约数得出最小公倍数步骤:先求得a与b的最大公......
      • 算法笔记(二):知识点补充
        万能头文件#include<bits/stdc++.h>数组最大范围int型一维数组:小于4e8,即4亿int型二维数组:小于2e4,即2万数据类型范围int和long都是用32位来存储最大值和最小值分......
      • .net Elasticsearch 学习入门笔记
        .netElasticsearch(es)学习入门笔记及简要总结。一.es安装相关1.elasticsearch安装运行http://localhost:9200/2.head插件3.bigdesk插件安装(安装细节百度:windows......
      • C++学习笔记
        C++学习笔记!这是刚开始写的文件,后来发现太大不合适就开始分开写了#include<iostream>#include<string>//c++风格字符串头文价//下面是定义宏常量:宏常量一旦定下,下文就......
      • VueRouter笔记 - 路由守卫
        路由守卫目录路由守卫1.路由守卫简介2.全局前置守卫3.全局后置路由守卫4.独享路由守卫5.组件内路由守卫1.路由守卫简介路由守卫主要用来通过跳转或取消的方式守......
      • 20201322学习笔记11
        第十三章TCP/IP和网络编程概述本章论述了TCP/IP和网络编程,分为两个部分。第一部分论述了TCP/IP协议及其应用,具体包括TCP/IP栈、IP地址、主机名、DNS、IP数据包和路由器;......