一、HTML简介
Hyper Text Markup Language（超文本标记语言） 简写：HTML
HTML通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，
通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）
二、创建HTML文件
三、HTML的书写规范
<!DOCTYPE html><!--约束，声明-->
<html lang="zh_CN"><!-- html标签，表示html的开始 lang="zh_CN"表示中文 -->
<!-- HTML标签一般分为两部分，分别是head和body -->
<head><!-- 表示头部信息，一般包含三部分内容，title标题，css样式，js代码 -->
<meta charset="UTF-8"><!-- 表示当前页面使用UTF-8字符集 -->
<title>标题</title><!-- 表示标题 -->
</head>
<body><!-- body标签是整个html页面显示的主体内容 -->
hello
</body>
</html>
四、HTML标签介绍
五、常用标签
font字体标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font标签</title>
</head>
<body>
<font color="red" face="黑体" size="5">我是字体标签</font>
<!-- font标签是字体标签，它可以用来修改文本的字体，颜色，大小（尺寸）-->
<!-- color属性修改颜色-->
<!-- face属性修改字体-->
<!-- size属性修改文本大小-->
</body>
</html>
特殊字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特殊字符</title>
</head>
<body>
我是<br>标签<br/>
空 格
<!--
特殊字符
需求1：把＜br＞换行标签 变成文本 转换成字符显示在页面上
常用的特殊字符：
< === <
> === >
空格 ===
-->
</body>
</html>
标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<!--
h1-h6 都是标题标签
h1 最大
h6 最小
align 属性是对齐属性
Left 左对齐（默认）
center 剧中
right 右对齐
-->
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>
超链接
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!-- a标签是超链接
href属性设置连接的地址
target属性设置哪个目标进行跳转
self 表示当前页面
blank 表示打开新页面来进行跳转
-->
<a href="https://www.baidu.com/" >百度</a><br/>
<a href="https://www.baidu.com/" target="_self">百度_self</a><br/>
<a href="https://www.baidu.com/" target="_blank">百度_blank</a><br/>
</body>
</html>
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!--
ul是无序列表
type属性可以修改列表项前面的符号
ol有序列表
-->
<ul type="none">
<li>张三</li>
<li>李四</li>
<li>老六</li>
<li>铁蛋</li>
</ul>
<ol>
<li>张三</li>
<li>李四</li>
<li>老六</li>
<li>铁蛋</li>
</ol>
</body>
</html>
img标签
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>img标签</title>
</head>
<body>
<!--
img标签是图片标签，用来显示图片
src属性可以设置图片的路径
width属性设置图片的宽度
height属性设置图片的高度
border属性设置图片边框大小
alt属性设置当指定路找不到图片时，用来代替显示的文本内容
在JavasE中路也分为相对路和绝对路径
相对路控：从工程名开始算
绝对路径：盘:/目录/文件名
在web中路经分为相对路径和绝对路径两
相对路径：
. 表示当前文件所在的目录
.. 表示前文件所在的上一级目录
文件名 表示当前文件所在目录的文件，相当于./文件名 ./可以省路
绝对路径：
正确格式是：http/ip：port/工程名/资源路径
错误格式是：盘符: /目录/文件名
-->
<img src="img/mao.jpg" width="500" height="500" border="2" alt="图片不存在"/>
<img src="img/mao.jpg" width="500" height="500" border="2"/>
</body>
</html>
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!--
table标签是表格标签
border设置表格标签
width设置表格宽度
height设置表格高度
a1ign设置表格相对于页面的对齐方式
cel1spacing 设置单元格间距
tr 是行标签
th 是表头标签
td 是单元格标签
align设置单元格文本对齐方式
b是加粗标签
-->
<table border="1" width="500" height="500" align="center" cellspacing="0">
<tr>
<th>1.1</td>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
</body>
</html>
跨行跨列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨行跨列表格</title>
</head>
<body>
<!--
colspan 属性设置跨行
rowspan 属性设置跨列
-->
<table border="1" width="500" height="500" align="center" cellspacing="0">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td colspan="2" rowspan="2">4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
</body>
</html>
iframe框架标签(内嵌窗口)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe框架标签</title>
</head>
<body>
<!--
iframe标签可以在页面上开一个小区域显示一个单独的页面
iframe和a标签组合使用的步骤：
1.在iframe标签中信用name属性定义一个名称
2.在a标签的target属性上设置iframe的name的属性值
-->
我是一个单独的完整的页面<br />
<iframe src="表格标签.html" width="200" height="200" name="abc"></iframe><br/>
<ul>
<li><a href="font标签.html" target="abc">font标签.html</a></li>
</ul>
</body>
</html>
表单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--
form标签就是表单
action 属性设置提交的服务器地址
method 属性设置提交的方式 GET(默认)或POST
表单提交的时候，数据没有发送给服务器的三种情况
1、表单项没有name属性值
2、单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3、表单项不在提交的form标签中.
GET请求的特点是：
1、浏览器地址栏中的地址是：action属性[+?+请求参数 请求参数的格式是：name=value&name=value
2、不安全
3、它有数据长度的限制
POST请求的特点是：
1、浏览器地址栏中只有action属性值
2、相对于GET请求要安全
3、理论上没有数据长度的限制
input type=text 是文件输入框 Value设置默认显示内容
input type=password 是密码输入框value设置默认显示内容
input type=radio 是单选框 name属性可以对其进行分组 checked=checked表示默认选中
input type=checkbox 是复选框 checked=checked表示默认选中
input type=reset 是重置按钮 value性修改钮上的文本
input type=submit 是提交按钮 value性修改钮上的文本
input type=button 是接钮 value属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）
select 标签是下拉列表框
option 标签是下拉列表框中的选项 selected="selected设置默认选中
textarea 表示多行文本输入框（起始标签和结束标签中的内容是默认值）
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度
-->
<form action="https://www.baidu.com/" method="get">
<input type="hidden" name="action" value="login"/>
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td> 用户名称：</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td> 用户密码：</td>
<td> <input type="password" name="password" /></td>
</tr>
<tr>
<td> 确认密码：</td>
<td> <input type="password" name="password" /></td>
</tr>
<tr>
<td> 性别：</td>
<td>
男<input type="radio" name="sex"/>
女<input type="radio" name="sex"/>
</td>
</tr>
<tr>
<td> 兴趣爱好：</td>
<td>
音乐<input type="checkbox" name="hobby" />
编程<input type="checkbox" name="hobby" />
</td>
</tr>
<tr>
<td> 国籍：</td>
<td>
<select name="country">
<option>--请选择国籍--</option>
<option>china</option>
<option>us</option>
</select>
</td>
</tr>
<tr>
<td> 自我评价：</td>
<td> <textarea rows="10" cols="20" name="desc" ></textarea></td>
</tr>
<tr>
<td> <input type="reset" /></td>
<td> <input type="submit" /></td>
</tr>
</table>
<input type="file" align="center" />
</form>
</body>
</html>
其他标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他标签</title>
</head>
<body>
<!--
div标签 默认独占一行
span标签 它的长度是封数据的长度
p段落标签 默认会在落的上方或下方各空出一行来（如果已有就不再空）
-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
<p>p段落标签1</p>
<p>p段落标签2</p>
</body>
</html>
1164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
