html标签总结
一、块级元素和行内元素
块级元素特性：
1、独占一行，默认高度是根据内容自适应；
2、可以设置 width 和 height（宽度和高度）；
3、其它元素可以通过 display: block; 转换为块级元素；
常见块级元素有：div 、p 、h1-h6 。
行内元素特性
1、默认高度和宽度是根据内容自适应，也就是在同一行排列；
2、不可以设置 width 和 height （宽度和高度）；
3、其它元素可以通过 display: inline; 转换为行内元素；
常见行内元素有： span 、a、b。
特殊元素
有些元素既拥有块级元素可以设置高度和宽度的特性，又拥有行内元素在一行排列的特征；
这些元素有：input 、button 、img。
<head>标签
*<meta> 提供有关页面的基本信息如编码，文本类型
<meta http-equiv="refresh" content="2; URL=http://www.baidu.com" > # 重定向，表示2秒后转到新网页
<meta http-equiv="Content-Type" content="text/html";charset="utf-8" /> #指定文档的内容类型和编码类型
<meta name="Keywords" content="python,培训，成功，奋斗，牛逼的人生" /> # 用于搜索引擎的关键字和百度搜索的提示信息
<meta name="Description" content="python：人生苦短，我用python"> # 用于百度搜索的结果，显示一些文字说明seo
<title> 指定整个网页的标题，在浏览器最上方显示。
*<title>网页标题</title>
<link> 定义文档与外部资源的关系。
<link rel="stylesheet" type="text/css" href="./index.css"> # <!--<link>连接外部资源，如本地其它地方的文件,一般将样式写到一个特定文件中-->
<style> 定义内部样式表与网页的关系，实际项目中一般将样式都写在css里
<style><!--主要放各种样式选择器，以便下面标签来学习的-->
#li{ id选择器
background-color: red
width:100%;
height: 80px;
/*border-radius: 3px*/
}
.luffy{ 类选择器
font-size: 32px
color:black;
}
span{ 标签选择器
color:orange;
}
</style>
<body>标签
文本级标签：p、span、a、b、i、u、em。文本标签里只能放文字、图片、表单元素。
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放任何东西。
标签中的公共属性：
id（一个页面中id的值必须唯一，不然会乱）
class（类，可以相同，共性时用，定义class的内容放在style里或放在css文件中）
title 鼠标悬浮到内容上时显示的标题
hover 大部分的标签都可以设置鼠标悬停内容上变得属性
字体标签：h1~h6,<u>,<b>,<strong>,<em>,<sup>,<sub>
***<h1 align="left/right/center">主题标签，主要有1~6级，效果是加粗加黑，块级标签</h1>
<strong>文本内容加粗</strong>
<b>加粗同strong</b>
<em>斜体标签</em>
<i>也是斜体标签</i>
<u>下划线标签</u>
<s>中划线标记</s>
2<sup>8</sup> 上标：表示2的8次方
6<sub>8</sub> 下标：表示6的右下方为8
排版标签：p，br,hr,center,pre,div,span
***<p align="left/right/center">段落标签，默认前后各空一行</p> # p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放
<br> 换行标签
<hr> 水平线标签
<center>居中标签，放在此标签中间的元素可放其它标签，都会在浏览器中间显示，已废弃</center>
<pre>保留其中所有的空白字符手动敲的，其它情况默认都会合并空白</pre>
***<div align="left/right/center" style="margin: 0">区域块划分标签：盒子,块级标签</div>
div是一个块也可以叫盒子，页面中会有很多div，div与div之间的边距即外边距就叫margin
通过style属性可调整margin的大小，有上下左右四边：margin-top/bottom/left/right
border:边框的宽度
padding:内容到边框的距离（三个属性类比相框）
***<span>行内标签，文本级标签，小区域，小跨度，只能放置文字、图片、表单元素</span>
超链接：a
1、外部链接：链接到外部文件
<a href="http://www.baidu.com">跳到另一个页面或位置</a>
<a href="other.html">跳到另一个页面或位置</a>
2、锚链接：在本页面或其它页面的不同位置进行跳转，如常见的回到顶部,可通过id或name属性配置
<a name="top">在想要从其它位置回到此处设置一个锚点名如：顶部</a>
<a name="top">在想要从其它位置回到此处设置一个锚点名如：顶部</a>
<a href="#top">回到顶部</a>
<a href="other.html#top">回到顶部</a> 表示跳到other.html页面的top锚点去
如只想回到页面顶部，可以不用设置锚点
<a href="#">跳转到页面顶部</a>
3、邮件链接：会调用操作系统中的邮件系统如outlook
<a href="mailto:[email protected]">联系我们</a>
4、特殊用法：js有关
<a href="javascript:alert(xxx)">点击内容</a> # 表示点击后触发alert()方法中的事件
<a href="javascript:;">点击内容</a> # 表示什么也不执行，点击没反应
5、<a>是文本级标签
<p>
<a href="">段落内容</a>
</p>
6、属性
href：目标url
title：鼠标悬停在内容上显示的标题
name：设置锚点名称
target：设置链接打开的方式
_self:在同一个网页中显示
_blank:在另一个标签页/新窗口中打开
7、改变a标签的属性[如果想定义全页面或某个区域中所有的a属性可以在css中或style中定义，下面就会继承]
<a style="color: #333333 ;font-size: 14px;text-decoration: none;" title="鼠标悬停显示的内容" >点击内容</a>
text-decoration: none 去掉超链接的下划线
在style中设置hover，设置鼠标悬停在内容上的颜色变化或其它操作,在style标签下：
a:hover{
color:red; # 定义的是鼠标放到链接上颜色变为红色
}
图片标签：img
单边标记，插入图片，不能插入的图片格式为psd，ai
<img src="图片的地址/相对路径/绝对路径/网络路径"
alt="图片显示不出来的文本提示"
title="鼠标停在内容上的提示"
width="" # 为了保持图片的缩放不失真，只宽高只设置一个即可
height=""
align="对齐方式"
>
列表标签：ul,ol,dl
***<ul>:无序列表，从上到下排列,块级标签，配合表示列表中每一项li标签使用
li不能单独存在，必须在ul里，li是容器级标签，li里面可以放ul，互相嵌套
<ul type="disc/square/circle" style="list-style: none">type里放的是内容前面的原点</ul>
只要是容器级的标签都有边框margin，内边距border，外边距padding
list-style: none 表示去掉内容前的原点
也可以设置hover
ol:有序列表，一样里面只有li
两个属性：type="1/a/I" start="从几开始"
***<dl>:定义列表，没有属性，子元素只能是dt/dd
都是块级标签，dl定义的是列表框架，dt表示主题，dd是其子元素
表格标签：table
表格是由行tr组成的，行是由列td组成的,作用是固定标签的位置
<table>
<caption>表格主题</caption>
<tbody/tfoot/thead> # 显示时按head/body/foot构建表格
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
</tr>
</tbody>
</table>
table属性：
border：边框。像素为单位。 ****
style="border-collapse:collapse;"：单元格的线和表格的边框线合并 ***
width：宽度。像素为单位。
height：高度。像素为单位。
bordercolor：表格的边框颜色。
align：表格的水平对齐方式。属性值可以填：left right center。
注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）
cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。
注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。
cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
bgcolor="#99cc66"：表格的背景颜色。
background="路径src/..."：背景图片。
背景图片的优先级大于背景颜色。
tr属性：
dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
bgcolor：设置这一行的单元格的背景色。
注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
height：一行的高度
align="center"：一行的内容水平居中显示，取值：left、center、right
valign="center"：一行的内容垂直居中，取值：top、middle、bottom
td属性：单元格[th标签是加粗的单元格]
align：内容的横向对齐方式。属性值可以填：left right center。
如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
valign：内容的纵向对齐方式。属性值可以填：top middle bottom
width：绝对值或者相对值(%)
height：单元格的高度
bgcolor：设置这个单元格的背景色。
background：设置这个单元格的背景图片。
colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上
<tbody/tfoot/thead>标签：
这三个标签有与没有的区别：
1、如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。
如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。
2、当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么数据可以边获取边显示。
如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。
表单标签：form
作用：用于与服务器的交互，表单就是收集用户信息的，就是用户填写的，选择的，常见注册，登陆等。
属性：
name：表单的名称，用于JS来操作或控制表单时使用；
id：表单的名称，用于JS来操作或控制表单时使用；
action：指定表单数据的处理程序[即表单提交到那里]，一般是PHP或地址，如：action=“login.php”或action = "http://127.0.0.1:8080"
method：表单数据的提交方式，一般取值：get(默认)和post
get :将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开。
明文提交不安全，ascii，中文就乱码，小数据
故如果用input标签那么里面就必须加属性name
post：加密，安全的，海量数据
将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。
特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。
注意：如果有文件需要提交给服务器，method必须为POST，enctype必须为multipart/form-data
1、如果action为空 那么默认是打开页面的地址
2、缺点:form只能做提交操作,from表单不能接收数据,
3、只要用form表单提交数据，无论get还是post都必须有value和name属性，缺一后台都无法接收到数据
<!--对于form表单 如果是提交操作,那么表单控件中name属性 会被封装成url上key vlaue属性会被封装成url上value-->
--><!-- https://www.baidu.com/?username=alex&password=123&gender=male -->
<form action="http://www.baidu.com" method="get">
用户名：<input type="text" name="username" value placeholder="请输入用户名"><br>
密码：<input type="password" name="password" value placeholder="请输入密码"><br>
性别：<input type="radio" name="gender" value="male" checked="">男
<input type="radio" name="gender" value="female">女
</form>
输入标签：<input type="text"/>
作用：用于接收用户输入，行内标签
属性：
type=""
*text（默认）
*password：密码类型
*radio：单选按钮，名字相同的按钮作为一组进行单选(单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”)
*checkbox：多选按钮，名字相同的按钮作为一组进行选择。
*checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略。
hidden：隐藏框，在表单中包含不希望用户看见的信息
*button：普通按钮，结合js代码进行使用。
**submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
value:控件的值既要提交给服务器的数据
name:控件的名称，服务端用
*reset：重置按钮，清空当前表单的内容，并设置为最初的默认值
image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
**file：文件选择框。
提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。
*value="内容"：文本框里的默认内容（已经被填好了的）
**value placeholder="请设置用户名" 文本框中的灰色提示用语，不用清除就可以填写值
size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
注意size属性值的单位不是像素哦。
readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。
label标签：
任何表单元素都有label属性
让点击单选框/文本框前的文字如男，女也能被选中，通过input中的id和label中的for属性值相同，就把两个标签绑定了
label中的for属性一定跟下面的某个input中id属性值一样
<form>
<label for="name">姓名：</label>
<input id="name" value="呵呵" >逗比<br>
昵称：<input value="哈哈" readonly=""><br>
名字：<input type="text" value="name" disabled=""><br>
密码：<input type="password" value="pwd" size="50"><br>
性别：<input type="radio" name="gender" value="male" checked="">男
<input type="radio" name="gender" value="female" >女<br>
爱好：<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉
<input type="checkbox" name="love" value="bat">打豆豆
</form>
<form>
<input type="button" value="普通按钮"><br>
<input type="submit" value="提交按钮"><br>
<input type="reset" value="重置按钮"><br>
<input type="image" src="images/bojie.jpeg" width="400" value="图片按钮2"><br>
<input type="file" value="文件选择框">
</form>
下拉列表标签：select
块标签，每行由option标签组成，类时ul的li
select标签的属性：
multiple:下拉列表多选，没有值multiple=""
size="num" 默认显示1项，num表示一次显示几个选项
option标签的属性：
selected：预选中，没有属性值
<form>
<select multiple="" size="2">
<option>小学</option>
<option>小1学</option>
<option selected="">小2学</option> # 初始默认选项
</select>
多行文本标签：textare
作用：允许在一个指定的文本中写入多行，到边界自动换行，常见博客回复框
属性：
value：提交给服务器的值。
rows="4"：指定文本区域的行数。
cols="20"：指定文本区域的列数。
readonly：只读。
<form action="http://127.0.0.1:8080" method="get">
<label for="msg">微博回复框</label>
<textarea rows="5" cols="10" name="msg" id="msg" ></textarea>
<input type="submit" value="提交">
</form>
表单语义化：
<form>
<fieldset>
<legend>必填信息账号信息</legend>
姓名：<input value="呵呵" >逗比<br>
密码：<input type="password" value="pwd" size="50"><br>
</fieldset>
<fieldset>
<legend>非必填信息</legend>
性别：<input type="radio" name="gender" value="male" checked="">男
<input type="radio" name="gender" value="female" >女<br>
爱好：<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉
<input type="checkbox" name="love" value="bat">打豆豆
</fieldset>
</form>
前端-html基础及标签temp
猜你喜欢
转载自www.cnblogs.com/sunxiuwen/p/9445828.html
今日推荐
周排行