HTML
1.HTML是什么？
超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
网页文件的扩展名：.html或.htm
2.最基本的HTML文档：
<!--声明：告诉浏览器使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--标签是成对出现-->
<!--头部标签-->
<head>
<meta charset="UTF-8">
<!--网页标题-->
<title>Title</title>
</head>
<!--网页主体-->
<body>
Hello，World！
</body>
</html>
<!DOCTYPE html>声明为HTML5文档。
<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
<title>、</title>定义了网页标题，在浏览器标题栏显示。
<body>、</body>之间的文本是可见的网页主体内容。
HTML标签是由尖括号包围的关键字，如<html>, <div>等
HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
标签里面可以有若干属性，也可以不带属性。
3.网页的基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--标题标签-->
<!--h1最大 h6最小-->
<h1>1级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3>
<h4>4级标签</h4>
<h5>5级标签</h5>
<h6>6级标签</h6>
<!--段落标签-->
<p>两只老虎，两只老虎</p>
<p>跑得快，跑得快</p>
<!--换行标签-->
<!--br:单标签-->
一只没有耳朵，一直没有尾巴<br/>
<!--水平线标签-->
<!--hr：水平线标签-->
<hr/>真奇怪，真奇怪
<!--字体加粗，斜体-->
I love you three thousands times
<strong>I love you three thousands times</strong>
<em>I love you three thousands times</em>
<!--特殊符号-->
<p>大于号：></p>
<p>小于号：<</p>
<p>空格：你 好</p>
<p>引号："</p>
<p>版权符号：©版权所有</p>
</body>
</html>
4.图像标签
常见的图像格式：
jpg
png
bmp 位图
gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--图像标签-->
<!--src=图片的路径 必填
title=图片的名字
alt=鼠标悬停显示
width=宽
height=高-->
<!--相对路径：上一级路径表示方式 ../
绝对路径：不推荐使用-->
<img src="../resources/images/xingye.jpg" alt="你想要真实的活着吗？" title="主神" width="300px" height="300px">
</body>
</html>
5.链接标签
链接有超链接、锚链接、图像超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--a:表示超链接
href：表示链接的地址（必填）
-->
<a href="1.第一网页.html">点击跳转</a>
<!--锚链接-->
<!--可以从一个地方跳到锚指定的地方
需要的东西：标记 ..跳转-->
<!--创建一个标记-->
<a name="mark">锚链接</a>
<!--图像链接-->
<a href="1.第一网页.html"><img src="../resources/images/xingye.jpg" alt=""></a>
<a href="#mark">跳转</a>
</body>
</html>
6.列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--无序列表-->
<!--<ul> 无序列表
<li> 选项-->
<ul>
<li>java</li>
<li>python</li>
<li>c</li>
</ul>
<!--有序列表-->
<ol>
<li>java</li>
<li>python</li>
<li>c</li>
</ol>
<!--自定义标签
<dl> 自定义列表
<dt>列表标题
<dd> 列表选项-->
<dl>
<dt>java</dt>
<dd>oop</dd>
<dd>ANNNOTATION</dd>
<dd>reflection</dd>
</dl>
</body>
</html>
7.表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
table:表格
tr:行
td：列-->
<table border="3px">
<tr>
<!--colspan:跨列-->
<td colspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<!--rowspan:跨行-->
<td rowspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<!--colspan:跨列-->
<td colspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
</table>
</body>
</html>
8.视频/音频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--controls :给视频增加播放的按钮
autoplay:自动播放
-->
<video src="../resources/videos/阿甘正传.mp4" controls width="400px" height="400px"></video>
<!--audio音频标签
controls
autoplay
-->
</body>
</html>
9.表单元素
基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
有以下元素：
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | <input type=“password” /> |
| date | 日期输入框 | <input type=“date” /> |
| checkbox | 复选框 | <input type=“checkbox” checked=“checked” /> |
| radio | 单选框 | <input type=“radio” /> |
| submit | 提交按钮 | <input type=“submit” value=“提交” /> |
| reset | 重置按钮 | <input type=“reset” value=“重置” /> |
| button | 普通按钮 | <input type=“button” value=“普通按钮” /> |
| hidden | 隐藏输入框 | <input type=“hidden” /> |
| file | 文本选择框 | <input type=“file” /> |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--form为表单元素-->
<!--action：提交地址
method：提交方式：post/get
-->
<!--post：安全，效率低 能提交无限大的文件
get：不安全，效率高 一次请求的文件量特别小
温馨提示：网页中一般用post-->
<form action="1.第一网页.html" method="get" >
<!--文本框
input--》text
name--》可以重复
id---》不能重复，保证全代码唯一
disabled：禁用文本框-->
<p>用户名：<input type="text" name="username"></p>
<p>密码：<input type="password" name="password"></p>
<p>确认密码：<input type="password" name="password"></p>
<!--提交按钮 input type=password-->
<!--提交会产生事件，会将提交的内容提交到action请求的地址，方法位method指定的方法-->
<!--submit默认文字为提交 。手动给按钮赋值是value-->
<!--<p><input type="submit" name="button" value="提交"></p>-->
<!--重填按钮reset-->
<!--<p><input type="reset" name="button" value="重写"></p>-->
<p>
<!--按钮-->
<input type="button">
</p>
<p>
<!--文件域-->
<input type="file">
</p>
<p>
性别
<!--radio单选框-->
<!--name:绑定同一个组-->
<!--注意事项：
1.若是要提交，必须要有name和value属性
2.name就是key提交的键，value就是提交的信息
-->
<input type="radio" value="男" name="group1">男
<input type="radio" value="女" name="group1">女
</p>
<p>
爱好
<!--checkbox多选框-->
<input type="checkbox" value="movie" name="hobby">看电影
<input type="checkbox" value="music" name="hobby">听歌
<input type="checkbox" value="walk" name="hobby">散步
<input type="checkbox" value="look" name="hobby">看风景
</p>
<p><input type="submit" name="button" value="提交"></p>
<!--重填按钮reset-->
<p><input type="reset" name="button" value="重写"></p>
<!--下拉框-->
<!--select选中-->
<select name="列表名称" id="">
<option value="选择的值1">一</option>
<option value="选择的值2">二</option>
<option value="选择的值3" selected>三</option>
</select>
<select name="列表名称" id="">
<option value="选择的值1">一</option>
<option value="选择的值2">二</option>
<option value="选择的值3" selected>三</option>
</select>
<select name="列表名称" id="">
<option value="选择的值1">一</option>
<option value="选择的值2">二</option>
<option value="选择的值3" selected>三</option>
</select>
<p>
<!--图片按钮-->
<input type="image" src="../resources/images/xingye.jpg">
</p>
<p>
<!--文本域
多行的文本框-->
<textarea name="textarea" cols="30" rows="10">
文本内容
</textarea>
</p>
<p>
<!--邮箱表单检测-->
邮箱：<input type="email" name="email"><br/>
<!--url简单验证-->
url: <input type="url" name="url"><br/>
<!--数字简单验证-->
数字：<input type="number"><br/>
<!--滑块,值的范围是0到100-->
<input type="range" name="range">
<!--搜索框-->
<input type="search" name="search">
</p>
</form>
</body>
</html>
为什么要表单验证
降低服务器压力
保证数据的安全性
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
