HTML的文档结构
HTML的文档结构主要是有3部分组成的：
1.<html></html>
<html>标记用于html文件的最前面，用来表示html文件的开始。而</html>的标记则是放在html的最后面，用来表示html文件的结束，两个标记必须一起使用。
2.<head>和</head>
<head>和</head>构成html文件的头部部分，在此标记对之间可以使用<title> </title>和<script> </script>等等标记对，这些标记都是描述html文档相关信息的标记对，<head> </head>标记对之间的内容是不会在浏览器中的内容部分出现的。两个标记必须同时使用。
3.<body>和</body>
<body>和</body>是html文档的主体部分，在此标记可以包括“<p>”,“</p>”,“<h1>”,“<br>”等等众多的标记，他们所定义的文本，图片等等将会在浏览器的内容部分显示出来。两个标记必须一起使用。
TITLE标记
在头部的<head></head>中，有另一组标签<title></title>。打在<title></title>这里面的文字会出现在浏览器视窗最上面蓝色部分里，作为网页的主题。
实例：
<title>这是我的html页面</title>
title标签：对于整个网页的总体描述；
文字上的分隔标记
主要在于：浏览器不识别何时段落，换行，以及空格
则提供一下标记：
常用的分隔标记：
强制断行标记“<br>” --换行
强制分段标记“<p>” --使文字段落化
空格“ ；” --空格
排版的标记
1.文字的置左，置右，置中
使用分段标记“<p>”在加上一些简单的属性设定，就可以让其的文字置左，置右，置中。
2.置中标记
使用方法：
<center>内容</center> --内容居中
例：<p align="center">lalallalalla</p>
<p align="left">lalallalalla</p>
<p align="right">lalallalalla</p>
3.保持原始数
使用方法：<pre>内容<pre>据格式标记 ---提前规划好文字格式
字体标记
1.标题标记
使用方法：<h1>内容</h1>
2.设置字体标记
使用方法：<font size=“2” color=“red” face=“黑体”>内容</font>
3.字体变化标记
使用：在文字标记中，对于文字的格式也有相当多的变化，如加粗，斜体等等。
<b></b> 加粗
<i></i> 斜体
<u></u> 底线
<kbd>用粗体等宽字体显示文字</kbd>
<var>用较小的固定宽度显示字体</var>
例：
<font size="6mm" color="blue" face="楷体">
<b>年后</b>
<i>haha</i>
<u>usei</u>
</font>
背景标记
bgcolor：设置背景颜色
backgroud：设置背景图片
例：
<table border="1px " cellspacing="0" cellpadding="0" bgcolor="#000000" background="img/360.png" width="100px" height="100px"></table>
分隔线标记
<hr> :分隔标记
例：
<font size="6mm" color="blue" face="楷体">
<b>年后</b>
<hr >
<i>haha</i>
<hr >
<u>usei</u>
</font>
Img标记
Img标记：向网页中插入图片；
例：
<img src="img/Go.png" align="center" border="1px" width="100px " height="100px" >
序列标记
ul :无序列表
ol :有序列表
例：
<ul>
<li>nihao</li>
<li>nihao</li>
<li>nihao</li>
</ul>
<ol>
<li>niaho</li>
<li>niaho</li>
<li>niaho</li>
</ol>
超链接
<a href="超链接">描述</a>
-black属性：指点击超链接后，重开窗口，不在原有的页面上进行
例 ：
<a href="http://hao.195855.com/" target="_blank">360浏览器</a>
锚点链接
<a href=”#end”>跳到尾部</a>
<a name=”end”> </a>
<a href=”#Top”>跳到顶部</a>
<a name=”Top”> </a>
表格
表格的结构
1.<table>
<table>...</table>是用来在html页面上创建表格的。
2.<th>代表列名一般放在第一行
3.<tr>代表格的一行。
4.<td>用来定义表格的一列。
在默认情况下，表格是没有边框的，如果想要出现边框，就是用border属性。
表格合并：
Rowspan:上下合并，下一行少一列
Colspan:左右合并
例：
<html>
<head>
<meta charset="utf-8">
<title>网页跳转</title>
</head>
<body>
<a href="http://hao.195855.com" target="_blank">进入360浏览器</a><br>
<a href="https://www.baidu.com" target="_blank">进入百度浏览器</a><br>
<table border="1" bordercolor="red" bgcolor="aliceblue" cellspacing="0" cellpadding="20" width="50%" height="50%" align="center">
<tr>
<td>date</td>
<td colspan="3">date</td>
</tr>
<tr >
<td>date</td>
<td>date</td>
<td>date</td>
<td rowspan="2">date</td>
</tr>
<tr height="150px">
<td>date</td>
<td colspan="2">date</td>
</tr>
</table>
<br />
<table border="1" bordercolor="red" bgcolor="aliceblue" cellspacing="0" cellpadding="20" width="50%" height="50%" align="center">
<tr>
<td rowspan="5">date</td>
<td>date</td>
</tr>
<tr>
<td>date</td>
</tr>
<tr>
<td>date</td>
</tr>
<tr>
<td>date</td>
</tr>
<tr>
<td>date</td>
</tr>
<tr>
<td colspan="2">date</td>
</tr>
</table>
</body>
</html>
input标签、下拉列表及文本域
<input />标签的 type分为：
text -文本框
button -按钮
submit-提交
reset-重置
password -密码
checkbox-多选
radio-单选
file -上传文件
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
写法：<input type = “text” value=“”/>
数字范围输入框（进度条）
<input type="range" name="points" min="1" max="10" />
----------------------------------------------------
Select标签
<select>
<option value="qxz" selected/>请选择
<option value=“A”/>苹果
<option value=“B”/>香蕉
<option value=“C”/>橘子
<option value=“D”/>西瓜
</select>
textarea便签
<textarea ROWS="5" COLS="30" ></textarea >
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<center>
<form action="#" method="get">
<table border="1" cellspacing="0" cellpadding="0" bgcolor="aliceblue">
<tr>
<!-- 文本框 -->
<td width="50%" height="50px">用户名：<input type="text" id="" value="" name="username" /></td>
<td width="50%" height="50px"> 密码: <input type="text" id="" value="" name="password" /></td>
</tr>
<tr>
<!-- 单选框 -->
<td colspan="2" height="50px"> 性别：         <input type="radio" name="sex"
id="4" value="1" /><label for="4">男</label>
 <input type="radio" name="sex" id="5" value="2" /><label for="5">女</label>
</td>
</tr>
<tr>
<!-- 时间日期 -->
<td colspan="2" height="50px"> 出生日期：        <input type="date" name="time"
id="" value="" />
</td>
</tr>
<tr>
<!-- 时间日期 -->
<td colspan="2" height="50px"> 数量：          <input type="number" name="point" min="1" max="10" value="1"/>
</td>
</tr>
<tr>
<!-- 多选框 -->
<td colspan="2" height="50px"> 爱好：         <input type="checkbox" name="hobby"
id="1" value="" /><label for="1">跑步</label>
<input type="checkbox" name="hobby" id="22" value="" /><label for="22">足球</label>
<input type="checkbox" name="hobby" id="3" value="" /><label for="3">篮球</label>
<input type="checkbox" name="hobby" id="4" value="" /><label for="4">游泳</label>
</td>
</tr>
<tr>
<!-- 下拉框 -->
<td colspan="2" height="50px"> 学历：          <select>
<option value="">---请选择学历---</option>
<option value="child">幼儿园</option>
<option value="z">中专</option>
<option value="d">大专</option>
<option value="b">本科</option>
<option value="y">研究生</option>
</select>
</td>
</tr>
<tr align="absmiddle">
<!-- 书写框 段落书写 -->
<td colspan="2" height="200px"> 个人描述：      <textarea rows="20" cols="30" name="cd"></textarea></td>
</tr>
<tr align="center">
<!-- 注册 重置按钮 -->
<td width="50%" height="50px"><input type="submit" value="注册" /></td>
<td width="50%" height="50px"><input type="reset" value="重置" /></td>
</tr>
</table>
<!-- 滚动条 -->
<input type="range" name="aw" min="1" max="10" value="1" />
</form>
</center>
</body>
</html>
436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
