Html 介绍
1.什么是html ？
2.HTML的作用？
3. HTML书写规范
文件标签
1.HTML标签
2.head标签
3.title 标签
4.body标签
5.关于HTML中的颜色取值
排版标签
<body>
静夜诗<br />
李白<br />
<hr width="200px" size="2" color="red" align="left" />
<p align="center">
窗前明月光<br />
</p>
疑是地上霜
</body>块标签:
1.div标签用于在文档中设定一块区域常用属性：align:left center right2. span标签用于在行内设定一块区域。html中绝大多数元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始。例如 div p等
内联元素在浏览器显示时，通常不会以新行来开始。span
文体标签
1.font<font>用于规定文本的字体，大小 ，颜色常用属性face:规定文本的字体size:规定文本的大小最大值 7 最小值 1color:规定文本的颜色2.h1 - h6 标题标签<h1> - <h6>标签用于定义标题<h1>最大标题<h6>最小标题<body>
<font color="red" size="1" face="微软雅黑">最帅</font> <br />
<font color="red" size="2" face="微软雅黑">最帅</font><br />
<font color="red" size="7" face="微软雅黑">最帅</font><br />
<hr /> <!--一个横线-->
<h1>你好</h1>
<h2>你好</h2>
<h6>你好</h6>
</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>78<!--有序列表-->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 另起一个新的页面，打开链
例子
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<a href="http://www.baidu.com" target="_self">我是百度</a>
<a name="top"></a><!--锚点-->
你好<br>
你好<br>
你好<br>
你好<br>
你好<br>
你好<br>
你好<br>
你好<br>
<a href="#top">返回顶部</a>
</body>
</html>
表格标签
1. 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/>一横线
例子
<!DOCTYPE html>
<html>
<head>
<title>王小虎虎的HTML</title>
</head>
<body>
<!-- 表格标签 -->
<table border="1" with="30%" align="center" bgcolor="yellow">
<caption>王虎最帅</caption>
<tr align="center">
<th>姓名</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr align="center">
<td rowspan="2">虎</td>
<td colspan="2">18</td>
</tr>
<tr align="center">
<td>是</td>
<td>否</td>
</tr>
</table>
<hr/>
</body>
</html>
书城的demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文藏图书商城</title>
</head>
<body>
<div id="page">
<!--top-->
<div id="top">
<table width="100%">
<tr>
<td width="70%">
<img alt="logo" src="img/logo.png" />
</td>
<td >
<img alt="cart" src="img/cart.gif"/>
<a href="#">购物车</a>
<a href="#">帮助中心</a>
<a href="#">登录</a>
<a href="#">注册</a>
</td>
</tr>
</table>
</div>
<div id="menu">
<table width="100%" bgcolor="#1C3F09">
<tr align="center">
<td>
<a href="http://www.baidu.com"><font color="#ffffff" size="5">紫禁城</font></a>
<a href="http://www.baidu.com"><font color="#ffffff" size="5">中国收藏</font></a>
<a href="http://www.baidu.com"><font color="#ffffff" size="5">收藏投资导刊</font></a>
<a href="http://www.baidu.com"><font color="#ffffff" size="5">收藏家</font></a>
<a href="http://www.baidu.com"><font color="#ffffff" size="5">玉委会</font></a>
<a href="http://www.baidu.com"><font color="#ffffff" size="5">文藏头条</font></a>
</td>
</tr>
</table>
</div>
<div id="search">
<table width="100%" bgcolor="#B6B684">
<tr align="right">
<td>
<font color="#ffffff" size="5">搜索</font>
<input type="text" />
<input type="button" value="搜索" />
</td>
</tr>
</table>
</div>
<!--content-->
<div id="content">
<div align="right">
<font color="darkgreen" size="5">首页</font> >
<font color="darkgreen" size="5">图书列表</font> >
</div>
<h1>商品目录</h1>
<hr />
<h1>北京华星成汇发展有限公司明星杂志</h1>
<span>共计6种产品</span>
<hr />
</div>
<div>
<img alt="productlist" src="img/productlist.gif" width="100%"/>
</div>
<!--书架-->
<div>
<table width="100%">
<tr align="center">
<td>
<div>
<img alt="紫禁城" src="zhijincheng/zhijingcheng01.jpg" width="30%" height="35%"/>
</div>
<div>
<span>
<span>书名：紫禁城一月刊</span><br />
<span>价格：99$</span>
</span>
</div>
</td>
<td>
<div>
<img alt="紫禁城" src="zhijincheng/zhijingcheng02.jpg" width="30%" height="35%"/>
</div>
<div>
<span>
<span>书名：紫禁城二月刊</span><br />
<span>价格：199$</span>
</span>
</div>
</td>
<td>
<div>
<img alt="紫禁城" src="zhijincheng/zhijingcheng03.jpg" width="30%" height="35%"/>
</div>
<div>
<span>
<span>书名：紫禁城三月刊</span><br />
<span>价格：299$</span>
</span>
</div>
</td>
<td>
<div>
<img alt="紫禁城" src="zhijincheng/zhijingcheng04.jpg" width="30%" height="35%"/>
</div>
<div>
<span>
<span>书名：紫禁城四月刊</span><br />
<span>价格：399$</span>
</span>
</div>
</td>
<td>
<div>
<img alt="紫禁城" src="zhijincheng/zhijingcheng02.jpg" width="30%" height="35%"/>
</div>
<div>
<span>
<span>书名：紫禁城五月刊</span><br />
<span>价格：499$</span>
</span>
</div>
</td>
<td>
<div>
<img alt="紫禁城" src="zhijincheng/zhijingcheng02.jpg" width="30%" height="35%"/>
</div>
<div>
<span>
<span>书名：紫禁城二月刊</span><br />
<span>价格：699$</span>
</span>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
表单标签
input 种类
name：定义标签的名称value ： 定义标签值size 定义输入字段的长度maxlength ： 定义输入可输入最大字符个数
select 与option标签
textarea 标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form name="myfrom" action="#" method="post">
<tr>
<td>
姓名
</td>
<td>
<input type="text" name="username" value="wanghu"/>
</td>
</tr>
<br />
<tr>
<td>
密码
</td>
<td>
<input type="password" name="username" value="123456"/>
</td>
</tr>
<br />
<tr>
<td>
性别
</td>
<td>
<input type="radio" name="sex" checked="checked" /> 男
<input type="radio" name="sex" /> 女
</td>
</tr>
<br />
<tr>
<td>
爱好
</td>
<td>
<input type="checkbox" name="like" checked="checked" />足球
<input type="checkbox" name="like" />篮球
<input type="checkbox" name="like" />排球
</td>
</tr>
<br />
<tr>
<td>
地址
</td>
<td>
<select name="省" >
<option value="bj">北京</option>
<option>上海</option>
<option>天津</option>
<option>武汉</option>
</select>
<select name="区" >
<option >朝阳区</option>
<option>海淀区</option>
<option>大兴区</option>
</select>
</td>
</tr>
<br />
<tr>
<td>
邮箱
</td>
<td>
<input type="email" />
</td>
</tr>
<br />
<tr>
<td>
上传头像
</td>
<td>
<input type="file" />
</td>
</tr>
<br />
<tr>
<td>
备注
</td>
<td>
<textarea cols="30" rows="10">文本域</textarea>
</td>
</tr>
<br />
<tr>
<input type="submit" value="提交信息" />
</tr>
</form>
</body>
</html>
其它标签与特殊字符
1. 其它标签
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不允许
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="300,*">
<frame src="index.html" />
<frameset cols="300,*">
<frame src="from.html"/>
<frameset cols="200,*">
<frame src="from.html"/>
<frame name="right" src="https://www.baidu.com" />
</frameset>
</frameset>
</frameset>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="https://www.baidu.com" target="right">百度</a>
<a href="http://www.sohu.com" target="right">火狐</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="300,*">
<frame src="index.html" />
<frameset cols="300,*">
<frame src="left.html"/>
<frame name="right" />
</frameset>
</frameset>
</html>
1838
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
