前端基础HTML

****HTML笔记

一. HTML常用标签

1. 段落标签：p标签 `<p></p>`

格式：<p>这是一个段落标签</p>
用于将段落进行分段
举例：

	<p>拉布拉多又称寻回犬，是一种中大型犬类，是非常适合被选作经常出入公共场合的导盲犬或地铁警犬及搜救犬和其他工作犬的狗品种，因原产地在加拿大的纽芬兰与拉布拉多省而得名。</p>
<p>拉布拉多猎犬有四种颜色，分别为：黑色、黄色、巧克力、米白色。最常见的是黑色，黄色。在美国犬业俱乐部中拉布拉多是目前登记数量最多的品种，对小孩尤其的友善，对犬主人略粘人。</p>

在这里插入图片描述

2. 标题标签：h标签 `<h></h>`

格式：<h>这是一个标题</h>
注意：标题只能是h1-- h6，没有h7
举例：

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

在这里插入图片描述

3. 水平线标签：hr标签（单标签）`<hr />`

格式：

段落1

<hr/>

段落2

用水平线将段落和段落之间分开
注意：它是一个单标签
举例：

    <p>拉布拉多又称寻回犬，是一种中大型犬类，是非常适合被选作经常出入公共场合的导盲犬或地铁警犬及搜救犬和其他工作犬的狗品种，因原产地在加拿大的纽芬兰与拉布拉多省而得名。</p>
    <hr />
    <p>跟西伯利亚雪撬犬和金毛寻回犬并列三大无攻击性犬类，拉布拉多智商位列世界犬类第六</p>
    <hr />
    <p>个性忠诚、大气、憨厚、温和、阳光、开朗、活泼，智商极高，也对人很友善。</p>
    <hr />
    <p>拉布拉多猎犬有四种颜色，分别为：黑色、黄色、巧克力、米白色。最常见的是黑色，黄色。在美国犬业俱乐部中拉布拉多是目前登记数量最多的品种，对小孩尤其的友善，对犬主人略粘人。</p>

在这里插入图片描述

4. 换行标签： `<br />`

格式：

段落1<br />

段落2

注意：它是一个单标签
举例：

拉布拉多<br />
萨摩耶<br />
金毛<br />
法国斗牛犬<br />
柴犬<br />

在这里插入图片描述

5. 布局标签： `<div>,<span>,<table>`

两个都用于用于布局，没有具体含义
块元素和内联元素：块元素都是新起一行的，内联元素都是跟在同一行的
span元素用于对文本中的部分字体设定样式

例子

<p>天空是<span class="c1">蓝色</span>的，小草是<span class="c2">绿色</span>的</p>

在这里插入图片描述

两种布局模式div和table布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端练习</title>
    <link rel="stylesheet" href="TheStyle.css">
</head>
<body>
    <div class="container">              //div布局
        <div class="heading">
            头部
        </div>
        <div class="left_body">
            左边
        </div>
        <div class="right_body">
            右边
        </div>
        <div class="footing">
            底部
        </div>
    </div>
</body>
</html>


body{
    margin: 0;
}
.container{
    width: 100%;
    height: 750px;
}
.heading{
    background-color: #d4afed;
    height: 10%;
    width: 100%;
}
.left_body{
    background-color: #a1ccff;
    width: 30%;
    float: left;
    height: 70%;
}
.right_body{
    background-color: #b2ff97;
    width: 70%;
    float: left;
    height: 70%;
}
.footing{
    background-color: #f7ff6b;
    height: 20%;
    width: 100%;
    clear: both;    //因为上面使用了浮动定位，所以现在要清除浮动底部才能显示出来
 }

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端练习</title>
    <link rel="stylesheet" href="TheStyle.css">
</head>
<body>
    <table>                  //table布局
        <tr>
            <td colspan="2" class="heading">头部</td>
        </tr>
        <tr>
            <td class="left_body">左边</td>
            <td class="right_body">右边</td>
        </tr>
        <tr>
            <td colspan="2" class="footing">底部</td>
        </tr>
    </table>
</body>
</html>


body{
    margin: 0;
}
table{
    width: 100%;
    height: 750px;
    background-color: black;
}
.heading{
    background-color: #a238ed;
    height: 10%;
    width: 100%;
}
.left_body{
    background-color: #a1ccff;
    width: 30%;
    height: 70%;
}
.right_body{
    background-color: #b2ff97;
    width: 70%;
    height: 70%;
}
.footing{
    background-color: #f7ff6b;
    height: 20%;
    width: 100%;
 }

在这里插入图片描述

6. 文本格式化标签 :

加粗：<b></b> 或 <strong></strong>(推荐使用)
```
<strong>加粗</strong>
```

在这里插入图片描述

倾斜：<i></i> 或 <em></em>（推荐使用）
```
<em>倾斜</em>
```

在这里插入图片描述

删除线： <s></s> 或 <del></del> (推荐使用）
```
<del>删除</del>
```

在这里插入图片描述

下划线：<u></u> 或 <ins></ins> (推荐使用）
```
<ins>下划线</ins>
```

在这里插入图片描述

7. 图像标签： img标签 `<img />`

格式<img src=""/>
注意：它是一个单标签
src属性一定要有
其他属性：

1.alt: 当图片不能正常显示时，这个属性可以显示替换的文字内容
```
<img src="" alt="这是一只小狗"/>
```

在这里插入图片描述

2.title：当鼠标放上去时显示的文字

<img src="" title="狗狗好可爱"/>

在这里插入图片描述

3.width / height: 设置图片长和宽**

<img src="" width="50" height="30"/>

在这里插入图片描述

4.border: 设置图片边框

<img src="" border="10"/>

在这里插入图片描述

8. 链接标签：a标签 `<a></a>`

1.文本链接<a>文字</a>

2.图片链接<a><img src="图片路径"></a>

格式：<a href="标签地址"></a>
href是一定要的属性，是用来写跳转网址的
两个<a></a>之间写的文字是链接的名字
外部链接必须以http://开头
内部链接只要写上 “页面名.html” 就可以了
target属性设置为target="blank",链接可以在新窗口打开
target属性设置为target="_self"，链接在本本窗口打开，默认的是这种
举例：

<a href="http://baidu.com" target="_blank">百度</a>           //外部链接
<a href="MyFirstHTML.html">第一个HTML</a>                     //内部链接

在这里插入图片描述

9. 锚点定位（点击链接跳到本页面相应位置）

用于较长的页面中，通过点击关键字快速跳转到指定页面处
利用a标签的跳转功能，结合id号实现
关键字处写<a href="#idname”>…</a>
跳转目的地处写<a name="idname">…</a>

举例：例如在拉布拉多的介绍页面中要快速跳转到

<br/><br/>
<a name="eat">饲养方法</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/>
<a href="#eat">跳到饲养方法</a>

10. base标签

格式：<base target="_blank"/>
注意：它是一个单标签
用于设置在点击链接以后打开新的窗口，而不必在每个<a>处设置
在<head></head>中写

举例：

<head>
    <base target="_blank"/>
</head>

10. 特殊字符

当有时候要在屏幕上输出一些特殊字符时，不能直接按原来的方式写，这时就要用到一些特殊的写法了

在这里插入图片描述

11. 注释标签

格式：

二. 列表

1. 列表标签：ul li 标签 `<ul><li></li></ul>`

在这里插入图片描述

格式：

<ul>

<li> 列表1</li>

<li> 列表2</li>

<li> 列表3</li>

</ul>

<ol>

<li> 列表1</li>

<li> 列表2</li>

<li> 列表3</li>

</ol>

<dl>

<dt>标题</dt>

<dd> 列表1</dd>

<dd> 列表2</dd>

<dd> 列表3</dd>

注意：<ul>里面不允许有其他标签，只能放<li>标签，但是<li>里面可以写其他标签
<dt>标签里面的是标题，<dd>标签都是围绕<dt>来开展的
分为有序列表，无序列表，自定义列表
举例：

<ul>          //无序，默认实心点
    <li>拉布拉多</li>
    <li>阿拉斯加</li>
    <li>哈士奇</li>
    <li>萨摩耶</li>
</ul>
<ul type="circle"> //无序，空心点
    <li>拉布拉多</li>
    <li>阿拉斯加</li>
    <li>哈士奇</li>
    <li>萨摩耶</li>
</ul>
<ul type="square">//无序，实心方格
    <li>拉布拉多</li>
    <li>阿拉斯加</li>
    <li>哈士奇</li>
    <li>萨摩耶</li>
</ul>

在这里插入图片描述

<ol>
    <li>中国</li>
    <li>美国</li>
    <li>俄罗斯</li>
    <li>英国</li>
</ol>
<ol start="10">
    <li>中国</li>
    <li>美国</li>
    <li>俄罗斯</li>
    <li>英国</li>
</ol>
<ol type="A">
    <li>中国</li>
    <li>美国</li>
    <li>俄罗斯</li>
    <li>英国</li>
</ol>
<ol type="a">
    <li>中国</li>
    <li>美国</li>
    <li>俄罗斯</li>
    <li>英国</li>
</ol>
<ol type="I">
    <li>中国</li>
    <li>美国</li>
    <li>俄罗斯</li>
    <li>英国</li>
</ol>
<ol type="i">
    <li>中国</li>
    <li>美国</li>
    <li>俄罗斯</li>
    <li>英国</li>
</ol>

在这里插入图片描述

<dl>
    <dt>中山</dt>
	<dd>石歧</dd>
	<dd>南朗</dd>
	<dd>古镇</dd>
	<dd>小榄</dd>
</dl>

在这里插入图片描述

三. 表格

在这里插入图片描述

1. 表格标签：table标签

<table></table>

格式：

<table>

<tr> //表头

<th></th>
<th></th>
<th></th>

</tr>

<tr> //一行

<td></td> //一行里的第1个单元格

<td></td> //一行里的第2个单元格

<td></td> //一行里的第3个单元格

</tr>

</table>

<tr>标签代表一行，<td>标签代表一行里面的一个单元格，没有列的说法
table标签里面只能放tr标签，tr标签里只能放td标签，但是td里面可以加其他标签,例如里面可以放ul，li标签
<th>是表头标签：用于第一行或第一列
table标签里面只能放tr标签，tr标签里面只能放td标签，但是td里面可以加其他标签
表格属性

在这里插入图片描述

举例：

1.boder：设置边框

<table border="1">
    <tr>
        <td>张三</td>
        <td>李四</td>
        <td>王五</td>
    </tr>
</table>

在这里插入图片描述

2.cellspacing：设置单元格之间的距离**

<table border="1" cellspacing="0">
    <tr>
        <td>张三</td>
        <td>李四</td>
        <td>王五</td>
    </tr>
</table>

在这里插入图片描述

3.cellpadding：设置单元格里面的文字与单元格之间的距离

<table border="1" cellspacing="0" cellpadding="5">
    <tr>
        <td>张三</td>
        <td>李四</td>
        <td>王五</td>
    </tr>
</table>

在这里插入图片描述

4.表格结构

<table border="1" cellspacing="0" cellpadding="30" width="520" height="300" align="center">
	<thead>  //头部
        <tr>
            <th>姓名</th>    //表头标签，加粗，居中
            <th>性别</th>
            <th>年龄</th>
            <th>班级</th>
            <th>学号</th>
        </tr>
	</thead>
	<tbody>   //主体
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>21</td>
            <td>软件C班</td>
            <td>001</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>20</td>
            <td>网络A班</td>
            <td>002</td>
        </tr>
	</tbody>
</table>

5.表格标题

<table border="2">
       <caption>学生名单</caption>  //标题
       <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>班级</th>
            </tr>
       </thead>
       <tbody>
            <tr>
                <td>001</td>
                <td>嘉</td>
                <td>机械A</td>
            </tr>
       </tbody>
   </table>

在这里插入图片描述

6.合并单元格

跨列合并：colspan

<table border="2">
       <caption>学生名单</caption>
       <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>班级</th>
            </tr>
       </thead>
       <tbody>
            <tr>
                <td>001</td>
                <td>嘉</td>
                <td>机械A</td>
            </tr>
            <tr>
                <td>002</td>
                <td>杰</td>
                <td>计算机B</td>
            </tr>
            <tr>
                <td>003</td> //合并2,3列
                <td colspan="2">行政管理</td>  
            </tr>
       </tbody>
</table>

在这里插入图片描述

跨行合并: rowspan

<table border="2">
       <caption>学生名单</caption>
       <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>班级</th>
            </tr>
       </thead>
       <tbody>
            <tr>
                <td>001</td>
                <td>嘉</td>
                <td rowspan="2">机械A</td> //合并                                             1,2行
            </tr>
            <tr>
                <td>002</td>
                <td>杰</td>
            </tr>
            <tr>
                <td>003</td>
                <td>芸</td>
                <td>行政管理</td>
            </tr>
       </tbody>
   </table>

在这里插入图片描述

7. 表格颜色: bgcolor

<table border="1" cellspacing="0" cellpadding="10"  align="center" bgcolor="#7fffd4">
    <caption>学生信息</caption>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>班级</th>
        <th>学号</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>21</td>
        <td>软件C班</td>
        <td>001</td>
    </tr>
</table>

在这里插入图片描述

8. 表格背景图片: background

<table border="1" cellspacing="0" cellpadding="10"  align="center" background="images/2.jpg">
    <caption>学生信息</caption>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>班级</th>
        <th>学号</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>21</td>
        <td>软件C班</td>
        <td>001</td>
    </tr>
</table>

在这里插入图片描述

四. 表单和表单控件

在这里插入图片描述

1.表单控件

input控件

格式：<input />

注意：它是一个单标签；

可以通过type属性变化形状

value是设置默认值

name是为了实现单选分组

checked设置默认选中项

maxlength设置最大输入的数

在这里插入图片描述

举例：

 <p>用户名：
	<input type="text" value="请输入用户名"/>
 <p/>
 <p>密  码：<input type="password"/><p/>
 <p>性  别：
     <p>性  别：
         <input type="radio" name="sex"                     checked="checked"/>女 
         <input type="radio" name="sex"/>男
     <p/>
 <p>爱  好：
     <input type="checkbox" name="loving"               checked="checked"/>篮球
     <input type="checkbox" name="loving"/>足球
     <input type="checkbox" name="loving"/>乒乓球
</p>
 <input type="button" value="完成"/>
 <input type="reset"/>
 <input type="submit"/><br/><br/>
 <p>上传身份证图片：
	<input type="file" /><br/><br/>
 </p>
 <input type="image" src="images/find2.png"/>

在这里插入图片描述

2.label标签

格式：<label> <input type=" "/> </label>
作用：点击标题光标也能进复选框
举例

 <label>输入账号：<input type="text"/></label>

当label里面有多个表单，想定位到某个，可通过 for id 实现

<label for="three">
   输入账号：<input type="text"/><br/>
   输入密码：<input type="password"/><br/>
   输入年龄：<input type="text" id="three"/>
</label>

在这里插入图片描述

3.textarea控件（文本域）

用途：将输入的文字规定在一定的范围内

留言板：<textarea>输入留言</textarea>

在这里插入图片描述

4.下拉菜单控件

格式：

<select>

<option>选项1</option>

<option>选项2</option>

<option>选项3</option>

<option>选项4</option>

</select>

注意：可以使用selected="selected"设置默认选中项
举例：

 狗狗种类：
    <select>
        <option>拉布拉多</option>
        <option>哈士奇</option>
        <option>阿拉斯加犬</option>
        <option>法国斗牛犬</option>
        <option>金毛</option>
    </select>

在这里插入图片描述

5.表单域

用途：把表单里要提交的内容框起来一起提交
格式：

<form action=“后台服务器地址” method=“提交方式” name=“表单名称”>

<input />

</form>

例子：

 <form action="demo.php" method="post" name="login">
        <p>账号：<input type="text"/></p>
        <p>密码：<input type="password"/></p>
        <p>年龄：<input type="text" /></p>
		<input type="submit"/>
        <input type="reset"/>
 </form>

在这里插入图片描述

注意：

1.在提交方式中，get提交比较快，但是会显示出数据，不安全

在这里插入图片描述

2.而post提交的时候速度慢一些，但是不会显示数据，比较安全

在这里插入图片描述

五. HTML5框架

1.frame(已过时)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端练习</title>
   <!-- <link rel="stylesheet" href="TheStyle.css">-->
</head>     //注意，没有body标签
    <frameset cols="30%,20%,50%">
        <frame src="frameA.html"><frame>
        <frame src="frameB.html"><frame>
        <frame src="frameC.html"><frame>
    </frameset>
</html>

在这里插入图片描述

2.iframe

<!DOCTYPE html>     //test.html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端练习</title>
    <link rel="stylesheet" href="TheStyle.css">
</head>
<body>
    <iframe src="frameC.html" frameborder="0" height="600px" width="600px"></iframe>
</body>
</html>


<!DOCTYPE html>     //frameA.html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="#ffd700">
    frameA
    <br/>
    <a href="http://baidu.com" target="_blank">_blank</a><br/>    //在新窗口打开
    <a href="http://baidu.com" target="_self">_self</a><br/>   //在本身窗口打开
    <a href="http://baidu.com" target="_parent">_parent</a><br/>   //在上一级打开
    <a href="http://baidu.com" target="_top">_top</a>      //在最顶层打开
</body>
</html>


<!DOCTYPE html>      //frameB.html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="#7fff00">
    frameB
    <br/>
    <iframe src="frameA.html" frameborder="0" width="200px" height="200px"></iframe><br/>
</body>
</html>


<!DOCTYPE html>      //frameC.html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="#ff69b4">
    frameC
    <br/>
    <iframe src="frameB.html" frameborder="0" width="400px" height="400px"></iframe>
</body>
</html>

在这里插入图片描述

六. HTML5新增标签和属性

1.header标签

用途：定义页面的头部
header里可以包含很多标签，例如：h, p, nav, a

也可以是某个区域块的头部

<header>
    <h1>狗狗</h1>
    <p>狗狗是人类最忠实的朋友</p>
    <a href="http://baidu.com">百度一下去了解</a>
    <nav>
        <ul>
            <li>拉布拉多</li>
            <li>金毛</li>
            <li>哈士奇</li>
        </ul>
    </nav>
     <article>
            <header>拉布拉多很聪明友善</header>
     </article>
</header>

在这里插入图片描述

2.nav标签

用途：定义导航链接部分
nav标签只起语义的作用，没有实际的显示效果
nav标签中的内容通常是一个列表

<nav>
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
</nav>

3.footer标签

用途：定义页面底部
通常包括相关区块的脚注信息
也可以是某个区域块的低部

<footer>
    <nav>
        <ul>
            <li><a href="#">拉布拉多</a></li>
            <li><a href="#">金毛</a></li>
            <li><a href="#">哈士奇</a></li>
        </ul>
    </nav>
</footer>
<article>
    <footer>文章底部</footer>
</article>

在这里插入图片描述

4.article标签

用途：定义文章
具有独立性
和div有点类似，可以嵌套使用

<article>
    <header>
        标题
    </header>
    <p>内容</p>
    <footer>
        页脚
    </footer>
</article>

在这里插入图片描述

5. embed标签（内嵌页面）

<h1>内嵌页面</h1>
    <object>
        <embed src="http://baidu.com" width="600px" height="400px">
    </object>

在这里插入图片描述

6.section标签

用途：定义页面区段
强调分段和分块
section是要存在一个标题的

<article>
        <h1>水果</h1>
        <p>水果的种类</p>
        <section>
            <h3>苹果</h3>
            <p>苹果红色的</p>
        </section>
        <section>
            <h3>香蕉</h3>
            <p>香蕉黄色的</p>
        </section>
        <section>
            <h3>橘子</h3>
            <p>橘子橙色的</p>
        </section>
    </article>

在这里插入图片描述

7.aside标签

用途：用来表示当前页面或文章的附属信息部分
用于区别于主要内容部分
只起语义的作用，没有实际的显示效果
aside 的内容应该与 article 的内容相关

<article>
        <h1>水果</h1>
        <p>水果的种类</p>
        <aside>
            <h1>非主要内容</h1>
            <p>...</p>
        </aside>
    </article>
    <aside>      //侧边栏
        <nav>
            <ul>
                <li>a</li>
                <li>b</li>
                <li>c</li>
            </ul>
        </nav>
    </aside>

8.datalist标签 (类似下拉框，但是可以自行输入并保存)

格式：

<input type="" list="a"/>

<dataliat id="a">

<option> </option>

</datalist>

注意：一般配合input标签来使用
举例：

<input type="text" value="输入姓名" list="star"/>
<datalist id="star">
     <option>黄晓明</option>
     <option>黄佳鹏</option>
     <option>黄磊</option>
     <option>张家辉</option>
     <option>张国荣</option>
</datalist>

在这里插入图片描述

9.fieldset标签

格式：

<fieldset>

<legend> </legend>

<input type=""/>

</fieldset>

注意：一般和<legend>标签一起使用

举例：

<fieldset>
    <legend>用户登录</legend>
    用户名：<input type="text"/><br/><br/>
    密码：<input type="password"/>
</fieldset>

在这里插入图片描述

10.HTML5新增input表单

在这里插入图片描述

举例：
```
邮箱：<input type="email"/><br/>
```

在这里插入图片描述

数字：<input type="number"/><br/>

在这里插入图片描述

网址：<input type="url"/><br/>

在这里插入图片描述

搜索：<input type="search"/><br/>

在这里插入图片描述

区域：<input type="range"/><br/>

在这里插入图片描述

11.新增占位符焦点多选属性

在这里插入图片描述

placeholder

输入前显示的灰色文字，一旦输入就显示

autofocus

光标会自动跳到文本框中，不用自己点击

<input type="text" placeholder="输入前显示的文字" autofocus="autofocus"/>

在这里插入图片描述

multiple

可上传多个文件

<input type="file" multiple/>

在这里插入图片描述

autocomplete:

会记录输入过的内容，当再次输入相同的字的时候就会自动跳出来有补充
使用这个必须有提交按钮，还要有name属性

<form action="">
        <input type="text" autocomplete name="user"/>
        <input type="submit"/>
</form>

在这里插入图片描述

pattern

设置正则表达式，若输入不符合要求，则会报错

<form id="test">
   字母：<input type="text" name="country_code" pattern="[A-z]{3}"
                title="请输入三个大写字母" />
    <input type="submit" />
</form>

在这里插入图片描述

indeterminate

用在checkbox中

用于表示复选框的不确定选择状态

<form id="test">
   <input type="checkbox" indeterminate/>苹果
</form>
<script>
    document.getElementsByTagName("input")[0].indeterminate = true;
</script>

在这里插入图片描述

12.内容不为空和跳到文本框

required

如果不输入内容，文本框会显示红色，表示不可为空

accesskey="s"

表示在alt+s跳到文本框处

 姓名：<input type="text" required accesskey="s"/>

在这里插入图片描述

13.表单综合案例（学生档案）

<form>
      <fieldset>
          <legend >学生档案</legend>
             <label>姓名：<input type="text" placeholder="请输入姓名"/></label><br/><br/>
             <label>手机号：<input type="tel"/></label><br/><br/>
             <label>邮箱：<input type="email"/></label><br/><br/>
             <label>学院：<input placeholder="请选择学院" list="xueyuan"/></label><br/><br/>
             <datalist id="xueyuan">
                 <option>计算机学院</option>
                 <option>电信学院</option>
                 <option>外国语学院</option>
                 <option>人文学院</option>
             </datalist>
             <label>出生日期：<input type="date"/></label><br/><br/>
             <label>成绩：<input type="number"/></label><br/><br/>
           	 <label>毕业时间：<input type="date"/></label><br/><br/>
             <input type="submit"/>
             <input type="reset"/>
       </fieldset>
</form>

在这里插入图片描述

14.播放音频

autoplay:是设置自动播放
controls：可控制的，有了这个属性就会出现以下控制图标
loop=“n”:代表音频循环播放n次，当n= -1时，为无限循环播放

<audio src="kai.mp3" autoplay="autoplay" controls loop="3"></audio>

在这里插入图片描述

充分考虑浏览器兼容性

 <audio autoplay="autoplay" controls>
        <source src="kai.mp3"/>
        <source src="kai.ogg"/>
        您的浏览器不支持音频播放
 </audio>

15.播放视频

    <video src="htmlvdio.mp4" autoplay="autoplay" controls ></video>

充分考虑浏览器兼容性

<video autoplay="autoplay" controls>
        <source src="htmlvdio.mp4"/>
        <source src="htmlvdio.ogg"/>
        您的浏览器不支持视频播放
</video>

16. spellcheck属性（检查拼写错误）

<input type="text" spellcheck="true">

在这里插入图片描述

17. time标签和pubdate属性

用于显示时间时括住
pubdate属性是表明文章的发布时间时加上的属性
二者加不加显示上都是无区别，都是语义上的

<article>
    <header>
        <h1>关于<time datetime="2010-10-29">10月29日</time>的春游的通知</h1>
        <p>发布日期
            <time datetime="2010-10-11" pubdate>2010年10月11日</time>
        </p>
    </header>
    <p>大家好，请大家认真阅读春游准备事项</p>
</article>

18. hgroup元素

用于对标题的分组
当一个标题是某个标题的子标题时，就把它们归为一组

<hgroup>
        <h1>大标题</h1>
        <h2>子标题</h2>
</hgroup>

在这里插入图片描述

19. adderss标签

用于承载一些联系方式，地址等信息

<footer>
    <a href="#">联系人：李四</a><br/>
    <a href="#">联系地址：电子科技大学中山学院</a>
</footer>

在这里插入图片描述

20. formaction,formmethod,formenctype,formtarget属性

这些属性可以单独放在某个表单中进行单独设置，而不是统一在form中设置
formaction可以使表单提交到不同页面
formmethod对每个表单元素分别指定不同的提交方法
formenctype对表单元素分别指定不同的编码方式
formtarget用于指定提交后在何处打开需要加载的页面（自身打开还是空白页打开… …）

<form id="test">
    <input type="submit" formmethod="get" value="提交1">
    <input type="submit" formaction="xx.jsp" value="提交2">
    <input type="submit" formenctype="multipart/form-data" value="提交3">
    <input type="submit" formtarget="blank" value="提交4">
</form>

21. image提交按钮

<form id="test">
    姓名：<input type="text">
    <input type="image" src="images/dog.jpg" width="70px" height="50px"/>
</form>

在这里插入图片描述

七. 设置背景

1. 图片背景

background="dog.jpg"

2.颜色背景：

bgcolor="yellow"

八. HTML实体

用于在页面中来表示例如<html>这种关键词的,直接写是显示不出来的

&lt;html&gt

在这里插入图片描述

****HTML笔记

一. HTML常用标签

1. 段落标签：p标签 <p></p>

2. 标题标签：h标签 <h></h>

3. 水平线标签：hr标签（单标签）<hr />

4. 换行标签： <br />

5. 布局标签： <div>,<span>,<table>

6. 文本格式化标签 :

7. 图像标签： img标签 <img />

8. 链接标签：a标签 <a></a>

9. 锚点定位（点击链接跳到本页面相应位置）

10. base标签

10. 特殊字符

11. 注释标签

二. 列表

1. 列表标签：ul li 标签 <ul><li></li></ul>

三. 表格

1. 表格标签：table标签

四. 表单和表单控件

1.表单控件

2.label标签

3.textarea控件（文本域）

4.下拉菜单控件

5.表单域

五. HTML5框架

1.frame(已过时)

2.iframe

六. HTML5新增标签和属性

1.header标签

2.nav标签

3.footer标签

4.article标签

5. embed标签（内嵌页面）

6.section标签

7.aside标签

8.datalist标签 (类似下拉框，但是可以自行输入并保存)

9.fieldset标签

10.HTML5新增input表单

11.新增占位符焦点多选属性

placeholder

autofocus

multiple

autocomplete:

pattern

indeterminate

12.内容不为空和跳到文本框

required

accesskey="s"

13.表单综合案例（学生档案）

14.播放音频

15.播放视频

16. spellcheck属性（检查拼写错误）

17. time标签和pubdate属性

18. hgroup元素

19. adderss标签

20. formaction,formmethod,formenctype,formtarget属性

21. image提交按钮

七. 设置背景

1. 图片背景

2.颜色背景：

八. HTML实体

1. 段落标签：p标签 `<p></p>`

2. 标题标签：h标签 `<h></h>`

3. 水平线标签：hr标签（单标签）`<hr />`

4. 换行标签： `<br />`

5. 布局标签： `<div>,<span>,<table>`

7. 图像标签： img标签 `<img />`

8. 链接标签：a标签 `<a></a>`

1. 列表标签：ul li 标签 `<ul><li></li></ul>`