html中绝大多数元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,通常会以新行来开始。例如 div p等
内联元素在浏览器显示时,通常不会以新行来开始。span
<body> <div style="background-color: red;">div1</div> <div style="background-color: green;">div2</div> <span style="background-color: blue;">span1</span> <span style="background-color: pink;">span2</span> </body>1. ul
<ul>标签表示的是一个无序列表。
常用属性:
type:规定列表的项目符号类型,可取值 disc,square,circle.默认值为disc
2. li
<li>标签表示的是一个列表项
常用属性:
type:这个属性只适用于无序列表,用于设定项目符号,默认值为disc
value:这个属性只适用于有序列表,用于设定列表的项目数字
3. ol
<ol>表示的是一个有序列表。
常用属性:
type:这个属性规定列表中使用的标记类型。可取值1 A a I i.
start:这个属性规定列表的起始值 是数值
1 <body> 2 <ul type="square"> 3 <!--无需列表--> 4 <li type="1">我是大帅哥</li> 5 <li type="1">我是大帅哥</li> 6 <li type="1">我是大帅哥</li> 7 8 <!--有序列表--> 9 <ol type="a" start="5"> 10 <li type="a">我是大帅哥</li> 11 <li type="a">我是大帅哥</li> 12 <li type="a">我是大帅哥</li> 13 </ol> 14 </ul>1. img
<img>是一个图片标签,用于在页面上引入图片.
常用属性:
src:用于设定要引入的图片的url
alt:用于设定图像的替代文字
width:用于设定图片的宽度
height:用于设定图片的高度
border:图片边框厚度
align:用于设定图片的文字的对齐方式 top middle botom
1 <body> 2 <img src="img/1.png" alt="帅哥" width="50%" height="50%" border="5" align="bottom"/> 3 我是一个文本 4 </body>
1. a
<a>标签用于定义超连接,用于从一个页面链接到另一个页面。
常用属性:
href:用于设定链接指向页面的url.
1.访问互联网的时候要加协议http://
2.
例子:<a name="top"></a>
<a href="#top">top</a>
name:用于设定锚的名称
target:用于设定在何处打开链接页面。
_self 默认是self 覆盖本网页打开链接
—_blank 另起一个新的页面,打开链
例子
1 <html> 2 <head> 3 <meta charset="utf-8" /> 4 <title></title> 5 </head> 6 <body> 7 <a href="http://www.baidu.com" target="_self">我是百度</a> 8 <a name="top"></a><!--锚点--> 9 你好<br> 10 你好<br> 11 你好<br> 12 你好<br> 13 你好<br> 14 你好<br> 15 你好<br> 16 你好<br> 17 <a href="#top">返回顶部</a> 18 </body> 19 </html> 201. table
<table>标签用于定义表格
常用属性:
align:用于设定表格的对齐方式
bgcolor:用于设定表格的背景颜色。
border:用于设定表格边框的宽度
width:用于规定表格的宽度。
2. tr
<tr>标签用于定义表格的行,包含一个或多个th或td元素。
<tr>常用属性:
align:用于设定表格中行的内容对齐方式。
bgcolor:用于设定表格中行的背景颜色。
3. td
<td>标签用于定义表格单元
td元素中的文本一般显示为正常字体且左对齐。
<td>常用属性:
align:用于设定单元格内容的对齐方式。
bgcolor:用于设定单元格背景颜色。l height:用于设定单元格的高度。
width:用于设定单元格的宽度。
colspan:用于设定列合并
rowspan:用于设定行合并。
4. caption
<caption>用于定义表格标题
<caption>标签必须紧随<table>标签之后,一个表格只能有一个标题。通常这个标题会被居中于表格之上。
5. th
<th>标签用于定义表格的表头,<th>内部的文本通常呈现为居中加粗文本。
Html表格中有两种类型的单元格:
表头单元格th:包含表头信息。
标准单元格td:包含数据。
6. thead
<thead>标签用于定义表格的页眉
<thead>标签用于组合HTML表格的表头内容。
<thead>元素应该与<tbody>和<tfoot>元素结合起来使用。
注意:<thead>内部必须有<tr>标签。
7. tbody
<tbody>标签用于定义表格的主体
<tbody>标签用于组合HTML表格的主体内容。
8. tfoot
<tfoot>标签用于定义表格的页脚
<tfoot>标签用于组合HTML表格中的表注内容。
9.<hr/>一横线
例子
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>王小虎虎的HTML</title> 5 </head> 6 <body> 7 <!-- 表格标签 --> 8 <table border="1" with="30%" align="center" bgcolor="yellow"> 9 <caption>王虎最帅</caption> 10 <tr align="center"> 11 <th>姓名</th> 12 <th>性别</th> 13 <th>婚否</th> 14 </tr> 15 <tr align="center"> 16 <td rowspan="2">虎</td> 17 <td colspan="2">18</td> 18 </tr> 19 <tr align="center"> 20 <td>是</td> 21 <td>否</td> 22 </tr> 23 </table> 24 25 <hr/> 26 </body> 27 </html> 28书城的demo
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>文藏图书商城</title> 6 </head> 7 <body> 8 <div id="page"> 9 <!--top--> 10 <div id="top"> 11 <table width="100%"> 12 <tr> 13 <td width="70%"> 14 <img alt="logo" src="img/logo.png" /> 15 </td> 16 <td > 17 <img alt="cart" src="img/cart.gif"/> 18 <a href="#">购物车</a> 19 <a href="#">帮助中心</a> 20 <a href="#">登录</a> 21 <a href="#">注册</a> 22 </td> 23 </tr> 24 </table> 25 </div> 26 <div id="menu"> 27 <table width="100%" bgcolor="#1C3F09"> 28 <tr align="center"> 29 <td> 30 <a href="http://www.baidu.com"><font color="#ffffff" size="5">紫禁城</font></a> 31 <a href="http://www.baidu.com"><font color="#ffffff" size="5">中国收藏</font></a> 32 <a href="http://www.baidu.com"><font color="#ffffff" size="5">收藏投资导刊</font></a> 33 <a href="http://www.baidu.com"><font color="#ffffff" size="5">收藏家</font></a> 34 <a href="http://www.baidu.com"><font color="#ffffff" size="5">玉委会</font></a> 35 <a href="http://www.baidu.com"><font color="#ffffff" size="5">文藏头条</font></a> 36 </td> 37 </tr> 38 </table> 39 </div> 40 <div id="search"> 41 <table width="100%" bgcolor="#B6B684"> 42 <tr align="right"> 43 <td> 44 <font color="#ffffff" size="5">搜索</font> 45 <input type="text" /> 46 <input type="button" value="搜索" /> 47 </td> 48 </tr> 49 </table> 50 </div> 51 <!--content--> 52 <div id="content"> 53 <div align="right"> 54 <font color="darkgreen" size="5">首页</font> > 55 <font color="darkgreen" size="5">图书列表</font> > 56 </div> 57 <h1>商品目录</h1> 58 <hr /> 59 <h1>北京华星成汇发展有限公司明星杂志</h1> 60 <span>共计6种产品</span> 61 <hr /> 62 </div> 63 <div> 64 <img alt="productlist" src="img/productlist.gif" width="100%"/> 65 </div> 66 <!--书架--> 67 <div> 68 <table width="100%"> 69 <tr align="center"> 70 <td> 71 <div> 72 <img alt="紫禁城" src="zhijincheng/zhijingcheng01.jpg" width="30%" height="35%"/> 73 </div> 74 <div> 75 <span> 76 <span>书名:紫禁城一月刊</span><br /> 77 <span>价格:99$</span> 78 </span> 79 </div> 80 </td> 81 <td> 82 <div> 83 <img alt="紫禁城" src="zhijincheng/zhijingcheng02.jpg" width="30%" height="35%"/> 84 </div> 85 <div> 86 <span> 87 <span>书名:紫禁城二月刊</span><br /> 88 <span>价格:199$</span> 89 </span> 90 </div> 91 </td> 92 <td> 93 <div> 94 <img alt="紫禁城" src="zhijincheng/zhijingcheng03.jpg" width="30%" height="35%"/> 95 </div> 96 <div> 97 <span> 98 <span>书名:紫禁城三月刊</span><br /> 99 <span>价格:299$</span> 100 </span> 101 </div> 102 </td> 103 <td> 104 <div> 105 <img alt="紫禁城" src="zhijincheng/zhijingcheng04.jpg" width="30%" height="35%"/> 106 </div> 107 <div> 108 <span> 109 <span>书名:紫禁城四月刊</span><br /> 110 <span>价格:399$</span> 111 </span> 112 </div> 113 </td> 114 <td> 115 <div> 116 <img alt="紫禁城" src="zhijincheng/zhijingcheng02.jpg" width="30%" height="35%"/> 117 </div> 118 <div> 119 <span> 120 <span>书名:紫禁城五月刊</span><br /> 121 <span>价格:499$</span> 122 </span> 123 </div> 124 </td> 125 <td> 126 <div> 127 <img alt="紫禁城" src="zhijincheng/zhijingcheng02.jpg" width="30%" height="35%"/> 128 </div> 129 <div> 130 <span> 131 <span>书名:紫禁城二月刊</span><br /> 132 <span>价格:699$</span> 133 </span> 134 </div> 135 </td> 136 </tr> 137 </table> 138 </div> 139 </div> 140 </body> 141 </html> 1421. 其它标签
1. meta标签
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
常用属性:
l content:定义与http-equiv或name属性相关的元信息
l http-equiv:把content属性关联到HTTP头部
l name:把content属性关联到一个名称。
2. link标签
<link> 标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。
<link>只能存在于 head 部分,不过它可出现任何次数。
常用属性:
l type:定义被链接的文档的MIME类型
l href:定义被链接的文档的URL href引入css文件的地址 src: js的文件地址
l rel:定义当前文档与被链接文档之间的关系。
关于<link>标签详细用法,我们会在css中介绍
2. 特殊字符
Html原始码
显示结果
描述
不断行的空白符
<
<
小于号
>
>
大于号
®
®
已注册
©
©
版权
框架标签所谓框架就是将页面划分成几个窗框,就可以让我们在同一个浏览器中显示不止一个页面。
1. <frameset>
<frameset>是框架结构标签,它定义如果将窗口分割为框架.
注意:不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。
常用属性:
l cols:垂直切割
l rows:横向切割
l frameborder:定义框架的边框,其值可以有0和 1,0表示不要边框,1表示要显示边框。
l border:定义框架的边框厚度
l bordercolor:定义框架的边框颜色
l framespacing:定义框架与框架之间的距离。
2. <frame>
<frame>是框架标签,它定义放置在每个框架中的页面。
常用属性:
l src:定义此框架要显示的页面url
l name:定义此框架的名称
l frameborder:定义框架的边框,其值可以有0和 1,0表示不要边框,1表示要显示边框。
l framespacing:定义框架与框架之间的距离
l bordercolor:定义框架的边框颜色
l scrolling:定义是否显示卷轴,YES表示要显示,NO表示不显示,AUTO视情况而定。
l noresize:定义框架大小不可以改变。
l marginhight:定义框架高度部分边缘所保留的空间。
l marginwidth:定义框架宽度部分边缘所保留的空间。
3. <iframe>
iframe 元素会创建包含另外一个文档的内联框架(即行内框架)
常用属性:
l src:定义些框架要显示的页面url
l name:定义些框架的名称
l width:定义些框架的宽度
l height:定义些框架的高度
l marginwidth:定义插入的页面与框边所保留的宽度
l marginheight: 定义插入的页面与框边所保留的高度
l frameborder:定义框架的边框,1表示显示边框 ,0表示不显示
l scrolling:定义是否允许卷动,YES允许,NO不允许
代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <frameset rows="300,*"> 8 <frame src="index.html" /> 9 10 <frameset cols="300,*"> 11 <frame src="from.html"/> 12 <frameset cols="200,*"> 13 <frame src="from.html"/> 14 <frame name="right" src="https://www.baidu.com" /> 15 </frameset> 16 </frameset> 17 </frameset> 18 </html> 19 代码 left.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <a href="https://www.baidu.com" target="right">百度</a> 9 <a href="http://www.sohu.com" target="right">火狐</a> 10 </body> 11 </html> 12 框架标签.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <frameset rows="300,*"> 8 <frame src="index.html" /> 9 10 <frameset cols="300,*"> 11 <frame src="left.html"/> 12 <frame name="right" /> 13 </frameset> 14 </frameset> 15 </html> 16