文章目录
1 HTML基本结构
<!-- 声明当前文档是html5文档 -->
<!DOCTYPE html>
<!-- html,根元素 ，围堵标签-->
<html>
<!--
head,头元素：
作用：
1、用于指定HTML文章中的一些元数据，
例如元数据 meta：定义页面的编码格式
title:定义页面的标题
2、引入外部的资源文件--未来讲解
-->
<head>
<meta charset="utf-8" />
<title>这是我的第一个HTML页面</title>
</head>
<!--body，主体：浏览器显示的内容都将在这里编写
格式化代码的快捷键：ctrl+shift+f（英文状态下使用）
-->
<body>
hello html 这是我的第一个HTML页面
</body>
</html>
2 常用标签
2.1 文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的第一个HTML标题标题</title>
</head>
<body>
<h2>摸鱼儿，雁秋词</h2>
<p>问世间<span style="color: green;">情为何物</span>，<br/>直叫人生死相许。</p>
<hr color="red", size="4"/>
<h2>诗词2</h2>
<p>天街小雨润如酥，<br/>草色遥看近却无</p>
</body>
</html>
- 标题标签：<h1>、<h2>、…<h6>
- 段落标签：<p>
- 换行标签：<br/>
- 水平分割线：<hr/> （可以通过属性的方式设置样式）
- 范围标签：<span>，一般嵌套在其他标签中使用，用于选中某一个范围，通过设置span标签的属性为选中的文字添加效果。
2.2 图片标签
2.2.1 基本标签
<img src="img/test.png" title="ADE实验室" width="200px" height="200px"/>
- src: 设置图片的路径。路径推荐使用相对路径（相对于当前html文件的路径）。
../表示上一级目录。- title：作用1：当鼠标悬停在图片上弹出此文字；作用2：当图片没有加载出来，在图片的位置显示该文字。
- width和height：调整图片的宽度和高度
2.2.2 设置图片的热点区域（了解）
当点击图片的某一部分时自动跳转到其他页面的功能。
<img src="img/bg1.png" usemap="#mymap"/>
<map name="mymap">
<!--
圆形区域，坐标为（圆心x，圆心y，半径）
-->
<area shape="circle" coords="100,100,100" title="圆形-大米" href="index2.html"/>
<!--
矩形区域，坐标为（左上角x，左上角y，右下角x，右下角y）
-->
<area shape="rect" coords="400,100,600,200" title="矩形-面粉" href="index3.html" />
<!--
其他多边形区域，坐标为每个点的x,y坐标（顺次写出）
-->
<area shape="poly" coords="300,240,200,300,240,400,360,400,400,300" title="五边形-食用油" href="index4.html" />
</map>
2.3 列表标签
可以实现导航栏。
ul-li：无序标签（ul：unordered list）
ol-li：有序标签（ol：ordered list）
<ul>
<li>超市特供</li>
<li>超值量贩</li>
</ul>
<ol>
<li>超市特供</li>
<li>超值量贩</li>
</ol>
ul和ol里面规范化是只写li。假如要嵌套也是在li中嵌套。
2.4 定义描述标签
一般用在图文混编的场景中。
- <dl>
- <dt>
- <dd>
- <dd>
- …
<dl>
<dt><img src="img/a.png" /></dt>
<dd>小熊饼干</dd>
<dd>售价：￥9.9</dd>
</dl>
2.5 div标签
div是一个容器，用于盛放标签，将其他标签组合在一起用来布局。
2.6 标签分类
html标签可以分为块状元素和行级元素两类。
- 块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素；
- 行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。
PS:区分的简单方法：是否独占一行。
块状元素和行内元素的区别：
- 1、 块级元素会独占一行，其宽度自动填满其父元素宽度；行内元素会排列到同一行里，其宽度随元素的内容变化而变化。
- 2、块级元素可以设置宽高；行内元素设置宽高无效。
- 3、块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖直方向的padding没有效果。
我们上面已经讲过的标签中归类一下：
属于块状元素的：
- 标题标签 h1-h6,
- 段落标签 p ,
- 水平线标签 hr,
- 有序列表标签 ol–li，
- 无序列表标签 ul–li，
- 定义描述标签 dl-dt-dd，
- 容器标签 div：
属于行级元素的：
- 范围标签：span
- 图像标签：img
2.7 超链接
超链接一般有两个作用：实现页面之间的跳转、实现锚链接功能。
锚链接：就是类似于一个网页滑到很下面的时候，一键返回顶部的功能。
2.7.1 页面间跳转
<a href="index.html" style="color: red;" target="_blank">点击我跳转到首页</a>
- href=“目标资源路径”，推荐相对路径。
- target：打开资源的位置。默认：_self：在当前页面打开。_blank：以一个新页面的形式打开。
2.7.2 锚链接
锚链接可以跳转到本页面或者其他页面的某个位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<a href="index.html" style="color: red;" target="_blank">点击我跳转到首页</a>
<a href="#sport" target="_self">点我跳转到本页面运动休闲区</a>
<a href="超链接3.html#sport" target="_blank">点我跳转到其他页面运动休闲区</a>
</body>
<div style="height: 500px;">
<h1>第一个块，弄高一点好让占一页</h1>
</div>
<div style="height: 500px;">
<h1>第二个块，弄高一点好让占一页</h1>
</div>
<div style="height: 500px;">
<h1>第三个块，弄高一点好让占一页</h1>
</div>
<div style="height: 500px;">
<h1>第四个块，弄高一点好让占一页</h1>
<h2>运动休闲区</h2>
<a name="sport">
<!--定义此超链接标签只需要定义name属性即可，因为它不用跳转其他页面，定义name方便从其他位置跳转到这里-->
</a>
</div>
</html>
2.8 表格
格式：
- table
- <tr> 定义行
- <td>、<th> 定义单元格（列）（<th>通常用来定义第一行标题行）
常用属性：
-
table：
- height：高度（可以用百分比表示）
- width：宽度（可百分比）
- border：边框（不带px单位）
- cellpadding：内容与单元格之间的距离
- cellspacing：单元格之间的距离
-
td单元格：
- align：对齐方式
- valign：竖直对齐方式
不规则表格的实现：
在td中设置跨行数rowspan，或者跨列数colspan，即可。
高级标签：
- <caption>：定义表格标题
- <thead>：定义表格题头
- <tbody>：定义表格内容
- <tfoot>：定义表格尾端
2.9 表单（重要）
表单用于采集用户数据并且与服务器进行交互。
- <form>标签：
- action：指定提交数据的URL（提交数据到这个地方）
- method：提交方式
- get：
- 请求参数会显示在地址栏中。会封装到请求行中。
- 请求参数大小是有限制的。
- 不太安全
- post：
- 请求参数不会显示在地址栏中。会封装在请求体中。
- 请求参数没有大小限制
- 较为安全
- get：
- enctype：表单中有上传的文件的时候必备该属性，且取值为multipart/form-data
表单项元素的一些属性：
id: 元素的唯一表示，不重复
name: 表单项元素的名称，很重要–提交数据到服务器之后，服务器获取数据通过该名称
value: 表单项元素的值，服务器获取数据通过name获取到的就是value
type: 表示表单项元素的呈现形式
class: 表示样式名称
readonly: 表示只读，用户只能看不能改
disabled: 表示禁用，该元素不能改而且背景是灰色
2.9.1 文本框
<input id="userName" name="userName" type="text" placeholder="请输入用户名" /><br />
- id: 表示元素的唯一标识，不推荐重复
- name：表单元素的名称
- type：设置为text。text也是表单元素的默认值
- placeholder：文本框中显示的文字用于提示用户
2.9.2 密码框
<input type="password" id="password" name="pasword" placeholder="请输入密码" required/><br />
- required：表示必须输入
- type=“password”：表示这是个密码框，输入内容会以圆点代替
required属性设置效果：如果不填写此字段就提交，会提示“请填写此字段”
2.9.3 单选框
<input type="radio" id="gender" name="gender" value="男" checked/>男
<input type="radio" id="gender" name="gender" value="女" />女<br />
- type=“radio”：单选框
- name：多个单选框通过此属性实现只能选中一个的效果
- value：用于表单提交使用
- checked：表示默认选中
注意在后面要加上此单选项显示的内容
2.9.4 复选框
<input type="checkbox" name="hobby" value="NBA" />NBA
<input type="checkbox" name="hobby" value="badminton" />羽毛球
<input type="checkbox" name="hobby" value="dance" />跳舞
<input type="checkbox" name="hobby" value="sing" checked/>唱歌 <br />
- type=“checkbox”
- name：通过设置相同的name表示同一组复选框
- checked：默认选中
2.9.5 文件域
<input type="file" name="headFile" /><br />
2.9.6 日期（h5新特性）
<input type="date" name="birthday">
- type:
- date: 年月日
- datetime-local：年月日时间
2.9.7 下拉列表框
<td>年份：
<select name="year">
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select>
月份：
<select name="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
日期：
<select name="date">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
使用select-option组合实现
2.9.8 文本域
<textarea rows="15" cols="40" readonly disabled>
用户协议：
1. 必须遵守国家法律法规
2. ......
3. ......
</textarea>
- readonly：只读
- disabled：变灰
2.9.9 按钮
实现方式一：input实现，其中value属性表示按钮上显示的内容。
<input type="submit" name="submit" value="提交"/>
<input type="reset" name="reset" value="重置" />
<input type="button" name="button" value="按钮" />
<input type="image" src="img/a.png">
图片按钮实现的是提交按钮的作用。
实现方式二：button实现，其中button后面跟的文字表示显示的内容
<button type="submit" name="submit">提交</button>
<button type="reset" name="reset">重置</button>
<button type="button" name="button">按钮</button>
一共四种按钮：
- submit: 提交按钮，将表单以method形式提交到action里。
- reset：重置按钮，将表单所有内容重置。
- button：没有功能
- image：图片按钮，实现的是提交的功能
2.9.10 label标签
label的for属性一般对应input的id属性，实现点击label后input输入框获取到焦点。
<label for="userName">用户名：</label>
2.9.11 隐藏域
不会显示在界面上，但是程序员会关心的一个域。
<input type="hidden" name="userId" value="1001" />
2.9.12 整合
<!--表单练习-->
<form action="dest.html" method="get" enctype="multipart/form-data">
<table cellpadding="0" cellspacing="0" align="left" width="100%">
<caption>
<h1>用户注册</h1>
</caption>
<tr>
<td>隐藏域：</td>
<td><input type="hidden" name="userId" value="1001" /></td>
</tr>
<tr>
<td><label for="userName">用户名：</label></td>
<td>
<input type="text" id="userName" name="userName" placeholder="请输入您的用户名"/>
</td>
</tr>
<tr>
<td><label for="password">密码：</label></td>
<td>
<input type="password" id="password" name="password" placeholder="请输入密码" required/>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="gender" value="男" checked/>男
<input type="radio" name="gender" value="女"/>女
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby" value="NBA" />NBA
<input type="checkbox" name="hobby" value="badminton" />羽毛球
<input type="checkbox" name="hobby" value="dance" />跳舞
<input type="checkbox" name="hobby" value="sing" checked/>唱歌
</td>
</tr>
<tr>
<td>头像：</td>
<td>
<input type="file" name="headFile"/>
</td>
</tr>
<tr>
<td>生日：</td>
<td>
<input type="date" name="birthday"/>
</td>
</tr>
<tr>
<td>生日2：</td>
<td>年份：
<select name="year">
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select>
月份：
<select name="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
日期：
<select name="date">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>协议：</td>
<td>
<textarea rows="10" cols="40" readonly disabled>
用户协议：
1. 必须遵守国家法律法规
2. ......
3. ......
</textarea>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="提交"/>
</td>
<td>
<input type="reset" name="reset" value="重置" />
<input type="button" name="button" value="按钮" />
<input type="image" src="img/a.png">
</td>
</tr>
</table>
</form>
2.10 框架iframe
实现在一个页面上显示多个页面的功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架</title>
</head>
<body>
<p>
<a href="https://www.baidu.com" target="content">查询</a>
<a href="sub/myorder.html" target="content">我的订单</a>
<a href="sub/shop.html" target="content">我关注的店铺</a>
</p>
<iframe name="content" src="sub/welcome.html" width="100%" height="300px" frameborder="0"></iframe>
</body>
</html>
- 原来我们使用超链接时，target设置"_self"或者"_blank"表示在本页面或者新开页面显示。现在我们可以指定一个iframe来显示，给target设置为iframe的name即可。
iframe显示的内容可以通过超链接设置的href指定，也可以通过其自身的src属性指定。当两者都定义的时候，框架会默认显示src指定的内容，其次点击超链接后显示超链接指定的内容。
效果：
- 默认状态
- 点击了查询
- 点击了“我的订单”
以上就实现了在一个框架内，根据超链接显示不同内容的效果。
2.11 HTML5中表单的新属性
-
autocomplete属性
可以实现数据自动填入。此属性可以在form元素中开启，在input当中关闭。
适用于以下类型的input标签：text、search、url、telephone、email、password、datepickers、range以及color。 -
multiple属性
可以让<input>元素中选择多个值。可用于email和file类型。
上传多个文件：
<input type=“file” name=“img” multiple />
- list属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
使用的时候，需要指定list是哪个datalist，以id查找。
<input list="majors" type="text" name="major" placeholder="请输入您的专业"/>
<datalist id="majors">
<option value="computer science">计算机</option>
<option value="civil engineering">土木工程</option>
<option value="mechanical engineering">机械工程</option>
<option value="animation production">动漫制作</option>
<option value="math">数学</option>
<option value="physics">物理</option>
</datalist>
效果：
其本质上还是一个文本类型，只是说提供一些选项可以快速选择。和select-option不同，select-option是下拉列表，只能选择给定的内容。另外datalist-option中option的value值会显示在页面上（如上图所示）。
81
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
