网页标题
元数据标签
<body></body>中主要包括网页内容
<meta>标签
二：HTML基本标签
标题标签
<h2>…二 级标题</h2>
<h3>…三 级标题</h3>
<h4>…四 级标题</h4>
<h5>…五 级标题</h5>
<h6>…六 级标题</h6>
<h1>北京欢迎你</h1>
北京欢迎你，有梦想谁都了不起！<br />
有勇气就会有奇迹。<br />
北京欢迎你，为你开天辟地<br />
……
</p>
特殊符号
超链接使用场合
1页面间链接：从一个页面链接到另外一个页面
2功能性链接：电子邮件，迅雷，QQ
列表的分类：无序列表，有序列表，定义列表
无序列表eg:
<ul>(声明无序列表)
<li>桔子</li>
<li>香蕉</li> <li>...</li>:声明列表项
<li>苹果</li>
</ul>
ul标签的type属性取值
<ol>(声明有序列表)
<li>桔子</li>
<li>香蕉</li> <li>...</li>:声明列表项
<li>苹果</li>
</ol>
ol标签的type取值
<dt>所属学院</dt> <dt>...</dt>:声明列表项
<dd>计算机应用</dd> <dd>...</dd>:定义列表项内容
<dt>所属专业</dt>
<dd>计算机软件工程</dd>
</dl>
三种列表对比：
类型 | 说明 | 项目符号 |
无序列表 | 以<ul>标签来实现 以<li>标签表示列表项 | 通过type属性设置项目符号 disc（默认）、square和circle |
有序列表 | 以<ol>标签来实现 以<li>标签表示列表项 | 通过type属性设置项目顺序 1(数字，默认)、A（大写字母）、a（小写字母）、I（大写罗马数字）和i（小写罗马数字） |
定义类表 | 以<dl>标签是实现 以<dt>标签定义列表项 以<dd>标签定义内容 | 无项目符号和显示顺序 |
<tr> (行标签)
<td>第1个单元格的内容</td> (单元格标签)
<td>第2个单元格的内容</td>
……
</tr>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>
</table>
表格对齐方式
默认对齐、居中对齐、左对齐、右对齐
单元格对齐方式 居中对齐 eg: align=center
水平对齐方式、垂直对齐方式
属性 | 值 | 说明 |
align 水平对齐方式 | left | 左对齐 |
center | 居中对齐 | |
right | 右对齐 | |
valign 垂直对齐方式 | top | 顶端对齐 |
middle | 居中对齐 | |
bottom | 底端对齐 | |
baseline | 基线对齐 |
<table> colspan:所跨的列数。
<tr> rowspan:所跨的行数。
<td colspan="n">单元格内容</td>
</tr>
<tr>
<td>单元格内容</td>
……
</tr>
......
</table>
表单标签
表单(form)：用来接收用户信息的标签
<form method=“post” action=“请求服务器端路径">
<p> 名字：<input name=“username" type="text" > </p>
<p> 密码：<input name=“pwd" type="password" > </p>
<p>
<input type="submit" value="提交">
<input type=“reset” value=“重置">
</p>
</form>
表单元素格式：
属性 | 说明 |
type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text |
name | 指定表单元素的名称。 |
value | 元素的初始值。type 为 radio时必须指定一个值 |
size | 指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
maxlength | type为text 或 password 时，输入的最大字符数 |
checked | type为radio或checkbox时，指定按钮是否是被选中 |
表单元素高级属性
只读 readonly="true"
禁用 disabled="true"
练习：
1.
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk"/>
<title>我的first网页</title>
</head>
<body>
<a href="second.html" target="_blank">点击跳转</a> <br/> <br/>
<a href="mailto:xyz@163.com">点我发送邮件</a>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="gbk"/>
<title>我的第一个网页</title>
</head>
<body>
<h1> Hello,欢迎学习html知识！</h1>
<hr/> <!-- 这是水平线标签 -->
<p title="beijing">
北京欢迎你，有梦想谁都了不起！<br/>
为你开天辟地。
</p>
<p> 有勇气就会有奇迹。</p>
中华人民共和国 加油！
<p> << 孙子兵法 >> </p>
</body>
</html>运行结果图：
3.
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk"/>
<title>无序列表与有序列表</title>
</head>
<body>
<ul type="circle">
<a href="images/apple.jpg"> <li>XX</li> </a>
<li>薛晋</li>
<li>学生</li>
<a href="http://www.baidu.com" target="_blank"><li>YY</li></a>
</ul>
<ol type="a">
<li>刘亦菲</li>
<li>胡歌</li>
<li>吴京</li>
<li>演员</li>
<ol>
<dl>
<dt>Java</dt>
<dd>Java是一种应用广泛的编程语言</dd>
<dt>Python</dt>
<dd>Python是一种脚本编程语言</dd>
</dl>
</body>
</html>运行结果图：
4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sublime软件</title>
</head>
<body>
用sublime创建一个html文件!
<h1>你好，Sublime</h1>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<form method="post" action="serverURL" enctype="multipart/form-data">
注册用户名：<input type="text" name="username"> <br/> <br/>
注册密码：<input type="password" name="pwd"/> <br/>
性别: <input type="radio" name="sex" value="boy" checked="true" /> 男
<input type="radio" name="sex" value="girl"/> 女
<br/>
兴趣爱好： <input type="checkbox" name="hobby" value="football"> 足球
<input type="checkbox" name="hobby" value="dancing" checked="true"> 跳舞
<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="jogging"> 跑步
<br/>
籍贯：<select name="home">
<option value="shanxi">陕西</option>
<option value="jiangsu">江苏</option>
<option value="henan">河南</option>
</select>
<br/>
<input type="button" disabled="true" value="普通按钮">
<br/>
<input type="image" src="images/laba.png">
<br/>
自我介绍：<br/>
<textarea name="introduce" cols="30" rows="3" readonly="true"></textarea>
<br/>
上传照片：<input type="file" name="pic"/>
<br/>
<input type="submit" value="注册" /> <input type="reset" value="重置">
</form>
</body>
</html>运行结果图：
6.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table标签</title>
</head>
<body>
<table border="1" align="center">
<thead>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>吴京</td>
<td>男</td>
<td>95.5</td>
</tr>
<tr>
<td>2</td>
<td>胡歌</td>
<td>男</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">3</td>
<td>洪金宝</td>
<td>男</td>
<td>80.5</td>
</tr>
<tr>
<td>成龙</td>
<td>女</td>
<td>70.5</td>
</tr>
<tr>
<td colspan="3">学生信息</td>
<td>总分</td>
</tr>
</tbody>
</table>
</body>
</html>运行结果图：
2064
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
