html的基本标签含义文档格式.docx
- 文档编号:13085975
- 上传时间:2022-10-04
- 格式:DOCX
- 页数:10
- 大小:31.72KB
html的基本标签含义文档格式.docx
《html的基本标签含义文档格式.docx》由会员分享,可在线阅读,更多相关《html的基本标签含义文档格式.docx(10页珍藏版)》请在冰豆网上搜索。
————>
注释标签,使用注释标签的目的是为网页代码中不同部分加上说明,方便日后的修改。
注释的内容是不会在浏览器上显示出来的,如<
——要注释的内容——>
。
p>
文本段落,可以用align属性设置left、center、right3种对齐方式。
br/>
强制换行,没有结束标签,在网页中产生换行效果。
center>
使文字或其他网页元素居中显示。
marquee>
文本或图片移动显示,属性direction用来指示移动方向。
dl>
、<
dt>
dd>
/dl>
标签创建无序列表,<
/dt>
定义上层项目,<
/dd>
定义下层项目,<
和<
标签一定要放在<
标签中才能使用。
ul>
ol>
li>
/ol>
标签创建有序列表,<
/ul>
/li>
或<
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属性为<
标签必须具备的属性。
lhref属性。
设置目标页面的链接地址,可以是绝对地址也可以是相对地址,如果为“#”表示空链接。
ltarget属性。
设置超链接的打开方式,共5种:
_blank指在新窗口中打开,_parent指在上一级窗口中打开,_self指在同一窗口打开,_top指在浏览器的整个窗口中打开,new指在新窗口中打开。
lname属性。
创建一个命名锚记,使用命名锚记后,会让链接直接跳转到一个页面的某一部分。
img>
图像标签,用于网页中插入图像。
标签拥有以下属性。
lsrc属性。
该属性为<
标签必须具备的属性,指存放图片的具体路径。
lwidth属性。
图像的宽度。
lheight属性。
图像的高度。
lalt属性。
图像的注释,也就是代替文字。
lalign属性。
图像的对齐属性,值baseline为基线对齐,值top为顶端对齐,值middle为居中,值bottom为底端对齐,值texttop为文本上方对齐,值absmiddle为绝对居中,值absbottom为绝对底端对齐,值left为左,值right为右。
lborder属性。
图像的边框的宽度,值大于或等于0,以像素(px)为单位。
lvspace属性。
图像的垂直边距,图像与页面或文本之间的垂直边距。
lhspace属性。
图像的水平边距。
table>
定义表格区域。
caption>
定义表格标题。
th>
定义表格头部。
tr>
定义表格行。
td>
定义单元格。
div>
区域标签(又称容器标签),用来作为多种HTML标签的组合的容器,对该区域块进行操作和设置,就可以完成对区域块中元素的操作和设置,Div能让网页代码具有很高的可扩展性。
span>
文字图片等简短内容的容器,其意义有点类似Div,但是和Div不一样的是,span是文本级元素,默认不会占整行,可以在一行显示多个span。
span常在段落、列表条目等项目中使用,该标签不能嵌套在其他的封闭级元素中。
p{text-indent:
2em;
}表示首行缩进两字符。
line-height表示行间距,p{line-height:
}表示行间距(行高)为两字符。
letter-spacing表示字母与字母之间的间距,word-spacing表示英文单词之间的间距。
text-align:
center;
表示居中对齐,text-align:
left;
表示居左对齐,text-align:
right;
表示居右对齐。
在CSS中,html中的标签元素大体被分为三种不同的类型:
块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有:
...<
、<
form>
常用的内联元素有:
br>
strong>
label>
q>
var>
cite>
code>
常用的内联块状元素有:
input>
在html中<
、<
和<
就是块级元素。
设置display:
block就是将元素显示为块级元素。
将内联元素a转换为块状元素表示为a{display:
block;
}
块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。
(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
在html中,<
和<
就是典型的内联元素(行内元素)。
块状元素也可以通过代码display:
inline将元素设置为内联元素。
如:
div{display:
inline;
}块状元素div转换为内联元素,从而使div元素具有内联元素特点。
内联元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:
inline-block就是将元素设置为内联块状元素。
(css2.1新增),<
标签就是这种内联块状标签。
内联块状元素特点:
border-style(边框样式)常见样式有:
dashed(虚线)|dotted(点线)|solid(实线)。
border-color(边框颜色)中的颜色可设置为十六进制颜色,如:
border-color:
#888;
//前面的井号不要忘掉。
border-width(边框宽度)中的宽度也可以设置为:
thin|medium|thick(但不是很常用),最常还是用象素(px)。
只设置下(上、右、左)边框的设置:
div{border-bottom:
1pxsolidred;
border-top:
border-right:
border-left:
元素内容与边框之间是可以设置距离的,称之为“填充”。
填充也可分为上、右、下、左(顺时针)。
如下代码:
div{padding:
20px10px15px30px;
如果上、右、下、左的填充都为10px;
可以这么写
10px;
如果上下填充一样为10px,左右一样为20px,可以这么写:
10px20px;
元素与其它元素之间的距离可以使用边界(margin)来设置。
边界也是可分为上、右、下、左。
div{margin:
如果上右下左的边界都为10px;
可以这么写:
div{margin:
如果上下边界一样为10px,左右一样为20px,可以这么写:
总结一下:
padding和margin的区别,padding在边框里,margin在边框外。
流动模型
第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。
实际上,块状元素都会以行的形式占据位置。
第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。
(内联元素可不像块状元素这么霸道独占一行)
浮动模型
任何元素在默认情况下是不能浮动的,但可以用CSS定义为浮动,如div、p、table、img等元素都可以被定义为浮动。
(在设置完边框数据后设置浮动模型)
并排显示左对齐:
float:
一左一右显示:
#div1{float:
}
#div2{float:
并排显示右对齐:
层模型
层模型有三种形式:
1、绝对定位(position:
absolute)2、相对定位(position:
relative)3、固定定位(position:
fixed)
如果想为元素设置层模型中的绝对定位,需要设置position:
absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px。
div{
width:
200px;
height:
border:
2pxredsolid;
position:
absolute;
left:
100px;
top:
50px;
divid="
div1"
>
/div>
(要向什么方向移动就输入多少距离就输入相反的方向和距离)
如果想为元素设置层模型中的相对定位,需要设置position:
relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
如下代码实现相对于以前位置向下移动50px,向右移动100px;
#div1{
relative;
lef
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- html 基本 标签 含义
![提示](https://static.bdocx.com/images/bang_tan.gif)