html标签整理
一、概念
超文本标记语言，是在标准通用化标记语言（SGML，Standard generalized markup language）基础上建立的。它是所有网页制作技术的核心和基础。
二、html基本结构
<!--文档声明：告诉浏览器以下文件用html哪个版本解析-->
<!DOCTYPE html>
<!--告诉浏览器以下文件为超文本标记语言-->
<!--lang="en"告诉浏览器 这个网站是一个英文站,zh是中文站-->
<html lang="en">
<!--head是html文件的头部-->
<head>
<!-- meta 元信息-->
<!-- charset="UTF-8" 网站的编码格式,utf-8 国际通用编码格式-->
<meta charset="UTF-8">
<!--<title>网站的标题</title>-->
<title>Title</title>
</head>
<!--head结束标签-->
<!--html主体内容-->
<body>
<!--只要显示页面的内容都放在body标签里-->
<!--所有的代码和符号都是英文状态下的-->
</body>
</html> 三、常用标签
- p（段落）：分段 默认占父容器的100% align属性控制文本的对齐方式
- hx（标题）:一共有6个，h1、h2、h3、h4、h5、h6。数字越大，字体越小
- pre（预先格式化）：变化字的大小，以预先设置号的格式输出
- br（强制换行）
==字符格式化标签==
- b（加粗）
- i（斜体）
- u（下划线）
- sub（下标）
- sup（上标）==列表标签==
- ol（有序列表）
<ol>
<li>黄瓜</li>
<li>葱</li>
<li>青椒</li>
</ol>- ul（无须列表）
<ul>
<li>文具</li>
<li>书</li>
</ul>- hr（水平线）
- font（字体）:size大小1到7
<font size="6" color="red" face="楷体">最美的网站</font>- img（图像）
<img src="img/demo2.jpg" alt="网速不行" title="最美桃花">==特殊字符==：（&__;）
- ©—-copy
- >—-gt
- <—-lt
- —-nbsp超链接与锚标记
- a（超链接）：跳转页面
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="../714/child/txt.html">本地</a>- a（锚标记）：
<a href="#c_m">衣服</a>
.
.
.
.
.
<a name="c_m">在这里买衣服</a>
==表单元素对象==
- form（表单）：可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据
<form method="传送方式" action="服务器文件">- input（输入框）:当用户要在表单中键入字母、数字等内容时，就会用到文本输入框
<form>
<input type="text/password" name="名称" value="文本" />
</form>- textarea（文本域）:当用户需要在表单中输入大段文字时，需要用到文本输入域
<textarea rows="行数" cols="列数">文本</textarea>- radio/checkbox（单选框/复选框）:使用单选框、复选框，让用户选择
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>- option（下拉列表）:下拉列表框,设置selected=”selected”属性，则该选项就被默认选中
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>- multiple:下拉列表也可以进行多选操作，在标签中设置multiple=”multiple”属性，就可以实现多选功能
<select multiple="multiple">- submit（提交）:使用提交按钮，提交数据
<input type="submit" value="提交">- reset（重置）:重置按钮，重置表单信息
<input type="reset" value="重置">- label:为鼠标用户改进了可用性。当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
<label for="控件name名称">==表格==
- table（表格）:table…/table：整个表格以table标记开始、/table标记结束
- tbody:tbody…/tbody：当表格内容非常多时，表格会下载一点显示一点，但如果加上tbody标签后，这个表格就要等表格内容全部下载完才会显示
- tr（行 ）:tr…/tr：表格的一行，所以有几对tr表格就有几行。
- td（列）:td…/td：表格的一个单元格，一行中包含几对td…/td，说明一行中就有几列
- th（表头）:th…/th：表格的头部的一个单元格，表格表头。表头，也就是th标签中的文本默认为粗体并且居中显示
- caption（标题）:添加标题和摘要,标题用以描述表格内容，标题的显示位置：表格上方。摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容
- cellspacing：列的外间距（属性）
<table bgcolor="green" border="1" cellspacing="0" width="300" cellpadding="20">
<caption>学生成绩表</caption>
<tr bgcolor="red" align="center">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td bgcolor="yellow" align="center">8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
</tr>
</table>- iframe（框架）
<a href="index.html" target="tardata">首页</a>
###### ###### <a href="form.html" target="tardata">page1</a>
<a href="714下午.html" target="tardata">page2</a>
<iframe src="index.html" name="tardata"></iframe>
==style（样式)==
- 样式的写法
- 行内样式的写法
- 内嵌样式的写法
- 外部样式的写法
- 样式的优先级问题
样式优先级：就近原则（行内优先）。如果行内样式和内嵌样式和外部样式没有冲突，则叠加使用；如果冲突考虑样式的优先级：++行内>内嵌>外部++
- 元素选择器（元素）：使用元素选择器进行元素的查找
- class选择器（.class）:多次利用
- id选择器(#id):唯一性
1. 行内样式的写法
给标签添加style属性；双引号里面去写样式属性；属性：值。
<div style="border: 1px solid rgb(124, 255, 106);width: 500px;height: 200px;">div是块级元素</div>2.内嵌样式
<style>
div{
border:1px solid red;
height: 200px;
width: 1000px;
}
.block{
border: 1px solid red;
width: 300px;
height: 100px;
}
#b_1{
border: 1px solid red;
width: 500px;
height: 200px;
}
</style>
3. 外部样式
和内嵌样式的写法一样，引入文件的方式有两种
1. link：用属性href写入css文件路径引入
<link rel="stylesheet" href="css/index.css">
- import:不能用js操作
<style>
@import "css/index.css";
</style>