html的基本标签含义_第1页
html的基本标签含义_第2页
html的基本标签含义_第3页
html的基本标签含义_第4页
html的基本标签含义_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、<html>:表示html文件的起始和终止，<html>标签在首行，</html>标签在最后一行，两个要一起使用，网页中其他内容都要放在这两个标签之间。<head>:表示网页的头部标签，用来定义文件的头部信息，与<html>标签一样，也是<head></head>成对使用。<body>:表示出文件主体区，<body></body>之间是网页的主题内容和其他用于控制文本显示方式的标签。<title>:网页标题，用于定义浏览器窗口标题栏上的文本信息，可以是网页的标题名

2、或创作信息等网页说明信息。<hr>:用于显示水平线，使页面看起来更整齐明了。<pre>:将内容以原始格式显示。<address>:标注联络人姓名、电话、地址等信息。<blockquote>:区段引用标签。<! >:注释标签，使用注释标签的目的是为网页代码中不同部分加上说明，方便日后的修改。注释的内容是不会在浏览器上显示出来的，如<要注释的内容>。<p>:文本段落，可以用align属性设置left、center、right 3种对齐方式。<br/>:强制换行，没有结束标签，在网页中产生换行效果。<

3、;center>:使文字或其他网页元素居中显示。<marquee>:文本或图片移动显示，属性direction用来指示移动方向。<dl>、<dt>、<dd>:<dl></dl>标签创建无序列表，<dt></dt>定义上层项目，<dd>、</dd>定义下层项目，<dt>、</dt>和<dd></dd>标签一定要放在<dl></dl>标签中才能使用。<ul>、<ol>、<l

4、i>:<ol></ol>标签创建有序列表，<ul></ul>标签创建无序列表，<li>、</li>定义下层项目，<li>、</li>标签一定要放在<ol></ol>或<ul></ul>标签中才能使用。<dir>:目录式列表。<menu>:菜单式列表。<hi>:i=1,2,.,6,网页中文本标题，<h1></h1>显示最大的字号，<h6></h6>显示最小的字号。&

5、lt;b>:粗字体。<i>:斜字体。<font>:改变字体设置，有face、size、color3个属性来控制，face设置字体，size设置字号，color设置颜色。<big>:加大字号。<small>:缩小字号。<em>:斜体标签。<a>:建立超链接，有href、target、name等重要属性，其中href属性为<a>标签必须具备的属性。l href属性。设置目标页面的链接地址，可以是绝对地址也可以是相对地址，如果为“#”表示空链接。l target属性。设置超链接的打开方式，共5种：_blank指

6、在新窗口中打开，_parent指在上一级窗口中打开，_self指在同一窗口打开，_top指在浏览器的整个窗口中打开，new指在新窗口中打开。l name属性。创建一个命名锚记，使用命名锚记后，会让链接直接跳转到一个页面的某一部分。<img>:图像标签，用于网页中插入图像。<img>标签拥有以下属性。l src属性。该属性为<img>标签必须具备的属性，指存放图片的具体路径。l width属性。图像的宽度。l height属性。图像的高度。l alt属性。图像的注释，也就是代替文字。l align属性。图像的对齐属性，值baseline为基线对齐，值top为顶

7、端对齐，值middle为居中，值bottom为底端对齐，值texttop为文本上方对齐，值absmiddle为绝对居中，值absbottom为绝对底端对齐，值left为左，值right为右。l border属性。图像的边框的宽度，值大于或等于0，以像素（px）为单位。l vspace属性。图像的垂直边距，图像与页面或文本之间的垂直边距。l hspace属性。图像的水平边距。<table>:定义表格区域。<caption>:定义表格标题。<th>:定义表格头部。<tr>:定义表格行。<td>:定义单元格。<div>:区域标签

8、（又称容器标签），用来作为多种HTML标签的组合的容器，对该区域块进行操作和设置，就可以完成对区域块中元素的操作和设置，Div能让网页代码具有很高的可扩展性。<span>:文字图片等简短内容的容器，其意义有点类似Div，但是和Div不一样的是，span是文本级元素，默认不会占整行，可以在一行显示多个span。span常在段落、列表条目等项目中使用，该标签不能嵌套在其他的封闭级元素中。ptext-indent:2em;表示首行缩进两字符。line-height表示行间距，pline-height:2em;表示行间距（行高）为两字符。 letter-spacing表示字母与字

9、母之间的间距，word-spacing表示英文单词之间的间距。text-align:center；表示居中对齐，text-align:left;表示居左对齐，text-align:right;表示居右对齐。在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。常用的块状元素有：<div>、<p>、<h1>.<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<for

10、m>常用的内联元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>常用的内联块状元素有：<img>、<input>在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。将内联元素a转换

11、为块状元素表示为adisplay:block;块级元素特点：1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）。块状元素也可以通过代码display:inline将元素设置为内联元素。如：div display:inline; 块状元素di

12、v转换为内联元素，从而使 div 元素具有内联元素特点。内联元素特点：1、和其他元素都在一行上；2、元素的高度、宽度及顶部和底部边距不可设置；3、元素的宽度就是它包含的文字或图片的宽度，不可改变。内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。内联块状元素特点：1、和其他元素都在一行上；2、元素的高度、宽度、行高以及顶和底边距都可设置。border-style（边框样式）常见样式有：dashed

13、（虚线）| dotted（点线）| solid（实线）。border-color（边框颜色）中的颜色可设置为十六进制颜色，如:border-color:#888;/前面的井号不要忘掉。border-width（边框宽度）中的宽度也可以设置为：thin | medium | thick（但不是很常用），最常还是用象素（px）。只设置下（上、右、左）边框的设置：divborder-bottom:1px solid red;border-top:1px solid red; border-right:1px solid red; border-left:1px solid red;元素内容与边框之间

14、是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：divpadding:20px 10px 15px 30px;如果上、右、下、左的填充都为10px;可以这么写divpadding:10px;如果上下填充一样为10px，左右一样为20px，可以这么写：divpadding:10px 20px;元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：divmargin:20px 10px 15px 30px;如果上右下左的边界都为10px;可以这么写：div margin:10px;如果上下边界一样为10px，左右一样为

15、20px，可以这么写：div margin:10px 20px;总结一下：padding和margin的区别，padding在边框里，margin在边框外。流动模型第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）浮动模型任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。（在设置完边框数据后设置浮动模型）

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

17、，则相对于body元素，即相对于浏览器窗口。如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。div width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px;<div id="div1"></div>（要向什么方向移动就输入多少距离就输入相反的方向和距离）如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属

18、性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。如下代码实现相对于以前位置向下移动50px，向右移动100px;#div1 width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px;<div id="div1"></div>Pos

19、ition fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed属性功能相同。（想将层模型固定在什么位置就在Position fixed后加上位置，默认是固定在左上角）运用position:relative可以相对于其他元素进行定位。1、 参照定位的元素必须是相对定位元素的前辈元

20、素2、 参照定位的元素必须加入position:relative;3、 定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。行内元素怎么进行水平居中：如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )当被设置元素为 块状元素 时用 text-align：center 就不起作用了。定宽块状元素(定宽块状元素

21、：块状元素的宽度width为固定值)<style> div border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ </style>不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：加入 table 标签设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置设置 position:relativ

22、e 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的利用table标签的长度自适应性-即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）

23、。如下：html代码：<div> <table>  <tbody>    <tr><td>    <ul>        <li>我是第一行文本</li>        <li>我是第二行文本</li>     

24、0;  <li>我是第三行文本</li>    </ul>    </td></tr>  </tbody> </table></div>css代码：<style>table border:1px solid; margin:0 auto;</style>第二种方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现

25、居中效果。html代码：<body><div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul></div></body>css代码：

26、<style>.container text-align:center;/* margin:0;padding:0（消除文本与div边框之间的间隙）*/.container ul list-style:none; margin:0; padding:0; display:inline;/* margin-right:8px（设置li文本之间的间隔）*/.container li margin-right:8px; display:inline;</style>方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 positi

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论