1.html结构
<html> --html开始标签
<head> --文件头(用户在浏览器中看不到) 作用：告诉浏览器如何解析该浏览器页面
</head>
<body> --文件体(用户在浏览器中看得到)
</body>
</html> --html结束标签
2.head文件头
<html>
<head>
<!--标题：在窗口的标题栏看到-->
<title>这是一个标题</title>
<!--告诉浏览器使用什么码表解释html文件-->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<!--
关键词：keywords
搜索引擎：百度 输入：java
网页的排名：推广 SEO
SEO优化
关键词是网页排名的一个因素
权重 100% 50% 33.3% （3~5个合适）
-->
<!--
描述：
标题
描述：（百度里面的灰色字体）
-->
</head>
<body>
</body>
</html>
3. 文本标签
<html>
<head>
<title>html文本标签</title>
</head>
<body>
<!--标题-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--水平线-->
<hr/>
<!--段落-->
<p>第一段内容</p>
<p>第二段内容</p>
<!--段落缩进-->
<blockquote>
第三段内容第三段内容第三段内容第三段内容第三段内容第三段内容第三段内容第三段内容
第三段内容第三段内容第三段内容第三段内容第三段内容第三段内容第三段内容第三段内容
第三段内容第三段内容第三段内容第三段内容第三段内容第三段内容第三段内容第三段内容
</blockquote>
<!--上下标（sup和sub） 用于公式-->
x<sup>2</sup> + y<sup>2</sup> = 0
H<sub>2</sub>O
<!--换行-->
<br/>换行
<!--原样输出 （按照编辑器的效果直接输出，如：原样输出代码） -->
<pre>
凉州词
葡萄美酒夜光杯，欲饮琵琶马上催。
醉卧沙场君莫笑，古来征战几人还。
</pre>
<!-- 有序列表 (投票，菜单）-->
你最喜欢的水果？
<ol type="a"> <!-- type属性：改变序号的类型-->
<li>苹果</li><li>橘子</li>
</ol>
<!-- 无序列表 -->
学生管理系统
<ul type="circle"> <!-- type属性 -->
<li>学生管理</li>
<li>成绩管理</li>
<li>系统管理</li>
</ul>
<!-- 项目列表 （用在有结构层次的项目） -->
<dl>
<dt>技术总监</dt>
<dd>工程师1</dd>
<dd>工程师2</dd>
<dt>财务总监</dt>
<dd>会计1</dd>
<dd>会计2</dd>
</dl>
<!-- 行内标签 块标签 -- （在html中使用非常少，在css中用得多）-->
<span>span的内容</span>
<div>div的内容</div>
</body>
</html>
4.超链接标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超链接标签</title>
</head>
<body>
<!--
a 超链接标签：
常用的属性：
href：表示链接到的地址
target 打开方式 _self当前窗口打开 _blank新窗口打开
常见的协议：
file：// 本地文件协议（本地或局域网） 在href中不写就是使用这个默认协议
http:// http协议 通常链接到域名
thunder： 迅雷下载软件的协议
超链接的作用：
1）链接到资源
2）作为锚点使用（如：去到某一章，回到顶端，去到某一网页的某一点）
去到锚点：<a href="#锚点名称">锚点名称<a/>
打锚点：<a name="锚点名称"></a>
-->
<a href="03.文本标签.html" target="_self">超链接</a><br/>
<a href="../1.jpg" target="_blank">链接到图片</a><br/>
<a href="http://www.baidu.com">链接到百度</a><br/>
<a href="thunder://www.moive.com/复仇者联盟.avi">高清《复仇者联盟》（迅雷通道）</a><br/>
<a href="#ch01">去到第一章</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="ch01"></a>
第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内 容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容
</body>
</html>
5.图像和表格标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图像和表格标签</title>
</head>
<body>
<!-- 图像标签
常用属性：
src：表示图片源位置
width:图片宽度
height:图片高度
alt:替代文本，当图片的src属性失效时，alt的属性就会生效
title:提示文本。当鼠标放到图片上面出现
地图（热点区域）：map
热点（链接）：area
-->
<img src = "2.jpg" alt="这是一张风景图片" width = "316" height="289" usemap="#Map" title="" border="0"/>
<map name="Map" id="Map">
<area shape="rect" coords="191,189,285,256" href="04.超链接标签.html" target="_self" />
<area shape="circle" coords="142,117,61" href="03.文本标签.html" target="_blank" />
</map>
</body>
</html>
6.转义字符
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>转义字符</title>
</head>
<body>
<!--
特殊字符 转义字符
< <
> >
& &
空格
注册商标 ®
版权 ©
-->
</body>
</html>
7.表格标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格标签</title>
</head>
<body>
<!--
table 表格
tr 行
td 单元格
th 表头
caption 标题
常用的属性：
border 表格的边框
width 宽度
heigh 高度
align 对齐方式
left 左对齐
center 居中
right 右对齐
rowspan 行合并单元格
colspan 列合并单元格
-->
<table border="1px" width="400px" height="200px" align="center">
<caption>期末成绩单</caption>
<tr>
<th>姓名</th>
<th>班级</th>
<th>成绩</th>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>软工1班</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>软工2班</td>
<td>80</td>
</tr>
<tr>
<td>王五</td>
<td>软工2班</td>
<td>60</td>
</tr>
</table>
</body>
</html>
8.表单标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单标签</title>
</head>
<body>
<!--
作用：用于采集用户输入的数据，提交给后台程序处理。
场景1：
注册用户：注册页面（输入用户名、密码、邮箱）（通过表单标签携带数据）----系统后台程序把用户的数据保存到数据库
场景2：
登录页面：输入用户名和密码（通过表单标签携带用户数据）-----系统后台，搜索数据库
表单标签：
<from> 表单
<input type="text"> 单行输入域
<input type="password"/> 密码输入域
<input type="radio"/> 单选按钮
<input type="checkbox"/> 多选按钮
<select/> 下拉选项
<input type="hidden"/> 隐藏域（不会显示到页面上，但可以携带数据）
<input type="file"/> 文件选择器
<textarea><textarea/> 多行输入域
<input type="submit"/> 提交按钮
<input type="button"/> 普通按钮
<input type="reset"/> 重置按钮
action:表单提交到的地址
method：提交方式
get:提交的数据会放到地址栏上面
get提交的数据不超过1kb（只适用于简单）
post：提交的数据不会放到地址栏上
post提交的数据没有限制（文件上传）
-->
<from action="地址" method="post">
<!-- 单行输入域
常用的属性：
value：该输入的默认值
name: 这个必须填，该name的属性用于给后台程序获取该标签输入的内容
size:可以输入的字符数量
-->
用户名：<input type="text" value="4-10位的数字或字母" name="userName" size="25"/><br/>
<!--
密码输入域：以非明文的效果获取用户输入的数据
常用属性：
name:必须填，用于后台获取该标签的内容
-->
密码：<input type="password" name="userPwd"/><br/>
<!--
单选按钮：
注意：如果是同一组的单选选项就使用相同的name属性
单选按钮的value属性一定填，这个value的属性就是发送给后台的内容
-->
性别：<input type="radio" name="gender" value="男"/>男
<input type="radio" name="gender" value="女"/>女<br/>
<!--
多选按钮：
注意：要用name属性值来把这些选项归为一组
必须加上value属性，后台才知道要提交的内容
-->
爱好：
<input type="checkbox" name="hobit" value="篮球"/>篮球
<input type="checkbox" name="hobit" value="乒乓球"/>乒乓球
<input type="checkbox" name="hobit" value="排球"/>排球<br/>
<!--
下拉选项：
注意：
name：name属性是后台获取的标记，一定要加上
value：value的值就是发送给后台的内容，一定要加上
-->
籍贯：
<select name="籍贯">
<option value="广东">广东</option>
<option value="湖南">湖南</option>
<option value="云南">云南</option>
<option value="河北">河北</option>
<option value="山西">山西</option>
</select><br/>
<!--
隐藏域：用于携带携带数据，但是在页面上不会显示效果。
-->
<input type="hidden" name="id" value="001" /><br/>
<!--
多行输入域
rows:一共有几行
cols：一行可以输入几个字符
-->
个人简介：
<textarea rows="5" cols="20" name="info">
</textarea><br/>
<!--
提交按钮：点击这个按钮，form中的全部数据就会发送到后台
value:表示按钮显示的文本
-->
<input type="submit" value="提交"/>
<!--
重置按钮
-->
<input type="reset"/>
</from>
</body>
</html>
9.框架标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主页面</title>
</head>
<!--
frameset:框架集（注：需要放在body的外面）
属性：
cols 按照列的方向来划分框架
rows 按照行的方向来划分框架
(以上两个属性的值填每个框架的比例或者长度，%或px）
（*表示其它框架分配完之后剩下的比例）
frame:表示一个框架，框架中包含一个html页面
-->
<frameset rows="10%,*,10%">
<frame src=" " />
<frameset cols="20%,*">
<frame src="c.左边菜单页面.html"/>
<frame src="d.中间页面.html" name="main"/>
</frameset>
<frame src="b.底部页面.html"/>
</frameset><noframes></noframes>
<body>
</body>
</html>
扫一扫
3916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
