HTML--标签

标题标签h：

html中一共有六级标签 —> h1最大 h6最小
6级标题中 h1最重要 表示一个网页中的主要内容 h2到h6的重要性依次递减
对于搜索引擎来说，h1的重要性仅次于title。搜索引擎检索完title,会立即查看h1中的内容。h1会影响页面在搜索引擎中的排名。
一个页面只能写一个h1

段落标签p:

p标签独占一行

换行标签br和水平线标签hr：

在html中，字符之间写再多空格，也只当做一个空格解析。换行也当做一个空格解析。
使用br换行（自结束标签），多个br标签可以连续使用，使用了多少个br标签就会换多少行。
hr在页面中生成一条水平线（自结束标签）

图片标签img：

使用img标签向网页中引入外部图片
<img src='url' alt='text' width='200' height='200'/>

1. text：

当图片无法显示时的替换文字。而且搜索引擎通过alt中的文字来识别不同的图片。如果不写alt属性，则搜索引擎不会对img中的图片进行收录。

2.width和height：

用来设置图片的宽高。默认单位是px。
（当宽度和高度属性只设置一个时，另一个也会同时等比例调整大小。）
手动指定图片的宽高，可能会导致图片变形。只指定其中一个（宽or高）不会变形

3. title：

当鼠标悬停在图片上时，弹出的提示框中显示的内容

4.图片的格式：

JPEG(JPG) ：支持的颜色多，可压缩，不支持透明。一般用来保存照片等颜色丰富的图片。
GIF：支持动态图，支持的颜色少，支持简单的透明。一般在颜色图片单一或动态图时使用GIF。
PNG：支持的颜色多，支持复杂的透明。用来显示颜色复杂的透明图片。
图片的使用原则：效果不一致，使用效果好的。效果一致，使用小的。

路径：

相对路径：都是从当前.html文件所在的文件夹开始查找

1.同级：图片和.html文件存储在同一个文件夹中
格式：src=“QRCode.jpg” 在.html文件所在的文件夹中寻找名为QRCode.jpg的图片
2.下级：存储图片的文件夹和.html文件存储在同一个文件夹中
格式：src=“images/QRCode.jpg” 在.html文件所在的文件夹中寻找名为images的文件夹，然后在images文件夹中寻找名为QRCode.jpg
3.上级：图片所在的位置和存在.html文件的文件夹在同一个文件夹中
格式：src="…/QRCode.jpg" 在.html文件所在的文件夹中找到该文件夹所在的上一级文件夹，然后在上一级文件夹中寻找图片
使用 …/ 返回当前html所在的上一级目录

绝对路径：从指定的盘符开始查找

格式: src=“C:\Users\Jonathan_Lee\Desktop\HTML基础\QRCode.jpg”

使用路径要注意的问题：

路径中不要出现中文，否则可能出现未知的问题
通过相对路径指定图片，不能跨盘符。例如.html文件在C盘, 那么不能去查找D盘图片
路径使用反斜杠/，不要使用正斜杠\。

超链接a：

一个未访问过的链接显示为蓝色字体并带有下划线。访问过的链接显示为紫色并带有下划线。点击链接时，链接显示为红色并带有下划线。

1. href 属性：

指定链接的地址 <a href="url">链接文本或图片等</a>

2.实现点击超链接后不跳转：

1.<a href="javascript:;">内容</a>
2 在onclick响应函数的最后，return false 取消默认行为
3.href=’#’ 点击该超链接，会自动跳转到当前页面的顶部。

3.锚点：

href=’#id名’ 可跳转到当前页面具有该id名的元素位置处。
使用锚点，直接跳转到指定位置，不会出现过度的滚动动画。
在url后添加#id名，可以直接跳转到指定url的指定id名所在的位置。

如 <a href="13-锚点测试界面.html#bottom" target="_blank">跳转到锚点测试界面` 跳转到该html文件中id名为bottom所在的位置

4.发送邮件的超链接mailto：

点击链接后会自动打开计算机中默认的邮件客户端，并将收件人自动设置为mailto后的邮箱地址（abc@163.com）。

5.target属性：

用来指定打开链接的位置： 默认target=’_self ’ 在当前页面打开
target="_blank" 在新窗口打开链接的文档（网页）
target = ‘name’ name是内联框架中name属性的值，可以在内联框架中打开链接。

6.title属性：

和img标签中的title属性相同，都是控制鼠标悬停时提示框中显示的内容。

7.base标签：

放在head标签中，用来统一指定超链接的打开方式
如<base target="_blank">则该网页中所有超链接都在新窗口中打开。
如果同时在head中的base标签和body中的a标签中指定a的打开方式，按照a的打开方式执行。

列表：

1.无序列表ul：数据无先后之分

ul中最好只包含li标签，但是在li标签中可以继续添加其他标签。
默认用粗体小黑圆圈标记(disc)，通过type属性修改项目前符号，但是一般在css中修改。
应用场景：新闻列表 / 商品列表 / 导航条等。

<ul>
    <li>需要显示的条目内容</li>
	<li>需要显示的条目内容</li>
	<li>需要显示的条目内容</li>
	<li>需要显示的条目内容</li>
</ul>

2.有序列表ol:数据有先后之分

<ol>
    <li>演员</li>
    <li>小丑</li>
    <li>女人不应该让男人太累</li>
    <li>男人不应该让女人流泪</li>
</ol>

3.自定义列表dl：

应用场景： 做网站的尾部信息 / 图文混排

<dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
</dl>
//dt(definition title), 定义列表中的标题
//dd(definition description), 定义标题对应的描述
//一个dt可以没有对应的dd，也可以有多个对应的dd，建议使用一个dt对应一个dd

表格标签table：

<table> //table代表整个表格
    <tr>  //tr是表格中的一行
        <td>需要显示的内容</td>  //td是一行中的一个单元格
    </tr>
</table>

注意：表格标签有一个边框属性，这个属性决定了边框的宽度。默认情况下这个属性的值是0, 所以看不到边框

1.table的属性：

<!--
1.宽度和高度的属性：table标签和td标签使用
1.1表格的宽度和高度默认是按照内容的尺寸来调整的, 也可以通过给table标签设置width/height属性的方式来手动指定表格的宽度和高度
1.2如果给td标签设置widht/height属性, 会修改当前单元格所在行/列的宽度和高度, 不会影响整个表格的宽度和高度

2.水平对齐align：table标签 , tr标签和td标签使用
  table的align属性：控制表格在水平方向的对齐方式
  tr的align属性：控制当前行中所有单元格内容的水平方向的对齐方式
  td的align属性：控制当前单元格中内容在水平方向的对齐方式
注意点: 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐

3.垂直对齐valign：只能给tr标签和td标签使用
  tr的valign属性：控制当前行中所有单元格中的内容在垂直方向的对齐方式
  td的valign属性：控制当前单元格中的内容在垂直方向的对齐方式
注意点:  如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐

3.外边距和内边距的属性：只能给table标签使用
3.1.外边距cellpadding：单元格和单元格之间的距离  默认情况下是2px
3.2 内边距cellspacing：单元格的边框和文字之间的间隙  默认情况下是1

-->

<table border="1" width="300px" height="300px" align="right" cellspacing="12px" cellpadding="1">
    <tr valign="bottom">
        <td width="50px" height="50px">1.1</td>
        <td valign="top">1.2</td>
    </tr>
    <tr align="center">
        <td align="right">2.1</td>
        <td>2.2</td>
    </tr>
</table>

2.表格标题caption和表头th

<!--
1.表格标题caption
将标题写在caption标签中, 那么标题就会自动相对于表格的宽度居中
注意点:caption一定要写在table标签中, 否则无效, 并且要紧跟在table标签后面

2.标题单元格标签th（表头：表格第一行）th标签在单元格中 自动居中+文字加粗

3.td：存储数据  th：存储当前列的标题
-->

<table bgcolor="black" cellspacing="1px" width="800px" align="center">
    <caption>
        <h2>今日小说排行榜</h2>
    </caption>
    <tr bgcolor="#a9a9a9">
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
    </tr>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">暴走大事件</td>
        <td>
            <img src="images/up.jpg">
        </td>
        <td>623557</td>
        <td>4088311</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">暴走大事件</td>
        <td>
            <img src="images/up.jpg">
        </td>
        <td>623557</td>
        <td>4088311</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
</table>

3.表格的结构

表格分为：标题caption+ 表头thead + 主体tbody + 页尾tfoot

<table>
    <caption>表格的标题</caption>
    <thead>
        <tr>
            <th>每一列的标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>数据</td>
        </tr>
    </tfoot>
</table>
//如果没写tbody, 系统会系统添加tbody
//如果指定了thead和tfoot, 那么在修改整个表格的高度时, thead和tfoot有自己默认的高度, 不会随着表格的高度变化而变化
//tr并不是table的子元素 而是tbody的子元素 通过 table > tr 无法选中行 只能通过 tbody > tr 选中行

4.合并单元格

<!--
1.水平方向上的单元格合并colspan 把某一个单元格当做多个单元格来看待(水平方向)
例如:
<td colspan="2"></td>
含义: 把当前单元格当做两个单元格来看待

注意点:
1.由于把某一个单元格当做了多个单元格来看到, 会多出一些单元格, 所以需要删掉一些单元格才能正常显示
2.一定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并

2.垂直方向上的单元格合并rowspan属性 把某一个单元格当做多个单元格来看待(垂直方向)
例如:
<td rowspan="2"></td>
含义: 把当前单元格当做两个单元格来看待
-->
<table bgcolor="black" width="500px" height="300px" align="center">
    <tr bgcolor="white">
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <!--<td></td>-->
        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

表单标签form:

表单的结构和常用表单项：

<form>
    <!--文本输入框-->
    账号:<input type="text"><br>
    <!--密码输入框-->
    密码:<input type="password"><br>
    <!--value属性设置默认值-->
    账号:<input type="text" value="jiaody"><br>
    <!--单选框:默认情况下单选框不会互斥(互斥指只能选中一个), 要想单选框互斥,必须给每一个单选框标签都设置一个name属性(name属性值相同的是一组，在同一组中的单选框会互斥) -->
    性别:
    <input type="radio" name="xx" checked>男
    <input type="radio" name="xx">女
    <input type="radio" name="xx" >保密<br>
    <!--多选框-->
    爱好:
    <input type="checkbox">篮球
    <input type="checkbox">足球
    <input type="checkbox" checked="checked">棒球
    <input type="checkbox" checked="checked">足浴
     <!--定义一个普通按钮-->
	<input type="button" value="我是按钮" >
	<!--
	定义重置按钮:清空表单中的数据
	注意点:
	重置按钮有默认的按钮标题, 默认叫做 重置
	也可以通过value属性来修改默认标题
	-->
	<input type="reset" value="清空">
	
	<!--
	表单提交按钮: 将表单中的数据提交到远程服务器
	注意点:
	要想把表单中的数据提交到远程服务器,必须满足两个条件
	1.告诉表单需要提交到哪个服务器(form标签的action属性)
	2.只有设置name属性的表单项才会被提交
	-->
	<input type="submit">
	<!--
	隐藏域：不会出现在界面中 但是如果设置name属性，在表单提交时会以键值对的形式提交
	-->
	<input type="hidden" name="aaa" value="it666">
</form>

		<!-- 表单：将用户信息提交给服务器 （应用场景：搜索引擎的搜索框 注册登录等）
		form标签中有action属性，指向的是一个服务器的地址。
		 当提交表单时会提交到action属性对应的地址
		
	    input
	    type='text' (默认）单行文本框  (value属性是默认值)
	    type='password' 密码框 (value属性是默认值)
        type='radio' 单选按钮 
        type='checkbox' 多选按钮 
        type='button' 按钮
        type='reset' 重置按钮
        type='submit' 表单提交按钮 (默认提交按钮的文字是“提交”，通过value属性可以改变）
        type='hidden' 隐藏按钮 不会在页面中显示 设置name属性可以提交
        单选和多选按钮都通过name属性进行分组 name相同的是一组
        默认选中 checked='checked'
        如果属性的取值和属性的名称一样(checked = 'checked')，可以简写(checked)，但是在XHTML中必须写上取值
		需要用户选择但是不需要用户直接填写内容的表单项（单选和多选等） 还必须指定一个value属性，这样被选中的表单项的value属性将会最终提交给服务器
	    
		如果希望表单项的数据提交到服务器中还需给表单项设置name属性 
		用户填写的信息会附在url地址后 以查询字符串的形式发送给服务器：url地址？查询字符串
		格式： 属性名=属性值&属性名=属性值&属性名=属性值
     
		-->

表单标签：h5

    <!--
    可以自动校验输入的内容是否符合邮箱的格式
    -->
    邮箱:<input type="email"><br>
    <!--
    可以自动校验输入的内容是否是URL地址
    -->
    域名:<input type="url"><br>
    <!--
    输入框中只能输入数字
    -->
    电话:<input type="number"><br>
    <!--
    可以通过日历来选择时间
    -->
    时间:<input type="date"><br>

    <!--
    可以通过取色板来选择颜色
    -->
    颜色: <input type="color"><br>

label标签：

<!--
  label标签的作用：点击输入框前的文字时，使对应的输入框聚焦（将文字和输入框绑定在一起）
  绑定的格式：
  1.将文字用label标签包裹起来，并添加for属性 
  2.给输入框添加id 
  3.label中for属性值和input中id属性值相同的会绑定在一起
-->
<form action="">
    <label for="account">账号:</label><input type="text" id="account"><br>
    <label for="pwd">密码:</label><input type="password" id="pwd"><br>
</form>

待选项datalist：

<!--
datalist标签: 给输入框绑定待选项（当点击输入框或者输入不完整的内容时，会在输入框下方弹出待选项）
格式:
<datalist>
    <option>待选项内容</option>
</datalist>

给输入框绑定待选列表：
1.添加一个输入框，设置list属性
2.添加一个datalist列表，添加id,属性值和输入框的list属性值相同

-->

请输入你的车型: <input type="text" list="cars">

<datalist id="cars">
    <option>奔驰</option>
    <option>宝马</option>
    <option>奥迪</option>
    <option>路虎</option>
    <option>宾利</option>
</datalist>

下拉列表select和多行输入textarea:

<!--
select标签：下拉列表(不能输入内容, 但是可以直接在列表中选择内容)
selected属性  默认选中
格式:
<select>
    <optgroup label="分组名称">
        <option>列表数据</option>
    </optgroup>
</select>

textarea标签: 多行输入框
格式:
<textarea>
</textarea>
注意点:
1.默认情况下多行输入框可以无限换行，有自己的宽高，并且可以手动拉伸
2.可以通过cols和rows来指定输入框的宽度和高度, 指定以后还可以无限往下输入
-->

<select>
    <optgroup label="北京">
        <option>朝阳区</option>
        <option>昌平区</option>
        <option>通州区</option>
    </optgroup>
    <optgroup label="广州">
        <option>天河区</option>
        <option>越秀区</option>
        <option>黄浦区</option>
    </optgroup>
</select>
<hr>
<textarea cols="20" rows="5">
</textarea>

分组fileset和分组标题legend

fieldset标签会在包含的文本和input等表单元素外面形成一个方框，legend元素作为标题。

表单练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://www.baidu.com">
    <fieldset>
        <legend>用户信息</legend>
<p>
    账号：<input type="text" name="account">
</p>
<p>
    密码：<input type="password" name="pwd">
</p>
<p>
    性别：<input type="radio" name="sex" value="male" checked>男</input>
<input type="radio" name="sex" value="female">女</input>
<input type="radio" name="sex" value="baomi">保密</input>
</p>
<p>
    爱好：<input type="checkbox" name="hobby" value="basketball">篮球</input>
    <input type="checkbox" name="hobby" value="soccer" checked>足球</input>
    <input type="checkbox" name="hobby" value="run">跑步</input>
</p>
<p>
    简介：<textarea name="desc" cols="30" rows="5"></textarea>
</p>
<p>
    生日：<input type="date" name="birthday">
</p>
<p>
    邮箱：<input type="email" name="email">
</p>
<p>
    电话：<input type="number" name="phoneNum">
</p>
<p>
    <input type="submit">&nbsp;&nbsp;&nbsp;<input type="reset">
</p>
    </fieldset>
</form>
</body>
</html>

value和name属性

单选和多选框，必须设置name属性值相同才能分到一组。
按钮的value属性，设置的是按钮上的文字。
除了按钮，其他表单项的value属性是表单提交时的值。
只有设置了name属性的表单项，才能被提交。