HTML基础知识点2（含H5新增）

1.链接a标签

<a href=""></a>

        1.1特点：不独占一行

        1.2属性：href、target

                1.2.1herf：引入链接地址（本地地址和网络地址，网络地址必须加上网络协议https：//）

                1.2.2target:控制页面跳转方式（_blank打开新页面；_herf在原页面打开，原页面被覆盖）

        1.3功能

                1.3.1引入链接：

<a href="https://www.baidu.com" target="_blank">百度一下</a>

                1.3.2下载文件:

<a href="image.zip">下载图片</a>

                1.3.3空链接

<a href="#">空链接</a>

                1.3.4锚点定位(在跳转目标的位置添加id名标注,使用<a href="#id名">链接文本</a>)

	<a href="#one">定位到11111</a>
	<a href="#two">定位到22222</a>

	<div id="one">11111</div><br /><br />
	<div id="two">22222</div><br />

2.base标签（单标签）

        2.1功能：定义当前页面链接的跳转方式，写在head里面

        2.2属性：target全局跳转方式（自身链接跳转方式会优先于base里全局跳转方式）

<base href="../day01/" target="_blank">

3.换行标签（单标签）

<br>

4.图像标签（单标签、可设置宽高，等比缩放） 

        4.1功能：引入网页图片或者本地图片

        4.2属性：src、alt、title

                4.2.1src：引入图片路径地址

<img src="路径地址" >

                 4.2.2alt：图片加载失败提示信息

<img src="路径地址" alt="图片加载失败提示信息">

                4.2.3title：鼠标悬停在图片上提示信息

<img src="路径地址" alt="图片加载失败提示信息" title="提示信息">

5.特殊字符：重点记忆（> < 空格）

 6.表单域标签（表单控件写在表单标签里面）

        6.1属性：action、method、name

                6.1.1action：用于指定接收并处理表单数据的服务器程序的url地址    

<form action=""></form>

                6.1.2method：设置表单数据的提交方式，取值为get（）与post

<form action="" method="post"></form>

                6.1.3name：用于指定表单的名称，以区分同一个页面上的多个表单

 <form action="" method="get/post" name="表单名"></form>

7.表单input控件

        7.1属性：type、name、value、size、checked、maxlength 

                7.1.1文本域：text

<input type="text" >

                7.1.2密码字段：password

<input type="password">

                7.1.3单选框：radio

<input type="radio" name="组名1" value="取值1">所选内容1
<input type="radio" name="组名1" value="取值2">所选内容2

                7.1.4 复选框：checkbox

<input type="checkbox" name="组名1" value="取值1">所选内容1
<input type="checkbox" name="组名2" value="取值2">所选内容2

                7.1.5普通按钮：button

<input type="button" value="普通按钮">

                 7.1.6提交按钮：submit

 <input type="submit" value="提交按钮">

                7.1.7重置按钮：reset

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

                7.1.8图像按钮：image

<input type="image" src="图像地址">

                7.1.8文件提交按钮：file

<input type="file">

8.label标签：用于绑定一个表单元素，当点击label标签时，被绑定的表单元素就会获得输入焦点。与input搭配使用

<label for="name">名 字：</label>
<input type="text" id="name">

9.文本域：textarea，输入大量的文本信息 ，可以轻松的创建多行文本输入框

<textarea cols="每行中的字符数" rows="显示的行数" placeholder="占位符"></textarea>

10.下拉菜单框：select

<select>
	<option selected="selected">选项1</option>  
	<option>选项2</option>
	<option>选项3</option>
	...		
</select>

注:在option标签中加入selected="selected"属性时，表示当前项为默认选中项

11.前端如何进行SEO优化

        11.1概念： SEO，即Search Engine Optimization， 搜索引擎优化，是一种通过分析搜索引擎的排名规律，了解各种搜索引擎怎样进行搜索、怎样抓取互联网页面、怎样确定特定关键词的搜索结果排名的技术。

        11.2方法：title、description、keywords（三项的权重逐个减小 ）

                11.2.1title：就是浏览器上显示的那些内容，不仅用户能看到，也能被搜索引擎检索到(搜索引擎在抓取网页时，最先读取的就是网页标题，所以title是否正确设置极其重要)，title一般不超过80个字符，而且词语间要用英文"-"隔开,因为计算机只对英文的敏感性较高，对汉语的敏感性不高。

<title>内容</title>

                11.2.2description：是对于一个网页的简要内容概况。description一般不超过150个字符，描述内容要和页面内容相关。

<meta name="description" content="内容概要">

                11.2.3keywords：主要作用是告诉搜索引擎本页内容是围绕哪些词展开的。，才有利于排名。keywords一般不超过3个，每个关键字不宜过长，而且词语间要用英文","隔开。尽量将重要的关键字靠前放，因为靠后的关键字排名较差，除非你占有很高的权重

<meta name="keywords" content="关键字1,关键字2,关键字3">

H5新增

1.文档类型设定：HTML： html:4s、XHTML: html:xt、HTML5: html:5或！

2.字符设定：

        2.1HTML和XHTML建议写法

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

        2.2HTML5中建议写法

<meta charset="UTF-8" />

3.常用新标签

        header：定义文档的头部区域

        nav：定义导航链接的部分

        footer：定义section或document的页脚

        article：定义页面独立的内容区域

        section：定义文档的节（section、区段）

        aside：定义页面的侧边栏内容

        

<header>定义网页的头部  页眉</header>
<nav>定义导航链接部分</nav>
<section>定义区域</section>
<article>定义文章</article>
<aside>定义侧边栏</aside>
<footer>定义网页的底部  页脚</footer>

4.datalist：定义选项列表，与input结合使用

<!-- input使用list属性 -->
<input type="text"  value="输入明星" list="star"/>  
<!-- datalist使用id属性，list属性与id属性的值一致，表示与input形成链接 -->
<datalist id="star">	
	<option>张学友</option>
	<option>张韶涵</option>
	<option>张敬轩</option>
	<option>孙燕姿</option>
	<option>孙悦</option>
	<option>张碧晨</option>
</datalist>

5.fiedset： 可将表单内的相关元素分组打包，与legend搭配使用

<fieldset>
	<legend>登录页面</legend> <!--  外边框的标题 -->
	用户名：<input type="text"><br><br>
	密　码：<input type="password">
</fieldset>

6.mark： 用于定义带有记号的文本。在需要突出显示文本时可使用

<p>这是一个段落，中间的<mark>文本</mark>需要标记</p>

注 ：IE 8及之前的版本不支持mark标签。

7.meter：定义度量衡，仅用于已知最大和最小值的度量。比如：磁盘使用情况，查询结果的相关性等。不能当做进度条使用。

        min：规定范围最小值

        max：规定范围最大值

        value：规定度量的当前值，是必须的属性。可以用数值表示

        low：范围界定的最低值

        high：范围界定的最大值

<meter min="0" max="10" value="6"></meter> <br>

<!-- value的值超过high的值 -->
<meter min="0" max="100" value="95" low="30" high="90"></meter><br>

<!-- value的值在low与high之间 -->
<meter min="0" max="100" value="60" low="30" high="90"></meter><br>

<!-- value的值低于low的值 -->
<meter min="0" max="100" value="25" low="30" high="90"></meter>

注 IE浏览器不支持meter标签。

8.progress：定义运行中的任务进度，通常与JavaScript结合使用来显示当前的任务进度。不能作为度量值使用

<progress value="20" max="100"></progress>

9.新增input type 属性值

类型	使用示例	含义
url	<input type="url">	输入url格式，如：http://www.baidu.com
number	<input type="number">	输入数字格式，只能是数字
search	<input type="search">	搜索框
range	<input type="range">	自由拖动滑块
time	<input type="time">	小时分钟
date	<input type="date">	年月日
month	<input type="month">	年月
week	<input type="week">	星期 年
color	<input type="color">	颜色
email	<input type="email">	输入邮箱格式，如：xx@163.com
hidden/show	<input type="hidden">	定义表单隐藏/显示

<form action="">
	邮箱：<input type="email"><br><br>
	url： <input type="url"><br><br>
	数字：<input type="number"><br><br>
	搜索：<input type="search"><br><br>
	滑块：<input type="range"><br><br>
	时分：<input type="time"><br><br>
	年月日：<input type="date"><br><br>
	年月：<input type="month"><br><br>
	星期：<input type="week"><br><br>
	颜色：<input type="color"><br><br>
	<input type="submit">
</form>

10.常用新属性

属性	用法	含义
placeholder	<input type="text" placeholder="请输入用户名" >	占位符 用于提示用户输入，当用户输入数据时，提示信息会自动消失
autofocus	<input type="text" autofocus>	规定当页面加载时input元素应该自动获得焦点
multiple	<input type="file" multiple>	多文件上传
autocomplete	<input type="text" autocomplete="off">	规定表单是否应该启用自动完成功能，有两个值分别是on和off，on表示记录已经输入的值 。条件是：1.autocomplete首先需要提交按钮 2.这个表单必须给name值
required	<input type="text" required>	必填项，内容不能为空
accesskey	<input type="text" accesskey="s">	规定激活（使元素获得焦点）元素的快捷键，采用alt+字母的形式

<!-- placeholder表示占位符，用于提示用户输入，当用户输入数据时，这个提示会自动消失
	autofocus表示页面加载时，input自动获得焦点 -->
	用户名：<input type="text" placeholder="请输入用户名" autofocus><br>

	<!-- multiple表示可以选择多文件上传 -->
	上传头像：<input type="file" multiple><br>

	<h4>自动记录完成</h4>
	<!--1.autocomplete首先需要提交按钮
		2.这个表单必须给name值 -->
	<form action="">
		<!-- autocomplete表示记录之前输入的信息，完成自动输入功能 -->
		姓名：<input type="text" autocomplete name="username"><br>
		<input type="submit">
	</form><br>


	<form action="">
		<!-- required 表示必填项，内容不能为空
		  	 accesskey 表示使用alt+字母可以让input表单快速获得焦点-->
		昵称：<input type="text" required accesskey="s"><br>
		<input type="submit">
	</form>

 11.多媒体标签

        11.1多媒体embed：用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等，src为音频或视频文件的路径，可以是相对路径或绝对路径。

<!-- 播放音频文件 -->
<embed width="300px" height="50px" src="./music/loveyou.mp3"/>

<!-- 播放优酷视频 -->
<embed src='http://player.youku.com/player.php/sid/XMjQ4MTc0ODMyOA==/v.swf' width='480' height='400' align='middle'></embed>

        11.2多媒体audio：元素支持三种音频格式文件: MP3, Wav, 和 Ogg

浏览器	MP3	Wav	Ogg
IE	yes	no	no
Chrome	yes	yes	yes
Firefox	yes	yes	yes
Safari	yes	yes	yes
Opera	yes	yes	yes

HTML5通过<audio>标签来解决音频播放的问题。<audio> 标签在 HTML 4 中是无效的，页面无法通过 HTML 4 验证。必须把音频文件转换为不同的格式。<audio> 元素在老式浏览器中不起作用。

常见属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
loop	loop	如果出现该属性，则每当音频结束时重新开始播放
src	url	要播放的音频的url

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。

<audio controls>
	<source src="./music/loveyou.mp3" type="audio/mpeg"></source>
	<source src="./music/loveyou.ogg" type="audio/ogg"></source>
	<source src="./music/loveyou.wav" type="audio/wav"></source>
	您的浏览器不支持 HTML5 audio 标签。
</audio>

        11.3多媒体videovideo常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放的问题)
controls	controls	向用户显示播放控件
width	px	设置播放器的宽度
height	px	设置播放器的高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto(预先加载视频) none（不应加载视频）	规定是否预加载视频，如果有了autoplay，就忽略该属性
src	url	视频url地址
poter	imgurl	加载等待的画面图片
muted	muted	静音播放

浏览器	MP4	WebM	Ogg
IE	yes	no	no
Chrome	yes	yes	yes
Firefox	yes	yes	yes
Safari	yes	no	no
Opera	yes	yes	yes

现在大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

<video> 元素提供了播放、暂停和音量控件来控制视频。同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能在加载时保留特定的空间，页面就会根据原始视频的大小而改变。

<video> 元素支持三种视频格式：

        MP4：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

        WebM： 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

        Ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

<video width="420" controls>
	<source src="./music/mov_bbb.mp4" type="video/mp4">
	<source src="./music/mov_bbb.ogg" type="video/ogg"> 
	<source src="./music/mov_bbb.webm" type="video/webm">
	您的浏览器不支持 HTML5 video 标签。
</video>

12. 解决Chrome浏览器无法自动播放音频视频的问题

        12.1解决办法

                a：比较常规的做法是，为video标签设置muted属性，使它静音，这样视频就能自动播放了，但是没有声音。然后待用户在网页上有了任意触发后，再将muted去掉。或者让用户手动去打开音频（腾讯视频就是这样做的）。

                b：使用iframe来触发权限

<iframe style="display: none" allow="autoplay" src="音频地址"></iframe>

                当你页面加载完成后，将原先video的src地址赋值给iframe ，就可以通过iframe来播放音频文件了

随堂小练习：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--test  -->
    <fieldset>
        <legend>学生档案</legend>
        姓名：<input type="text" name="" id="" placeholder="请输入学生姓名"><br><br>
        手机号：<input type="text"><br><br>
        邮箱：<input type="email"><br><br>
        所属专业：<input type="text" placeholder="请选择专业" list="zhuanye ">
        <datalist id="zhuanye ">
            <option>电子信息</option>
            <option>数字媒体</option>
            <option>环艺</option>
        </datalist>
        <br><br>
        出生年月：<input type="date"><br><br>
        成绩：<input type="number"><br><br>
        <input type="submit" name="" id="">
        <input type="reset">

    </fieldset>
</body>

</html>