蓝桥杯h5

行内标签

行内标签，同一行使用不会换行

1.span

    <span style="background-color: aquamarine;">蓝桥</span>云课
// 部分改变样式

2.strong

    <strong>vscode</strong>是一款编译器
// 加粗

3.a标签

  <a href="D:\前端代码\test\Untitled-2.html" target="_blank">点击跳转</a>  
    //链接地址和打开方式


  <a name="名字的起源">名字的起源</a>
  <li><a href="#熊猫名字的来源">熊猫名字的来源</a></li>
  //书签:name用于定义书签， href="#书签名用于跳转到对应书签位置"



   <a href="mailto:3112076518@qq.com">邮箱</a> 
   <a href="tel:19174304783">电话</a>
   //跳转到邮箱和电话

4.img

<img src="图像 URL" alt="图像描述" />  
注意img是单标签

<img title="提示文本内容" />

属性值	
top	顶部对齐
bottom	底部对齐
middle	居中对齐
left	居左对齐
right	居右对齐

块标签

<div></div>
//调整布局

<p></p>
//段落，注意align属性h5已经不支持

<h1></h1>
//标题，注意在6级以后就不在换行


    <ol type="A">
        <li>astd</li>
        <li>asd</li>
        <li>das</li>
        <li>fq</li>
    </ol>
有序列表，以type来改变排序方式


    <ul type="circle">
        <li>astd</li>
        <li>asd</li>
        <li>das</li>
        <li>fq</li>
    </ul>
无序列表，同样用type决定排序方式
disc	实心圆 ●
circle	空心圆 ○
square	实心方块 ■


<dl>
    <dt>一</dt>
    <dd>一的描述</dd>
    <dt>二</dt>
    <dd>二的描述</dd>
</dl>
自定义列表，dt为列表项，dd为列表项的描述

表单标签

• input 标签的 value 属性的作用是由 input 标签的 type 属性的值决定的，它可以是显示的文字、初始值、或者是提交的值
• 服务端获取表单提交的数据是通过表单元素的 name 属性的值而得到的，没有 name 属性就无法得到表单元素提交给服务端的值

    
<form>
        用户名:<input type="text">
    </form>
文本输入框，注意表单标签必须写在from中


 <form>
        sex:<input type="radio" name="sex" value="male">male
        <input type="radio" name="sex" value="male">male<br>
     
        hobby:<input type="checkbox" name="hobby" value="basketboll">basketboll
        <input type="checkbox" name="hobby" value="footboll">footboll<br>
    </form>
单选框与复选框，对于type="radio，name相同会变成单选框


    <form>
        <input type="file" name="img" accept="img/png,img/jpg">
        <input type="submit" name="" value="上传">
    </form>
文件和发送类型表单，<input type="file" name="表单名字" accept="上传文件的格式" />
                 <input type="submit" name="表单名字" value="表单名" />
				其中name表示input的名字，value表示所在表单的名字

<input type="reset">
重置标签，重置表单内的所有内容


<form>
        <p>
            学历:<select name="">
                <option value="0">初中</option>
                <option value="1">高中</option>
                <option value="2">大专</option>
                <option value="3" selected="selected">本科</option>
                <option value="4">硕士</option>
                <option value="5">博士</option>
                <option value="6">其他</option>
            </select >
            就业城市:
            <select name="" multiple="multiple">
                <option value="A" selected="selected">北京</option>
                <option value="B">上海</option>
                <option value="C">深圳</option>
                <option value="D">广州</option>
                <option value="E">其他</option>
            </select>
        </p>
    </form>
下拉框，select：multiple	设置下拉列表可以选择多项。
	   		  size设置下拉列表选择几个表项。  
	   option：selected	设置是否被选中。
			   value	设置列表项的默认值。

h5新特性

header 标签是头部区域。
nav 标签是导航区域。
article 标签是内容区域。
section 标签是文档中部分内容区域。
aside 标签是侧边内容栏区域。
footer 标签是底部信息区域。


<audio src="snow.mp3" controls></audio>
audio来播放音频文件，controls添加暂停开始等控件，此外
autoplay 属性：音频自动播放。
loop 属性：音频自动重复播放。
preload 属性：用来缓冲 audio 标签的大文件，它有三个属性值 none（不缓冲）、auto（缓冲音频文件）、metadata （缓冲文件的元数据）。

<audio>
  <source src="filename.opus" />
  <source src="filename.ogg" />
  <source src="filename.mp3" />
</audio>
source用来指定该音频的备用源，上一个不能使用自动切换下一个


    <video src="video.mp4" controls poster="elena.png"></video>
video用于播放视频文件，用法与音频文件类似


<form>
        邮箱：<input type="email">
        url: <input type="url">
        number: <input type="number" max="10" step="2">
        <input type="submit">
    </form>
表单的新标签，分别用于输入邮箱，网址，数字
其中数字 
max	输入框允许的最大值。
min	输入框允许的最小值。
step	合法的数字间隔，例如 step=2，则合法为：2、4、6、8。
value	默认值。


 number: <input type="range" />
一定范围内的数字输入



      <input type="date">
      <input type="datetime-local">
分别选择年月日和年月日本地时间

  <input type="search">
与type = text 功能类似，只是不同浏览器给的样式不一样，是专门做搜索的text


<input type="submit" value="提交" />
点击文本框打开一个调色板，用于选择颜色


    <form id="myForm1" action="#" method="GET"></form>
    <form id="myForm2" action="#" method="POST"></form>
    提交到 myForm1：<input type="text" form="myForm1" name="myForm1" />
    <input type="submit" value="提交" form="myForm1" />
    提交到 myForm2：<input type="text" form="myForm2" name="myForm2" />
    <input type="submit" value="提交" form="myForm2" />
在表单定义了id后，from属性表示提交到的表单名；action表示表单提交到的url

<form autocomplete="on"></form>
表示自动补全，在用户输入过一次之后，默认开启


<input type="text" placeholder="性别">
用于设置输入框的背景提示信息

h5本地存储

localStorage，sessionStorage 
方法	说明
setItem(key,value)	保存数据到本地存储
getItem(key)	从本地存储获取数据
removeItem(key)	根据指定 key 从本地存储中移除数据
clear()	清除所有保存数据

两者方法相同，用法也相同，但是localStorage会永久存储到本地，sessionStorage存储在网页，网页关闭则qin'chu