前端复习之旅---HTML＆H5

定义：超文本标记语言。

基础标签：块div，段落p，链接a，图像img，列表ul/ol，标题h1~h6。

表格：

<table> 元素表示整个表格，它包含两个主要部分：<thead> 和 <tbody>

• tr：tr 是 table row 的缩写，表示表格的一行。
• td：td 是 table data 的缩写，表示表格的数据单元格。
• th：th 是 table header的缩写，表示表格的表头单元格。

表单：<form></form>

<input type="text" name="username"/>

<input type="password" name="psw1"/>

单选框：

<input type="radio" name="gender" value="女">女

<input type="radio" name="gender" value="男">男

复选框：

<input type="checkbox" name="lang" value="中文">中文

<input type="checkbox" name="lang" value="英文">英文    

<input type="checkbox" name="lang" value="法文">法文

<input type="checkbox" name="lang" value="日文">日文

下拉选择：

<select name="degree">

         <option value="-1">--请选择学历--</option>

         <option value="博士">博士</option>

         <option value="硕士">硕士</option>

         <option value="本科">本科</option>

         <option value="专科">专科</option>

   </select>

<input type="button" value="注 册" id="regBtn">

<input type="reset" value="重 置">

<input type="image"/>必须为其定义src属性指定图像的url地址

<input type="hidden"/>隐藏域：对用户不可见

<input type="submit"/>文件域：将文件提交给后台服务器

<input type=“email”/>

<input type=“tel”/>电话号码

<input type “url”/>

<input type=" search"/>专门用于输入搜索关键词的文本框，它能自动记录一些字符，如站点搜索或者Google搜索

<input type=" color"/>其基本形式是# RRGGBB，默认值为#000000

<input type=" number/>vale:指定输入框的初始值
                                     max:指定输入框可以接受的最大的输入值。
                                     min:指定输入框可以接受的最小的输入值。
                                     sep:输入域合法的数字间隔，如果不设置，默认值是1

<input type=" range"/>

<input type= date， month，week…"/>

                        Date：选取日、月、年
                        Month：选取月、年
                        Week：选取周、年
                        Time：选取时间(小时和分钟)
                        Datetime：选取时间、日、月、年(UTC时间)
                        datetime-local：选取时间、日、月、年(本地时间)

框架iframe

<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>

 HTML5

语义化标签（常用）

<article>内容，<aside>侧边栏，<details>细节，<dialog>提示框，<footer>页脚，<header>头部，<nav>导航，<section>段落。

视频<video>音频<audio>

 存储

• localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
• sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

都可使用的API：

• 保存数据：localStorage.setItem(key,value);
• 读取数据：localStorage.getItem(key);
• 删除单个数据：localStorage.removeItem(key);
• 删除所有数据：localStorage.clear();
• 得到某个索引的key：localStorage.key(index);

使用举例：

//保存数据  
function save(){  
    var siteurl = document.getElementById("siteurl").value;  
    var sitename = document.getElementById("sitename").value;  
    localStorage.setItem(sitename, siteurl);
    alert("添加成功");
}
//查找数据  
function find(){  
    var search_site = document.getElementById("search_site").value;  
    var sitename = localStorage.getItem(search_site);  
    var find_result = document.getElementById("find_result");  
    find_result.innerHTML = search_site + "的网址是：" + sitename;  
}