<!DOCTYPE>标签（了解）
声名文档类型html，告知浏览器以html的规范解析当前文档
1.含义
文档声名，用来声明文档遵循的规范，告知浏览器通过此规范来解析此页面中的代码
脚下留心：
<!DOCTYPE>必须放在页面最顶部
<!DOCTYPE>不是标签，只是用来声明文档类型，并告知浏览器通过此规范来解析本页面中的代码
2.html5的doctype声明
<!DOCTYPE html>
3.XHTML 1.0 的严格型doctype声明：Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
4.XHTML 1.0 的过渡型doctype声明：Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
注意：使用最多的是html5的声名和过渡型的声名
5.XHTML 和 HTML的区别
XHTML是满足W3C的HTML
XHTML = 规范 + HTML
了解：W3C----万维网联盟（World Wide Web Consortium），我们网页的规范就是这个机构制定的
实体
导入：有一个需求，要做一个html的教材，例：p标签的语法是<p></p>，这样在页面中是看不到的，浏览器把这个标签解析了，现在是不需要的，需要将尖括号替换成浏览器不能解析的字符，且在浏览器中需要看到尖括号的形式，这个特殊字符就是实体
实体：替换特殊字符的代码，比如说<
空格：
<：<
>：>
多学一招：在DW里面按&符号会有提示很多实体
1.相关标签
画图说明，table是一个表格的模块，里面有行，光有行不行，里面要有列，在html中不叫列，叫单元格，再有很多行，就组成了表格-------》table标签包含行tr---》再包含单元格td
表格：<table></table>
行：<tr></tr>
单元格：<td></td>
每列的标题：<th></th>
表格标题：<caption></caption>
2.对齐方式
a) 水平对齐
语法：align="center/left/right"
b) 垂直对齐
语法：valign="top/middle/bottom"
3.单元格间距和填充
单元格间距（cellspacing）：单元格和单元格距离，默认是2像素
单元格填充（cellpadding）：单元格和内容的距离，默认是1像素
4.合并单元格
导入：最后两行的最后两个单元格为照片，需要合并起来，这种合并是上下合并，所以合并的是行。如果是左右合并，那就是合并的列
合并行(rowspan)：把不同的行合并起来，写在上面的单元格上面
合并列(colspan)：把不同列合并起来，写在左边的单元格上面
取值是数值，需要合并几个单元格就写数字几就行，一旦合并了单元格，就需要将多余的单元格删掉
两个排版标签
这两个标签没有语义
div标签：一般用于存放图片、文字、视屏等网页内容----存放一切内容------用作盒子
span标签：一般只用于存放文字--------存放文字
他们的显示方式不同
<div>离离原上草，</div>
<div>一岁一枯荣。</div>
<span>野火烧不尽，</span>
<span>春风吹又生。</span>
课程表
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<!-- cellspacing 单元格之间的间距，默认2，设置为0两条线合并
cellpadding 单元格的填充（文字的上下左右都有了填充的距离）
table标签的align属性是表格整体的对齐方式，值有left/right/center（居中）
每个td都已加align对齐方式的属性，td单元格中的文字会居左(left)/居右(right)/居中(center)
tr也可以加align属性，代表行中的每一个单元格中的文字的对齐方式
tr和td都可以加valign的属性，代表垂直的对齐方式
table不能加valign属性
-->
<table border=1 cellspacing=0 width="800" height="500" align="center">
<caption>
<h2>课程表</h2>
</caption>
<tr>
<th></th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
<tr>
<td>第一节</td>
<td align="center">html</td>
<td>css</td>
<td>php</td>
<td>javascript</td>
<td>mysql</td>
</tr>
<tr align="center">
<td>第二节</td>
<td>css</td>
<td>php</td>
<td>js</td>
<td>自习</td>
<td>css</td>
</tr>
<tr>
<td>第三节</td>
<td rowspan="2">php</td>
<td>js</td>
<td valign="top">体育课</td>
<td valign="bottom">mysql</td><!-- bottom下面 -->
<td>js</td>
</tr>
<tr valign="top">
<td>第四节</td>
<td>mysql</td>
<td>音乐课</td>
<td colspan="2">php</td><!-- column 柱子，圆柱体 -->
</tr>
</table>
</body>
</html>
表单
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<!-- 表单域 form双标签 -->
<form>
<!-- 表单元素 -->
<!-- 文本框 -->
<input type="text" name="kahao" value="请输入你的银行卡号">
<!-- 口令框（密码框） -->
<input type="password" name="password" value="请输入你的密码">
<!-- 单选框:type属性的值为radio，同一组单选框都需要加name属性，且同一组内的name属性的值必须保持一致
默认选中的属性是checked值也是checked
-->
<input type="radio" name="sex" checked="checked" value="1">男
<input type="radio" name="sex" value="2">女
<!-- 文件上传 -->
<input type="file" name="img">
<!-- 复选框（多选框）
默认选中属性为checked值也是checked
-->
<input type="checkbox" name="hobby" value="1">吃
<input type="checkbox" name="hobby" value="2">喝
<input type="checkbox" name="hobby" value="3" checked="checked">玩
<input type="checkbox" name="hobby" value="4">乐
<!-- 下拉框
默认选中使用的是selected属性值是selected
这个属性是加在option标签上的
-->
<select name="province">
<option>河南省</option>
<option>河北省</option>
<option>湖南省</option>
<option selected="selected">湖北省</option>
</select>
<br>
<!-- 文本域 -->
<textarea rows="5" name="message" cols="50">你好，世界</textarea>
<!-- 按钮 -->
<!-- 提交按钮 -->
<input type="submit" value="登录">
<!-- 普通按钮 -->
<input type="button" value="尽情点击">
<!-- 重置按钮 -->
<input type="reset">
<!-- 双标签按钮 -->
<button>提交按钮2</button>
</form>
</body>
</html>
分组的下拉菜单
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<!--
分组的下拉框
在option标签的外面套了一层optgroup标签，有一个属性是label，分组的名称（要显示在页面上的）
-->
<form>
<select name="aaa">
<optgroup label="省份">
<option>山东省</option>
<option>广东省</option>
<option>山西省</option>
</optgroup>
<optgroup label="行业">
<option>IT互联网</option>
<option>制造业</option>
<option>零售业</option>
</optgroup>
</select>
<input type="submit">
</form>
</body>
</html>
实体标签
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
段落 标签是<p></p>
♥
</body>
</html>
表格
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<table border=1>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>令狐冲</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>任盈盈</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>任我行</td>
<td>男</td>
<td>55</td>
</tr>
<tr>
<td>岳不群</td>
<td>男</td>
<td>50</td>
</tr>
</table>
</body>
</html>
div标签
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
123123123123<div>阿斯顿发撒旦规范</div>asdfasdfasdfasdf
<hr>
123123123123<span>阿斯顿发撒旦规范</span>asdfasdfasdfasdf
</body>
</html>
标签的通用属性
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box {
color: red;
}
</style>
</head>
<body>
<!--<div id="box"></div>
<div id="box1"></div>-->
<div name="hezi" class="box">盒子1</div>
<p class="box" name="part" style="color:green;">段落</p>
<div class="box1" style="color:green;">我也是盒子</div>
</body>
</html>
表格小例子
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<!--<h1>游戏添加</h1>
<form>
游戏名称：<input type="text"><br>
开发公司：<input type="radio">盛大<input type="radio">腾讯<input type="radio">网易<input type="radio">暴雪<br>
适用人群：<input type="checkbox">小学生<input type="checkbox">大学生<input type="checkbox">白领<input type="checkbox">中老年<br>
游戏类别：<select><option>竞技类</option><option>动作类</option></select><br>
游戏描述：<textarea></textarea><br>
<input type="submit"><input type="reset">
</form>-->
<form>
<table align="center">
<caption>
<h1>游戏添加</h1>
</caption>
<tr>
<td>游戏名称：</td>
<td><input type="text"></td>
</tr>
<tr>
<td>开发公司：</td>
<td>
<input type="radio" name="company">盛大
<input type="radio" name="company">腾讯
<input type="radio" name="company">网易
<input type="radio" name="company">暴雪
</td>
</tr>
<tr>
<td>适用人群：</td>
<td>
<input type="checkbox" name="people">小学生
<input type="checkbox" name="people">大学生
<input type="checkbox" name="people">白领
<input type="checkbox" name="people">中老年
</td>
</tr>
<tr>
<td>游戏类别：</td>
<td>
<select>
<option>竞技类</option>
<option>动作类</option>
<option>射击类</option>
<option>益智类</option>
<option>冒险类</option>
</select>
</td>
</tr>
<tr>
<td>游戏描述：</td>
<td>
<textarea></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit">
<input type="reset">
</td>
</tr>
</table>
</form>
</body>
</html>
小例子1——个人简历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>个人简历</title>
</head>
<body>
<table width="600" border=1 cellspacing=0 align="center">
<caption>
<h2>个人简历</h2>
</caption>
<tr align="center">
<td rowspan="5">
个<br />人<br />资<br />料
</td>
<td>姓名</td>
<td> </td>
<td>性别</td>
<td> </td>
<td>出生年月</td>
<td> </td>
<td rowspan="4">相片</td>
</tr>
<tr align="center">
<td>民族</td>
<td> </td>
<td>政治面貌</td>
<td> </td>
<td>婚姻状况</td>
<td> </td>
</tr>
<tr align="center">
<td>身高</td>
<td> </td>
<td>健康状况</td>
<td> </td>
<td>籍贯</td>
<td> </td>
</tr>
<tr align="center">
<td>联系电话</td>
<td> </td>
<td>电子邮箱</td>
<td> </td>
<td>现所在地</td>
<td> </td>
</tr>
<tr align="center">
<td>应聘职位</td>
<td colspan="6"></td>
</tr>
<tr align="center">
<td>技能</td>
<td>外语水平</td>
<td colspan="2"></td>
<td>电脑水平</td>
<td colspan="3"></td>
</tr>
<tr align="center">
<td rowspan="4">
教<br>育<br>背<br>景
</td>
<td colspan="2">起止日期</td>
<td colspan="2">毕业院校</td>
<td colspan="2">专业</td>
<td>详细情况</td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr align="center">
<td rowspan="4">
工<br>作<br>经<br>历
</td>
<td colspan="2">起止日期</td>
<td colspan="2">公司名称</td>
<td colspan="3">主要职位及职责</td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="3"> </td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="3"> </td>
</tr>
<tr align="center">
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="3"> </td>
</tr>
<tr align="center">
<td rowspan="3">
能<br>力<br>情<br>况
</td>
<td colspan="2">个人荣誉</td>
<td colspan="5"> </td>
</tr>
<tr align="center">
<td colspan="2">兴趣特长</td>
<td colspan="5"> </td>
</tr>
<tr align="center">
<td colspan="2">个人期望</td>
<td colspan="5"> </td>
</tr>
<tr align="center">
<td rowspan="4">
自<br>我<br>评<br>价
</td>
<td colspan="7" rowspan="4"></td>
</tr>
</table>
</body>
</html>
小例子2——登录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border=1 cellspacing=0 bgcolor="pink" width="500" valign="middle">
<tr height="70">
<th colspan=2>京东会员</th>
</tr>
<tr height="70">
<td>用户名：</td>
<td>
<input type="text" value="请输入用户名" maxlength=6 />
<font color="red" size="1">最多输入6个字符</font>
</td>
</tr>
<tr height="70">
<td>密码：</td>
<td>
<input type="text" maxlength=6 />
<font color="red" size="1">最多输入6个字符</font>
</td>
</tr>
<tr height="170">
<td>验证码：</td>
<td>
<input type="text" /><br /><br />
<img src="yzm.jpg" />
</td>
</tr>
<tr height="70">
<td colspan=2 align="center">
<a href="#">登录</a>|<a href="#">注册用户</a>
</td>
</tr>
</table>
</body>
</html>
小例子3——多媒体练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多媒体练习</title>
</head>
<body background="cun.jpg">
<embed src="1.mp3" hidden="true" autostart="true" loop="true">
<marquee behavior="alternate" direction="left" loop="-1" scrolldelay="100">
背景音乐不错
</marquee>
<marquee behavior="alternate" direction="left">
<img src="1.png">
</marquee>
<marquee behavior="scroll" direction="right">
<img src="2.png">
</marquee>
</body>
</html>
小例子4——小说排行榜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>小说排行榜</title>
</head>
<body>
<table width="800" border=1>
<caption>
<h2>今日小说排行榜</h2>
</caption>
<tr height=40>
<th>排行</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr height=40>
<td>1</td>
<td>鬼吹灯</td>
<td>
<img src="up.jpg" />
</td>
<td>65589</td>
<td>45</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr height=40>
<td>2</td>
<td>盗墓笔记</td>
<td>
<img src="down.jpg" />
</td>
<td>1</td>
<td>456</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr height=40>
<td>3</td>
<td>西游记</td>
<td>
<img src="up.jpg" />
</td>
<td>2</td>
<td>456</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr height=40>
<td>4</td>
<td>东游记</td>
<td>
<img src="up.jpg" />
</td>
<td>4567</td>
<td>456</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr height=40>
<td>5</td>
<td>甄嬛传</td>
<td>
<img src="down.jpg" />
</td>
<td>7895</td>
<td>456</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr height=40>
<td>6</td>
<td>水浒传</td>
<td>
<img src="up.jpg" />
</td>
<td>4254</td>
<td>456</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr height=40>
<td>7</td>
<td>三国演义</td>
<td>
<img src="up.jpg" />
</td>
<td>456</td>
<td>456</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
</table>
</body>
</html>
小例子5——注册
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>注册</title>
</head>
<body>
<form action="">
<table width="550" align="center">
<caption>
<h4>请填写域名信息（请您务必填写真实，有效和完整的域名注册信息。）</h4>
</caption>
<tr>
<td align="right">登录账号： </td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">密码： </td>
<td><input type="password" /></td>
</tr>
<tr>
<td align="right">性别： </td>
<td>
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
</td>
</tr>
<tr>
<td align="right">注册网址： </td>
<td><input type="text" value="www." /></td>
</tr>
<tr>
<td align="right">注册网址后缀： </td>
<td>
<input type="checkbox" name="suffix" checked="checked" />.com
<input type="checkbox" name="suffix" checked="checked" />.cn
<input type="checkbox" name="suffix" checked="checked" />.net
<input type="checkbox" name="suffix" checked="checked" />.org
</td>
</tr>
<tr>
<td align="right">域名持有者（中文）： </td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">域名持有者（拼音文）： </td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">所属区域： </td>
<td>
<select>
<option value="">中国</option>
<option value="">美国</option>
<option value="">英国</option>
<option value="">法国</option>
</select>
<select>
<option value="">-省份-</option>
<option value="">河南省</option>
<option value="">湖南省</option>
<option value="">新疆维吾尔自治区</option>
</select>
</td>
</tr>
<tr>
<td align="right">单位所在地： </td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">单位负责人： </td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">通信地址： </td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">联系电话： </td>
<td><input type="text" /></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" />
<input type="reset" />
</td>
</tr>
</table>
</form>
</body>
</html>
网友评论