HTML简介
HTML是HyperText Markup Language的简写，叫超文本标记语言、网页语言。
标记即标签，html所有的操作都是通过标签实现的。
HTML的规范
- 一个html开始标签和结束标签：
<html> </html> - html包含两部分内容：
（1）<head>设置相关信息</head>
（2）<body>显示在网页上的内容</body>
（3）html有开始标签，也要有结束标签
（4）html代码不区分大小写
（5）有些标签没有结束标签，如换行标签<br/>、水平线标签<hr/>
HTML的操作思想
网页中有很多数据，不同的数据需要不同的显示效果，这时需要用数据把操作的数据包起来，通过修改标签属性值来实现标签内数据样式的变化
文字标签和注释标签
-
文字标签font，属性有size、color
size：文字大小，大小范围1-7，超出7，默认还是7
colo：文字颜色，如red、blue，也可用十六进制表示，如#66cc66 -
注释标签
<!--注释内容--> -
标题标签、水平线标签、特殊字符
（1）标题标签：<h1>到<h6>，依次变小，会自动换行
（2）水平线标签：<hr/>，属性有size（粗细）、color。如：<hr/ size="5" color="blue">
（3）特殊字符：要显示特殊字符，需进行转移，如<对应<，>对应>，空格对应
列表标签
- 列表
<dl>
<dt></dt>
<dd></dd>
</dl>
- 有序列表
<ol>
<li>
</li>
</ol>
<ol>标签有type属性，如type=“a”，type=“i”，默认type=“1”
- 无序列表
<ul>
<li>
</li>
</ul>
<ul>标签有type属性，如空心圆（type=“circle”）、实心圆（type=“disc”）、实心方块（type=“square”），默认disc
图像标签
<img src="图片的路径" width="宽度" height=“高度” alt=""/>
路径的介绍
路径分为绝对路径和相对路径
超链接标签
-
链接资源
<a href="链接到资源的路径">这是一个链接</a>
属性target可以设置打开的方式，target="_blank"（在新窗口打开），target="_self"（在当前页打开），默认在当前页打开
当超链接不需要到任何地址，href里面填#即可 -
定位资源（如回到顶部等）
（1）如果想要定位资源：定义一个位置
<a name="top">顶部</a>
（2）回到这个位置
<a href="#top">回到顶部</a>
原样输出标签
<pre>这里的内容会原模原样输出</pre>
表格标签
<table>
<caption>表格的标题</caption>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
一个tr就是一行，一个td就是一个单元格
<table border="1" bordercolor="blue" cellspacing="0" width="" height="">
第一个属性值为1表示有边框，默认没有，第二个属性表示边框颜色，第三个属性值为0表示单元格没有间隙
<tr>有align属性，left（居左），center（居中），right（居右）
<td>有align、rowspan、colspan属性
<th>也可以表示单元格，同时自动居中和加粗
标签<caption>表格的标题</caption>可以放在<table>里面的第一行表示表格的题目
合并单元格：
colspan：跨列（合并一行用跨列操作），rowspan="3"表示跨3列
rowspan：跨行（合并一列用跨行操作）
表单标签<form></form>
<form>的属性有：
action：表示要提交到的地址，默认当前页面；
method：表示提交方式，常用的有两种，get和post，默认get
get和post的区别：
- get请求地址栏会携带提交的数据，post请求不会携带（请求体里面）
- get请求安全级别较低，post请求安全级别较高
- get请求有数据大小的限制，post没有限制
enctype：一般请求下不需要这个属性，做文件上传的时候需要设置这个属性
-
普通输入项
<input type="text"/> -
密码输入项
<input type="password"/> -
单选框
<input type="radio" name="sex" checked="checked" />男<input type="radio" name="sex"/>女
实现默认选中的属性：
checked=“checked”，以上默认选中男 -
复选框
<input type="checkbox" name="love" checked="checked"/>篮球<input type="checkbox" name="love"/>羽毛球
实现默认选中的属性：
checked=“checked”，以上默认选中篮球 -
文件输入项（文件上传）
<input type="file"/> -
下拉输入项
<select name="birth">
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
默认选中属性：
selected=“selected”
-
文本域
<textarea cols="" rows=""></textarea> -
隐藏项（不会显示在页面上，但是存在于html代码中）
<input type="hidden"/> -
提交按钮
<input type="submit" value="注册"/> -
图片提交
<input type="image" src=""/> -
重置按钮
<input type="reset" value=""/> -
普通按钮（一般和js一起使用）
<input type="button" value=""/>
使用表单标签实现注册页面的案例
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<h2>注册传智播客的账号</h2>
<form action="">
<table width="100%">
<tr>
<td align="right">注册邮箱：</td>
<td><input type="text" name="mail"/></td>
</tr>
<tr>
<td> </td>
<td>你可以使用<a href="#">账号</a>注册或<a href="#">手机号</a>注册</td>
</tr>
<tr>
<td align="right">创建密码：</td>
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<td align="right">真实姓名：</td>
<td><input type="text" name="realname"/></td>
</tr>
<tr>
<td align="right">性别：</td>
<td><input type="radio" name="sex" value="nan"/>男
<input type="radio" name="sex" value="nv"/>女</td>
</tr>
<tr>
<td align="right">生日：</td>
<td>
<select name="year">
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
</select>年
<select name="month">
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>月
<select name="day">
<option value="4">4</option>
<option value="7">7</option>
<option value="26">26</option>
</select>日
</td>
</tr>
<tr>
<td align="right">我现在：</td>
<td>
<select name="now">
<option>我正在上学</option>
<option>我已经工作</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td><img src="#"/><a href="#">看不清，换一张</a></td>
</tr>
<tr>
<td align="right">验证码：</td>
<td><input type="text" name="verycode"/></td>
</tr>
<tr>
<td> </td>
<td><input type="image" src="#"/></td>
</tr>
</table>
</form>
</body>
</html>
其他标签
<b>加粗</b>
<u>下划线</u>
<i>斜体</i>
<s>删除线</s>
<pre>原样输出</pre>
<sub>下标</sub>
<sup>上标</sup>
<div></div>会自动换行
<span></span>不会自动换行
<p>一个段落</p>
头标签
头标签放在<head>中。
-
<meta>标签用于设置页面的一些相关内容。
例：<meta http-equiv="refresh" content="3" url="#"/>
实现页面的定时跳转（该例3秒跳转到url所指路径） -
<base>标签，用于超链接的基本设置
例：<base target="_blank"/>
设置超链接的打开方式（该例下页面中所有超链接都会在新窗口中打开） -
<link>标签，用于引入外部文件
框架标签（现在一般不用）
该标签可以嵌套使用。
注：如果使用了框架标签，就不能使用<body>标签，需要把<body>去掉。
<frameset>有两个属性
rows：按行进行划分，例如：<frameset rows="80,*">表示分两部分，第一部分占80，另一部分占剩下的
cols：按列进行划分<frame>
表示具体显示的页面。
例：<frame name="页面的名称" src="页面的路径">比如该页面显示在<frameset>里的某一部分
例：
<frameset rows="80,*"> //把页面划分成上下两部分
<frame name="top" src="#"> //上面页面
<frameset cols="150,*"> //把下面部分划分成左右两部分
<frame name="lower_left" src="#"> //左边的页面
<frame name="lower_right" src="#"> //右边的页面
</frameset>
</frameset>
如果左面页面中有超链接，想让内容显示在右面的页面，可给超链接加target属性，属性值应为name的值
1057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
