HTML常用标签及其他总结
- HTML5 基本结构
- HTML基本语法
- HTML常用标记
- 元素类型
HTML5 基本结构
<!doctype html> //命名文档类型
<html> //说明我们写的是标记语言
<head> //文件头部
<meta charset="utf-8"/> //编码格式
<title>html5</title> //文件标题(显示在网页题目上)
</head>
<body>
文件主体(所有要写的内容)
</body>
</html>
HTML基本语法
1.常规标记
<标记 属性=“属性值” 属性=“属性值”></标记>
2.空标记
<标记 属性=“属性值” />
说明:
1.标记,标签,元素都是一个东西。
2.标记和属性用空格隔开,属性和属性值用等号连接,属性值必须放在“”号内。
3.一个标记可以没有属性也可以有多个属性,属性和属性之间不分先后顺序。
4.空标签没有结束标签,用“/”代替。
HTML常用标记
1.文本标题 h1-h6
样式<h1>一级标题</h1>
样式<h2>二级标题</h2>
……
2.文本内容 p 标签
样式<p>文本内容</p>
3.列表
(1)无序列表 (unordered list)
样式:
<ul>
<li></li>
……
</ul>
(2)有序列表 (ordered list)
样式:
<ol>
<li></li>
……
</ol>
-
属性:
-
(a)type = “数字/小写字母/大写字母/小写罗马/大写罗马”
-
数字顺序的有序列表(默认值)(1, 2, 3, 4)。
-
a 字母顺序的有序列表,小写(a, b, c, d)。
-
A 字母顺序的有序列表,大写(A,B,C,D)
-
i 罗马数字,小写(i, ii, iii, iv)。
-
I 罗马数字,大写(i, ii, iii, iv)。
-
(b)start = “数字”
- 数字表示有序列表的开始点。
(3)自定义列表
样式:
<dl>
<dt>名词</dt>
<dd>解释</dd>
……
</dl>
(4)表格
样式:
<table>
<colgroup>//列分组
<col span="2" style="background-color:red">
</colgroup>
<thead>//表头
<caption>标题内容</caption>
</thead>
<tbody>//表体
<tr>//一行
<th>列标题</th>
</tr>
<tr>//二行
<td>单元格内容</td>
<td>单元格内容</td>
</tr>
</tbody>
<tfoot></tfoot>//表尾
</table>
//一个Table中,只能包含一个thead,一个tfoot,但可包含多个tbody。
-
属性:
- 1)width=”表格的宽度”
- 2)height=”表格的高度”
- 3)border=”表格的边框”
- 4)bgcolor=”表格的背景色”
- 5)cellspacing=”单元格与单元格之间的间距”
- 6)cellpadding=”单元格与内容之间的空隙”
- 7)align=”left/center/right” (水平对齐方式)
- 8)valign=”top/bottom/middle/baseline” (垂直对齐方式)
- 9)colspan=”所要合并的单元格的列数” (合并列,写在td属性中,合并几个去掉几个td)
- 10)rowspan=”所要合并单元格的行数” (合并行,写在td属性中,合并几个去掉几个不同tr相同位置的td)
- 11)rules=”groups/rows/cols/all/none” (添加组分隔线)
- *rows:位于行之间的线条
- *cols:位于列之间的线条
- *all:位于行和列之间的线条
- *none:没有线条
- *groups:位于行组和列组之间的线条
(5)表单
作用:用来收集用户的信息。
样式:
<form name="表单名称" method="post/get" action="">
<input type="text" value="默认值"/>//文本框
<input type="password" />//密码框
<input type="submit" value="按钮内容" />//提交按钮
<input type="reset" value="按钮内容" />//重置按钮
<input type="button" value="按钮内容"/>//按钮
//单选框/单选按钮
<input type="radio" name="ral"/>
<input type="radio" name="ral" />
//单选按钮里的name属性必须写,同一组单选按钮的name属性值必须一样。
//复选框
<input type="checkbox" name="like" />
<input type="checkbox" name="like" disabled="disabled" />
//复选按钮里的name属性必须写,同一组复选按钮的name属性值必须一样。
//*(disabled="disabled" :禁用)
//*(checked="checked" :默认选中)
//下拉菜单
<select name="">
<option>菜单内容</option>
……
</select>
//多行文本框(文本域)
<textarea name="textareal" cols="字符宽度" rows="行数">
文本内容
</textarea>
//表单字段集
<fieldset>
<legend>标题内容</legend>//字段级标题
//legend元素可以在fieldset对象绘制的方框内插入一个标题。
//legend元素必须是fieldset内的第一个元素。
……
</fieldset>
//fieldset元素相当于一个方框,在字段集中可以包含文本和其他元素。
//fieldset元素用于对表单中的元素进行分组并在文档中区别标出文本。
//fieldset元素可以嵌套,在其内部可以在设置多个fieldset对象。
<label for="绑定控件id名"></label>//提示信息标签
//label元素用来定义标签,为页面上的其他元素指定提示信息。
//要将label元素绑定到其他的控件上
//可以将label元素的for属性设置为与该控件的id属性值相同。
<input type="file" />//文件域
<input type="image" src="" width="100" height="100" alt="上传图片" />//图片域
</form>
(6)插入图片
样式:
<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />
//title:在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了。
//HTML的绝大多数标签都支持title属性,title属性就是专门做提示信息的。
//alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息。
//它会直接输出在原本加载图片的地方。
(7)超链接a
样式:
<a href="目标文件路径及全称/连接地址">链接文本/图片</a>
<a href="#"></a>//空链接
属性:target:页面打开方式,默认属性值 _ self。( _ self:当前页面打开; _ blank:新页面打开)
(8)div
样式:
<div id="id名"/class="class名"></div>
作用:主要用来布局。
(9)span
样式:
<span></span> //文本结点,用来放一段字
(10)其他组件
样式:
<b>加粗内容</b> //加粗
<strong>加粗内容</strong> //加粗
<em></em> //倾斜
<i></i> //倾斜
<br /> //换行
<hr /> //水平分割线
<del></del> //删除线标签
//空格(转义字符)
元素类型
1.元素分类
根据css显示分类,XHTML元素被分为三种类型:
· 块状元素
· 内联元素
· 可变元素
块状元素(block element)
(1)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,常用的块状元素包块div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,colgroup,col,table,tr,td,等。
(2)默认情况下,块状元素都会占据一行,通俗地说,两个相邻块状元素不会出现并列显示的现象;默认情况下,块状元素会按顺序自上而下排列。
(3)块状元素都可以定义自己的宽度和高度。
(4)块状元素一般都作为其他元素的容器,它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。
内联元素(inline element)(或是行内元素)
(1)常见的内联元素如:a,span,i,em,strong,b,del,等。
(2)内联元素的表现形式是始终以行内逐个进行显示。
(3)内联元素没有自己的形状,不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定,它的最小内容单元也会呈现矩形形状。
(4)内联元素也会遵循盒模型基本规则,如可以定义padding,border,margin,background等属性,但个别属性不能正确显示。
可变元素
需要根据上下文关系确定该元素是块元素或者内联元素。
2.元素类型转化
-
(1)盒子模型可通过display属性来改变默认的显示类型,display属性包含了18个属性值,包括block/inline/inline-block/none/list-item/table-header-group/table-footer-group….,display属性用于设置或检索对象元素应该生成的盒模型的类型。
- 1)Block块状显示:元素会独占一行。当元素设置了float属性后,就相当于给该元素加了display:block;属性。
- 2)inline内联显示:在元素后面删除换行符,多个元素可以在一行内并列显示。
- 4)Inline-block行内块元素显示:元素的内容以块状显示,行内的其他元素显示在同一行。(只有这一个元素类型支持vertical-align属性)img,input。
- 5)none 此元素不会被显示。
- 6)list-item:将元素转换成列表。li的默认类型。 (2)补充
- 1)大部分块元素display属性值默认为block,其中li默认值为list-item。
- 2)大部分内联元素的display属性值默认为inline,其中img,input,默认为inline-block。
3.置换元素
一个内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。
HTML中的img、input、textarea、select、object都是置换元素。这些元素往往没有实际的内容,即是一个空元素。