HTML简介：
HTML（超文本标记语言）是⽤于创建⽹⻚的语⾔，是⽹⻚内容的载体，内容就是⽹⻚制作者放在⻚⾯上想要让⽤户浏览的信息，可以包含⽂字、图⽚、视频等。我们通过使⽤HTML标记标签创建html⽂档来创建⽹⻚。
HTML标签是由尖括号括起来的词，如 <html>，<head> 、<body> 。标签通常成对出现，例如 <html> 和 </html> 。⼀对中的第⼀个标签是开始标签，第⼆个标签是结束标签。在上⾯的示例中，<html> 是开始标签，⽽</html>是结束标签。我们还可以将开始标签称为起始标签，结束标签称为闭合标签。
1. 文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html的文本标签</title>
</head>
<body>
<!--
1. 标题标签：h1~h6，标题由大到小
-->
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<!--
2. 段落标签：p
-->
<p>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</p>
<p>
呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
</p>
<!--
3. 大引用：q
-->
<q>您好</q>
<!--
4. 段落缩进（小引用）：blockquote
-->
<blockquote>解释说明</blockquote>
<!--
5. 滚动标签：marquee
属性：behavior指定滚动方式
属性值：alternate：来回滚动 scroll：交替滚动 slide：默认滚动到某一边停止
属性：scrollamount指定滚动速度
属性值：数字
属性：direction指定滚动方向（默认向左滚动）
属性值：up/down/right/left
属性：gbcolor指定html标签的背景颜色
background-color指定css样式的背景颜色
-->
<marquee behavior="slide" bgcolor="blue" direction="right">谢谢您！</marquee>
<!--
6. 原样输出标签：pre
-->
<pre>
静夜思
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
</pre>
<!--
7. 分隔线标签：hr
-->
<hr />
<!--
8. 换行标签：br
9. 上下标标签：sup和sub
-->
数学公式：x<sup>2</sup><br />
化学元素：H<sub>2</sub>O<br />
<!--
10. 块标签：div 占一行空间，会自动换行
-->
<div>hello</div><div>world</div>
<!--
11. 行内标签：span
-->
<span>HELLO</span>
<span>WORLD</span><br />
<!--
12. 无序列表
<ul type=" ">
<li>列表项<li>
</ul>
-->
您喜欢的运动：
<ul type="circle">
<li>篮球</li>
<li>足球</li>
<li>乒乓球</li>
</ul>
<hr />
<!--
13. 有序列表
<ol>
<li>列表项<li>
</ol>
-->
您喜欢的运动：
<ol type="A">
<li>篮球</li>
<li>足球</li>
<li>乒乓球</li>
</ol>
<!--
14.加粗：b/strong
-->
<b>hhhhh</b><br />
<strong>bbbbbbbb</strong><br />
<!--
15. 斜体：i/em
-->
<i>hhhhh</i><br />
<em>bbbbbbb</em><br />
</body>
</html>
2. 超链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接标签（a标签）</title>
<!--
超链接两个作用：
1）链接资源文件或资源地址
2）作为锚链接来使用
同一个页面：
a）打锚点（做一个跳转标记）
<a name="锚点名称"></a>
b）创建一个跳转链接
<a href="#锚点名称">跳转</a>
不同页面：
a）打锚点（做一个跳转标记）
<a name="锚点名称"></a>
b）创建一个跳转链接
<a href="链接到资源文件或地址#锚点名称">跳转</a>
-->
</head>
<body>
<!--2. 创建跳转链接-->
<a href="#foot">跳转底部</a><br />
<!--1. 打锚点-->
<a name="top"></a>
<!--
1. 属性：href 链接的资源文件地址/url
-->
<a href="html文本标签.html">html文本标签</a><br />
<!--
2. 属性：target 打开资源文件的一种方式
_self：在当前窗口打开（默认）
_blank：新建一个窗口打开
-->
<a href="html快速入门.html" target="_blank">html快速入门</a><br />
<a href="http://www.baidu.com">百度</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<!--1. 打锚点-->
<a name="foot"></a>
XXX公司2019-2050©<br />
<!--2. 创建跳转链接-->
<a href="#top">跳转顶部</a>
</body>
</html>
3. 图像标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图像标签（img标签）</title>
</head>
<body>
<!--
1. 属性：src 链接当前文件的url地址
2. 属性：width/height 指定像素或百分比
3. 属性：alt 图片失效时起作用
4. 属性：title 当鼠标悬浮图片的时候出现的文字描述
-->
<img src="img/1-161104143944.gif" width="500px" height="300px" title="恶搞"/>
</body>
</html>
4. 表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格标签（table标签）</title>
<style>
tr {
/*CSS样式:文本居中*/
text-align: center;
}
</style>
</head>
<body>
<!--
标题：caption
行标签：tr
单元格（列）：td
表头：th 自动加粗，并且居中
属性：边框border
宽度和高度width/height
背景色bgColor
对齐方式align
cellspacing单元格边沿和边框中间的空间
cellpading单元格和单元格之间的空间
-->
<!--四行三列-->
<table border="1px" width="400px" height="300px" align="center"
cellspacing="0" cellpadding="5">
<caption>通讯录</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>西安</td>
</tr>
<tr>
<td>李四</td>
<td>18</td>
<td>咸阳</td>
</tr>
<tr>
<td>王五</td>
<td>22</td>
<td>汉中</td>
</tr>
<!--
单元格合并属性：
合并行：rowspan
合并列：colspan
-->
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr>
<td rowspan="2">张三</td>
<td rowspan="2">20</td>
<td>西安</td>
</tr>
<tr>
<td>咸阳</td>
</tr>
<tr>
<td>王五</td>
<td colspan="2">22</td>
</tr>
</table>
</body>
</html>
5. 表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签（form标签）</title>
<!--
属性：action 提交服务器的后台地址url
method 提交方式
属性值：get/post
get方式：
1. 不适合敏感数据（密码），会将提交数据发送地址栏的url上
xxx.html?key1=value1&key2=value2
2. 提交数据大小是有限的
post方式：
1. 适合敏感数据，提交的数据不会显示在地址栏上，在当前请求信息：实体内容
实体内容
username=lisi&password=123456
关于密码加密：
MD5/springSecurity：spring的安全框架
MD5加密后一样的，springSecurity加密后的字符串不一样
2. 提交大小无限制
onsubmit：事件表示表单提交是否成功
属性值：true/false
**表单中必填属性：name 给系统后台进行标记值
-->
<!--
具体表单项：
文本输入框：input type="text"
密码输入框：input type="password"
单选按钮：input type="radio"
复选框：input type="checkbox"
下拉菜单：select
option
上传文件：input type="file"
隐藏域：input type="hidden"
日期组件(h5组件)：input type="date"
文本域：textarea
rows：行数
cols：一行的字符数
按钮相关的：
input type ="submit" 提交按钮
input type ="reset" 重置按钮
input type ="button" 普通按钮
-->
</head>
<body>
<form action="#" method="post">
<!--placeholder：h5新特性，指定input默认值-->
用户名：<input type="text" name="username" placeholder="请输入用户名" /><br />
密 码：<input type="password" name="pwd" /><br />
性 别：
<input type="radio" value="男" name="gender" />男
<input type="radio" value="女" name="gender" />女<br />
爱 好：
<input type="checkbox" name="hobit" value="篮球" checked="checked" />篮球
<input type="checkbox" name="hobit" value="足球" />足球
<input type="checkbox" name="hobit" value="乒乓球" />乒乓球
<input type="checkbox" name="hobit" value="羽毛球" />羽毛球<br />
籍 贯：
<select name="address">
<option value="请选择">请选择</option>
<option value="陕西省">陕西省</option>
<option value="山西省">山西省</option>
<option value="甘肃省">请选择</option><br />
</select>
出生日期：<input type="date" name="date" /><br />
联系电话：<input type="tel" name="phone" /><br />
上传文件：<input type="file" name="photo" /><br />
自我描述：<textarea rows="5" cols="20"></textarea><br />
<input type="submit" value="注册" />
<input type="reset" value="重置" />
<input type="button" value="点我试试" />
</form>
</body>
</html>
6. 框架标签
- logo部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>logo部分</title>
</head>
<body>
<!--居中显示-->
<center><h2>xxx学校学生管理系统</h2></center>
</body>
</html>
- 左边菜单部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左边菜单部分</title>
</head>
<body>
<ul>
<!--和框架标签整合使用
target:指定frame中的name属性值,表示在当前frame中打开
假设链接到如下地址
-->
<li><a href="html快速入门.html" target="main">学生管理</a></li>
<li><a href="http://www.baidu.com">选课管理</a></li>
<li><a href="表格标签（table）.html">教务管理</a></li>
</ul>
</body>
</html>
- 主页面部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主页面部分</title>
</head>
<body>
<h3>xxx,欢迎访问学生管理系统</h3>
</body>
</html>
- 页脚部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页脚部分</title>
</head>
<body>
<center>xxx学校©2019~2050</center>
</body>
</html>
- 整个frame标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架标签（frame标签）</title>
<!--
一个frame中包含一个html页面
当有两个或两个以上的html页面组成，称为框架集 frameset
-->
</head>
<body>
<frameset rows="20%, *, 10">
<frame src="logo.html" />
<frameset cols="15%, *">
<frame src="menu.html" />
<frame src="main.html" name="main" />
</frameset>
<frame src="foot.html" />
</frameset>
</body>
</html>
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
