超文本标记语言（Hypertext Markup Language, HTML）,
不是一种编程语言
是一种用于创建网页的标记语言
HTML不区分大小写，结构松散
id属性是唯一的
HTML基本格式
HTML注释<!-- 注释内容 -->
<!DOCTYPE html> ——声明为HTML5文档
<html> ——文档的开始标记
<head> ——文档的头部信息开始标记
<meta charset="UTF-8"> ——文档的内容编码设置
<title>Insert title here</title> ——网页标题
</head> ——文档的头部信息结束标记
<body> ——文档的主体内容开始标记
</body> ——文档的主体内容结束标记
</html> ——文档的结束标记
head标签
HTML的头部标签
这里的内容不会在浏览器的文档窗口显示。
包含了文档的元（meta）数据。
<head >
<meta charset="UTF-8"><!-- 编码格式 -->
<meta name="keyword" content="淘宝,交易,购物"><!-- 搜索关键字设置,一旦用于所搜这些关键字,该页面将展示 -->
<meta name="description" content="亚洲最大的交易平台"><!-- 描述 -->
<title>html</title><!-- 页面标题 -->
<style type="text/css">
/* 引入css样式 */ /*css注释格式 */
</style>
<script type="text/javascript">
/*引入js样式 */
</script>
<link rel="stylesheet" href="test.css"><!-- 引入外部样式表文件 --> </link>
</head>
body标签
一个网页的主要内容都是编写在body中
<body background="timg.jpg" bgcolor="red" >
/*background="1.本地图片路径：静态图片，动态图片（当前目录下） 2.网络图片地址：网址链接"
bgcolor="red" 修改主体背景颜色为红色 */
</body>
常用body标签
所有标签都有的3个属性
id:唯一标识,id值不可以重复
class:多个标签样式一致时,可以设置统一的class值.用class选择器去设置样式
style:"coloe:red;width:80;" 设置单个标签的样式
基本标签
<!-- 标题标签 h1的字体最大 h6最小-->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<br/>换行
<hr>一条水平线
<i>斜体字</i>
<b>粗体字</b>
<ins>下划线</ins>
<del>删除字</del>
<p>段落标签</p>独占一行
10<sup>2</sup>10的2次方
H<sub>2</sub>O 水的化学表达式
CO<sub>2</sub> 二氧化碳的化学表达式
空格
> >
< <
& &
¥ ￥
© 版权
® 注册
<!-- 块级标签 :独占一行,能设置文本的长度和宽度 h1-h6 div p hr -->
<div>div标签</div>
<!--内联标签 :长度与内容有关,不能设置文本的长度和宽度 a img u s i b span -->
<span>span标签</span>
图片标签
<!-- 图片标签 src属性值为图片的路径 width="800" height="600"
设置图片的宽和高-->
<img alt="图片未找到显示此句" src="1.jpg"
title="有图片时,鼠标移上去显示此句"
width="800" height="600"/>
超链接标签
主要用于网址页面的跳转或者本地的跳转
<head >
<style type="text/css">
/* css样式——标签选择器 */
a{/* 去掉超链接的下划线 */
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
<!-- 点击字体进行超链接的跳转
打开网络地址时target="_blank"表示在新窗口打开
target="_self"表示在当前窗口打开-->
<a href="test.html">test页面跳转</a> <!-- 跳转本地html地址-->
<center><font color="red">居中标签</font></center>
<!-- font标签设置字体样式
center标签是内容居中标签
-->
<a href="http://www.baidu.com" target="_blank" title="点击访问百度"><img src="timg.jpg"/>百度</a>
<!-- 点击图片进行超链接的跳转-->
<a href="#di" id="ding">顶部</a><!-- 从顶部跳转到底部,通过id跳转 -->
<div style="height: 2000px"></div><!-- 占据主体内容的假定代码 -->
<a href="#ding" id="di">底部</a><!-- 从底部跳转到顶部 -->
</body>
标题字和预留格式
<body>
<h1>标题字</h1>
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>
<pre>
for(int i = 0;i <= 10;i++){
System.out.println(i);
}
</pre>
<!--预留格式pre ：使标签内的代码格式和显示是一致的，包括换行等-->
</body>
有无序列表
<style type="text/css">
li{/*取消列表前面的样式*/
list-style-type: none;
}
</style>
<ul type="disc">
<!-- 无序列表,列表前面没有序号 ,默认是黑色圆点type="disc" /
circle空心圆点 /square实心方块/none无样式-->
<li>aa</li>
<li>bb</li>
<li>cc</li>
</ul>
<ol type="1" start="2"><!--有序列表,列表前面有序号
type="1"默认序号为1,2...等数字
type="A" 大写字母
type="a" 小写字母
type="I" 大写罗马
type="i" 小写罗马
start= "2" 默认从第二个序号开始 2,3,4,5,6
-->
<li>aa</li>
<li>bb</li>
<li>cc</li>
</ol>
<!--标题列表 -->
<dl>
<dt>北京</dt>
<dd>通州</dd>
<dt>湖北</dt>
<dd>武汉</dd>
<dd>黄冈</dd>
</dl>
表格标签
<!--border是边框
cellpadding:内边距
cellspacing:外边距
标题列表-->
<table border="1px" width="50%" height="30%" >
<tr align = "center"><!--行数据居中-->
<td >物理</td><!--列-->
<td>化学</td><!--列-->
<td>生物</td><!--列-->
</tr>
<tr align = "center"><!--行数据居中-->
<td>地理</td><!--列-->
<td>政治</td><!--列-->
<td>历史</td><!--列-->
</tr >
<tr align = "center"><!--行数据居中-->
<td>数学</td><!--列-->
<td>语文</td><!--列-->
<td>英语</td><!--列-->
</tr>
</table>
<table border="1px" width="50%" height="30%">
<th>表头：居中加粗
<tr>
<th>员工编号</th>
<th>员工姓名</th>
<th>员工薪水</th>
</tr>
</th>
<tbody align="center">表体
<tr>
<td>001</td>
<td>a</td>
<td>100</td>
</tr>
<tr>
<td>002</td>
<td>b</td>
<td>200</td>
</tr>
<tr>
<td>003</td>
<td>c</td>
<td>300</td>
</tr>
</tbody>
<tfoot align="center">表脚
<tr>
<td>表脚</td>
<td>表脚</td>
<td>表脚</td>
</tr>
</tfoot>
</table>
合并行与合并列
<table border="1px" width="50%" height="30%">
<tr align="center">
<td>1</td>
<td>2</td>
<td rowspan="2">3</td><!--向下合并1格，总共2格-->
</tr>
<tr align="center">
<td>4</td>
<td>5</td>
</tr>
<tr align="center">
<td colspan="2">7</td><!--向右合并1格，总共2格-->
<td>9</td>
</tr>
</table>
表单
将前端用户输入的数据提交给后台处理
<form>要提交的数据</form>
数据是以name=value的形式提交给后台
所以要提交数据的标签必须有name属性
用户输入的数据赋值给value属性
name值 = value值 提交后台
<form action="#" method="get" enctype="multipart/form-data">
<!-- 表单
action属性的值为表单提交的地址
method属性为提交方法 get/post
enctype="multipart/form-data"
文件上传下载必须属性
表单的编码类型必须为multipart/form-data
-->
<input type="hidden" name="id" value=""/>
<!-- 隐藏字段域
有数据需要传递但是不想客户端看见就用这个
-->
用户名:<input type="text" name="username"
size="30px" maxlength="6" placeholder="请输入用户名"/> <br/><br/>
<!-- type="text"——文本框
name属性的值为键值对的key,是必须指定的属性
文本框内容为键值对的value,用于传输数据
value属性为文本框的默认值,如value="张三"
size属性为文本框的长度
maxlength属性为文本框可输入的最大字符串个数
readonly属性表示文本框为只读,不可以输出和修改,部分情况会用到
placeholder属性为文本框默认提示信息,显示在文本框内,颜色为浅色调,输入值后提示信息消失,有value属性时无法显示
-->
密码: <input type="password" name="pass"/> <br/><br/>
<!-- type="password"——密码框
name属性的值为键值对的key,是必须指定的属性
密码框内容为键值对的value,用于传输数据
-->
性别:<input type="radio" name="sex" value="1"
checked="checked">男</input>
<input type="radio" name="sex" value="2">女</input>
<input type="radio" name="sex" value="3">保密</input>
<br/><br/>
<!-- type="radio"——单选按钮,name值必须一致
name属性的值为键值对的key,是必须指定的属性
value属性值为键值对的value,用于传输数据
checked属性为默认选中状态
-->
兴趣:<input type="checkbox" name="inter" value="游泳">游泳</input>
<input type="checkbox" name="inter" value="练字">练字</input>
<input type="checkbox" name="inter" value="爬山">爬山</input>
<input type="checkbox" name="inter" value="运动">运动</input>
<br/><br/>
<!--type="checkbox"——多选按钮,name值必须一致
name属性的值为键值对的key,是必须指定的属性
value属性值为键值对的value,用于传输数据
-->
籍贯:<select name="place">
<option selected="selected">——请选择——</option>
<option value="1">北京</option>
<option value="1">湖北</option>
<option value="2">上海</option>
</select><br/><br/>
<!-- 下拉列表
select标签的name属性值为键值对的key
option标签
value属性值为键值对的value,没有value属性就是option标签中间的值
selected属性为下拉列表的默认选中值
<select name="place" multiple>——multiple表示当前下拉列表可以多选
-->
头像:<input type="file" name="files"/><br/><br/>
<!-- 文件上传
name属性值为键值对的key
-->
自我介绍:
<textarea name="test"></textarea><br/><br/>
提交表单:<input type="submit" value="提交"/><br/><br/>
<!-- value值决定了按钮上显示的值
默认提交改按钮所在的表单，必须在form表单里才有效
-->
重置按钮:<input type="reset" value="重置"/><br/><br/>
普通按钮:<input type="button" value="普通"/><br/><br/>
<!-- 要传输的数据都是以键值对形式传递的,所以凡是要传递的数据都必须有name属性,
其值作为键值对的key,按钮不需要作为数据传输,所以不需要name属性
-->
<!-- input的属性：
type:
1.text ：文本输入框
2.password ：密码输入框
3.radio:单选按钮，name属性值必须一致，value值一般是0或1便于存储在数据库，而不是存储男，女字符;checked属性表示默认
4.checkbox:多选按钮，那么name属性值必须一致
5.submit:提交按钮，默认提交改按钮所在的表单，必须在form表单里才有效
6.reset:重置按钮
7.button:普通按钮
8.file：文件上传
9.hidden:隐藏表单
readonly属性：
只读,该文本输入框的值可以作为参数提交到后台
例如身份证号等
disabled属性：
文本框不能修改，值不能作为参数提交到服务器
select:下拉框
selected默认选中
textarea：文本域
1.cols：行
2.row：列
type="text"时：
size:文本输入框的大小
maxlength：文本输入框输入文本的最大长度
密码框也可以用
-->
</form>
label标签用于关联其它标签
label 元素不会向用户呈现任何特殊效果
<label> 标签的 for 属性值与相关联的 id 属性值相同
方式一:
<label for="username">用户名</label>
<input type="text" id="username" name="username">
方式二:
<label>男
<input type="radio" name="sex" value="1" checked="checked"/>
</label>
frameset框架
在同一个浏览器窗口中显示不止一个页面
例如上一半窗口显示百度
下一半窗口显示搜狗
<frameset cols="40%,*"><!--将列分割成40%和60%的窗口-->
<frameset rows="40%,*"><!--将40%的列按行分割成40%和60%的窗口-->
<frame src="left_top.html" name="f1"></frame>
<frame src="http://www.taobao.com"
name="f2"></frame>
</frameset>
<frame src="http://www.baidu.com" name="f3"/>
</frame>
</frameset>
页面左侧上半部为left_top.html,窗口名称为f1
left_top.html：
<a href="Dleft_down.html" target="f2">切换页面</a>
页面左侧下半部为淘宝,窗口名称为f2
页面右侧下半部为百度,窗口名称为f3
Dleft_down.html:
<a href="right.html" target="f3">string</a>
right.html:
<pre>
for(int i =0;i < 10;i++){
System.out.println(i);
}
</pre>
点击切换页面,左下的窗口被替换为Dleft_down.html的页面
点击Dleft_down.html页面的string
右侧窗口被替换为right.html
frameset标签
属性
border 框架的边框粗细
bordercolor 框架的边框颜色
frameborder 是否显示框架边框。
0 表示不显示边框，1 表示显示边框
cols纵向分割页面。
其数值表示方法有三种："30%/30/30px,* "
*表示该区域占用余下页面空间。
rows 横向分割页面。
framespacing 框架与框架间的保留的空白距离
frame标签
属性
name 框架名称,必须设置的属性
src 要显示的网页地址,必须设置的属性
scrolling 是否要显示滚动条。值为auto/ yes/ no
bordercolor 框架的边框颜色
frameborder 是否显示框架边框
0 表示不显示边框，1 表示显示边框
noresize 框架大小
marginwidth 边界与内容间的宽度
marginhight 边界与内容间的高度
width 总宽度
height 总高度
iframe标签
属性
align 对齐方式
allowTransparency 是否可为透明
其它属性与frame标签类似
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
