当前位置:文档之家› html的基本标签含义

html的基本标签含义

<html>:表示html文件的起始和终止,<html>标签在首行,</html>标签在最后一行,两个要一起使用,网页中其他内容都要放在这两个标签之间。

<head>:表示网页的头部标签,用来定义文件的头部信息,与<html>标签一样,也是<head></head>成对使用。

<body>:表示出文件主体区,<body></body>之间是网页的主题内容和其他用于控制文本显示方式的标签。

<title>:网页标题,用于定义浏览器窗口标题栏上的文本信息,可以是网页的标题名或创作信息等网页说明信息。

<hr>:用于显示水平线,使页面看起来更整齐明了。

<pre>:将内容以原始格式显示。

<address>:标注联络人姓名、电话、地址等信息。

<blockquote>:区段引用标签。

<!————>:注释标签,使用注释标签的目的是为网页代码中不同部分加上说明,方便日后的修改。

注释的内容是不会在浏览器上显示出来的,如<——要注释的内容——>。

<p>:文本段落,可以用align属性设置left、center、right 3种对齐方式。

<br/>:强制换行,没有结束标签,在网页中产生换行效果。

<center>:使文字或其他网页元素居中显示。

<marquee>:文本或图片移动显示,属性direction用来指示移动方向。

<dl>、<dt>、<dd>:<dl></dl>标签创建无序列表,<dt></dt>定义上层项目,<dd>、</dd>定义下层项目,<dt>、</dt>和<dd></dd>标签一定要放在<dl></dl>标签中才能使用。

<ul>、<ol>、<li>:<ol></ol>标签创建有序列表,<ul></ul>标签创建无序列表,<li>、</li>定义下层项目,<li>、</li>标签一定要放在<ol></ol>或<ul></ul>标签中才能使用。

<dir>:目录式列表。

<menu>:菜单式列表。

<hi>:i=1,2,......,6,网页中文本标题,<h1></h1>显示最大的字号,<h6></h6>显示最小的字号。

<b>:粗字体。

<i>:斜字体。

<font>:改变字体设置,有face、size、color3个属性来控制,face设置字体,size设置字号,color设置颜色。

<big>:加大字号。

<small>:缩小字号。

<em>:斜体标签。

<a>:建立超链接,有href、target、name等重要属性,其中href属性为<a>标签必须具备的属性。

● href属性。

设置目标页面的链接地址,可以是绝对地址也可以是相对地址,如果为“#”表示空链接。

●target属性。

设置超链接的打开方式,共5种:_blank指在新窗口中打开,_parent指在上一级窗口中打开,_self指在同一窗口打开,_top指在浏览器的整个窗口中打开,new指在新窗口中打开。

●name属性。

创建一个命名锚记,使用命名锚记后,会让链接直接跳转到一个页面的某一部分。

<img>:图像标签,用于网页中插入图像。

<img>标签拥有以下属性。

●src属性。

该属性为<img>标签必须具备的属性,指存放图片的具体路径。

●width属性。

图像的宽度。

●height属性。

图像的高度。

●alt属性。

图像的注释,也就是代替文字。

●align属性。

图像的对齐属性,值baseline为基线对齐,值top为顶端对齐,值middle为居中,值bottom为底端对齐,值texttop为文本上方对齐,值absmiddle为绝对居中,值absbottom为绝对底端对齐,值left为左,值right为右。

●border属性。

图像的边框的宽度,值大于或等于0,以像素(px)为单位。

●vspace属性。

图像的垂直边距,图像与页面或文本之间的垂直边距。

●hspace属性。

图像的水平边距。

<table>:定义表格区域。

<caption>:定义表格标题。

<th>:定义表格头部。

<tr>:定义表格行。

<td>:定义单元格。

<div>:区域标签(又称容器标签),用来作为多种HTML标签的组合的容器,对该区域块进行操作和设置,就可以完成对区域块中元素的操作和设置,Div能让网页代码具有很高的可扩展性。

<span>:文字图片等简短内容的容器,其意义有点类似Div,但是和Div不一样的是,span 是文本级元素,默认不会占整行,可以在一行显示多个span。

span常在段落、列表条目等项目中使用,该标签不能嵌套在其他的封闭级元素中。

p{text-indent:2em;}表示首行缩进两字符。

line-height表示行间距,p{line-height:2em;}表示行间距(行高)为两字符。

letter-spacing表示字母与字母之间的间距,word-spacing表示英文单词之间的间距。

text-align:center;表示居中对齐,text-align:left;表示居左对齐,text-align:right;表示居右对齐。

在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>常用的内联元素有:<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>常用的内联块状元素有:<img>、<input>在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是将元素显示为块级元素。

将内联元素a转换为块状元素表示为块级元素特点:1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。

(真霸道,一个块级元素独占一行)2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

在html中,<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素(行内元素)。

块状元素内联元素。

如:div{ display:inline;内联元素,从而使 div 元素具有内联元素特点。

内联元素特点:1、和其他元素都在一行上;2、元素的高度、宽度及顶部和底部边距不可设置;3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码(css2.1新增),<img>、<input>标签就是这种内联块状标签。

内联块状元素特点:1、和其他元素都在一行上;2、元素的高度、宽度、行高以及顶和底边距都可设置。

border-style(边框样式)常见样式有:dashed(虚线)| dotted(点线)| solid(实线)。

border-color(边框颜色)中的颜色可设置为十六进制颜色,如border-width(边框宽度)中的宽度也可以设置为:thin | medium | thick(但不是很常用),最常还是用象素(px)。

只设置下(上、右、左)边框的设置:div{border-bottom:1px solid red;}border-top:1px solid red;border-right:1px solid red;border-left:1px solid red;元素内容与边框之间是可以设置距离的,称之为“填充”。

填充也可分为上、右、下、左(顺时针)。

如下代码:如果上、右、下、左的填充都为10px;可以这么写如果上下填充一样为10px,左右一样为20px,可以这么写:元素与其它元素之间的距离可以使用边界(margin)来设置。

边界也是可分为上、右、下、左。

如下代码:如果上右下左的边界都为10px;可以这么写:如果上下边界一样为10px,左右一样为20px,可以这么写:总结一下:padding和margin的区别,padding在边框里,margin在边框外。

流动模型第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。

实际上,块状元素都会以行的形式占据位置。

第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。

(内联元素可不像块状元素这么霸道独占一行)浮动模型任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。

(在设置完边框数据后设置浮动模型)并排显示左对齐:float:left;一左一右显示:#div1{float:left;}#div2{float:right;}并排显示右对齐:float:right;层模型层模型有三种形式:1、绝对定位(position: absolute)2、相对定位(position: relative)3、固定定位(position: fixed)如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。

相关主题