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名称”>
标签的for
属性中的值应当与相关控件的name
属性值一定要相同
<label for="控件name名称">
表格
table
(表格):<table></tabble>
:整个表格以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. 外部样式
和内嵌样式的写法一样,引入文件的方式有两种
link
:用属性href
写入css
文件路径引入
<link rel="stylesheet" href="css/index.css">
import
:不能用js
操作
<style>
@import "css/index.css";
</style>