HTML基础标签与语法

HTML基础语法

1.HTML基础结构

2.网页编码设置

当网页显示出现乱码时，在标签之间添加：

 <meta http-equiv="Content-Type" content = "text/html;charset=utf-8" />

这样可以将字符集编码改为UTF-8
补充：字符集编码还有utf-8、GB2312、gbk等编码

3.文字和段落标签

标题标签：<h1></h1>~<h6></h6>

段落标签：<p></p> align对齐属性值;属性值如下：
left：左对齐内容
right：右对齐内容
center：居中对齐内容
justify：对行进行伸展，这样每行都可以有相等的长度

换行标签：<br/>

水平线：<hr/> 属性如下：
width：设置水平线宽度，可以像素或百分比
color：设置水平线颜色
align：设置水平线居中对齐
noshade：设置水平线无阴影

文字斜体：<i></i> 、 <em></em>

加粗：<b></b> 、<strong></strong>

下标：<sub> 上标：<sup>

插入内容：<ins> 删除内容：<del>

特殊符号：

属性	显示结果	描述
&lt;	<	小于号或显示标记
&gt;	>	大于号或显示标记
&reg;	®	已注册
&copy;	©	版权
&trade;	™	商标
&nbsp;	Space	不断行的空白

列表标签
有序列表：（可以用type属性值设置有序的格式）
type的属性值有 “1” “a” “A” “i” “I”

<ol>
	<li>列表项</li>
	<li>列表项</li>
	.....
</ol>

定义列表：

<dl>
	<dt>定义列表项</dt>
	<dd>列表项描述</dd>
	<dd>列表项描述</dd>
	<dt>定义列表项</dt>
	<dd>列表项描述</dd>
	....
</dl>

图像标签

<img src="" alt="" .../>

img属性：

超链接标签

<a href="" name="锚名1">内容</a>

属性：

4.HTML表格

<table> 表格
<tr> 行
<td> 单元格
表格划分三部分：表头、主体、脚注
thead : 表格的头（放表格的表头）
tbody : 表格的主体 （放数据本体）
tfoot : 表格的脚 （放表格的脚注）

<table>
	
	<caption>...</caption>  <!--表格标题，居中加粗-->
	<thead>
	<tr>
		<!--th 表格头，内容居中，加粗显示-->
		<th>...</th>
		<td></td>
		.....
	</tr>
	</thead>
	<tbody>
	<tr>
		<td></td>
		.....
	</tr>
	</tbody> 
	<tfoot>
		<tr>
			<td>脚注</td>
		</tr>
	</tfoot>
</table>

table 表格的属性



tr标签属性

属性	值	描述
align	left center right justify char	行内容的水平对齐
valign	top middle bottom baseline	行内容的垂直对齐
bgcolor	rgb(x,x,x) #xxxxxx colorname	行的背景颜色

td 和 th 标签属性

属性	值	描述
align	left center right justify char	行内容的水平对齐
valign	top middle bottom baseline	行内容的垂直对齐
bgcolor	rgb(x,x,x) #xxxxxx colorname	行的背景颜色
width	xx% xxpixels	单元格的宽度
height	xx% xxpixels	单元格的高度

跨列属性colspan

<table>
<tr>
	<td colspan = "2">...</td>
	<td>...</td>
</tr>
<tr>
	<td>...</td>
	<td>...</td>
	<td>...</td>
</tr>
</table>

跨行属性rowspan

<table>
<tr>
	<td rowspan = "2">...</td>
	<td>...</td>
</tr>
<tr>
	<td>...</td>
	<td>...</td>
	<td>...</td>
</tr>
</table>

5.HTML表单

表单的标签：<form></form>

标签	描述
<input>	表单输入标签
<select>	表单和列表标签
<option>	表单和列表项目标签
<textarea>	文字域标签
<optgroup>	菜单和列表项目分组标签

（1）input标签type属性值与描述

（2）select标签的属性

（3）option 标签属性

（4）分组下拉菜单和列表标签 ----optgroup语法

<select name = "">
	<optgroup label = "组1">
	<option value = "...">选项</option>
	<option value = "...">选项</option>
	....
	</optgroup>
		<optgroup label = "组1">
	<option value = "...">选项</option>
	<option value = "...">选项</option>
	....
	</optgroup>
</select>

（5）多行文本域 textarea

语法：

<textarea name = "..." rows = "..."  cols = "...">
	内容...
</textarea>

（6）Form标签属性

6.行内元素和块级元素

块级元素（占据一行，换行）: div , p , form , ul , ui , ol , dl , address ,fieldset , hr , menu ,table …
行内元素（在一行，不换行）：span ,strong , em , br , img ,input , label , select ,textarea ,cite
行内元素和块级元素的区别
（1）从显示效果来看

• 块级元素会独占一行，其宽度自动填满其父元素
• 行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度 随元素的内容而变化
  （2）块级元素可以设置width 、height 属性，行内元素设置 width ， height 无效
  （3） 块级元素可以设置margin和padding 行内元素水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果**（行内元素的margin和padding水平方向有效，竖直方向无效）**

7.搭建网页的HTML结构

div标签和span标签

• div标签

是一个区块容器标记，<div></div>之间是一个容器，可以包含段落、表格、图片等各种HTML元素

• span标签

没有实际意义，为了应用样式

8.标签嵌套规则

• 块级元素可包含行内元素和某些块级元素
• 行内元素不能包含块元素，只能包含其他行内元素
• 块级元素不能放在<p>标签内
• 特殊块级元素只能包含行内元素，不能在包含块级元素。如：h1、h2、h3、h4、h5、h6、p、dt
• 块级元素与块元素并列，行内元素和行内元素并列