-
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个网页</title>
</head>
<body>
<!-- 我是注释 -->
帅哥<br>美女<br>
<!--
1、在网页上显示一张图片
2、调整图片尺寸
3、鼠标悬停在图片上 显示提醒信息
4、点击图片跳转网页
-->
<!--
1、单标签 两个标签之间没有要显示的内容使用单标签
2、双标签 两个标签之间有要显示的内容使用双标签
-->
<!--
网页引入图片使用img标签
src 是图片路径 可以是本地文件系统页可以是网络上一个URL
宽度 width
高度 height
width或者height二者调整一个 另外一个值也会等比例缩放
width和height二者同时调整 则按照调整后数值显示
title 鼠标悬停显示标题
-->
<img src="./img/1.png" alt="" height="300px" title="点击查看原网页">
<!--
a 标签
anchor 锚
href跳转网页的URL
-->
<a href="https://space.bilibili.com/480308139">李昊哲-小课</a>
<a href="https://blog.youkuaiyun.com/qq_24330181">
<img src="./img/1.png" alt="" height="300px" title="点击查看原网页">
</a>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>锚点</title>
</head>
<body>
<a href="#one">美女</a>
<a href="#two">HTML/CSS</a>
<a href="#three">数据库</a>
<a href="#four">数据分析</a>
<br>
<img id="one" src="./img/1.png" alt=""><br>
<img id="two" src="./img/2.png" alt=""><br>
<img id="three" src="./img/3.png" alt=""><br>
<img id="four" src="./img/4.png" alt=""><br>
</body>
</html>
点击锚点，可以跳转到相应的地址
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行级元素与块级元素</title>
</head>
<body>
<!--
inline 行级元素: 不独占一行 不可以设置宽高
block 块级元素: 独占一行 可以设置宽高
inline-block 行内块元素 不独占一行 可以设置宽高
-->
<img src="./img/1.png" width="300px" alt="">
<img src="./img/1.png" width="300px" alt="">
<div>
<img src="./img/1.png" width="300px" alt="">
</div>
<div>
<img src="./img/1.png" width="300px" alt="">
</div>
<span>
<img src="./img/1.png" width="300px" alt="">
</span>
<span>
<img src="./img/1.png" width="300px" alt="">
</span>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用标签</title>
</head>
<body>
<p>段落1.1<br>段落1.2</p>
<p>段落2.1<br>段落2.2</p>
<!--
颜色值color设置
1、直接使用英文的单词
2、使用十六进制 000000~FFFFFF
3、使用函数rgb(十进制,十进制,十进制) 0~255、rgba(十进制,十进制,十进制,十进制) 0~255 0~1
rgb(红,绿,蓝) rgba(红,绿,蓝,rgb(红,绿,蓝,不透明度)
-->
<!--
实体字符 转义字符
< <
> >
© ©
空格
-->
<!--
列表
有序列表 ol
无序列表 ul
列表项 li
-->
<ol>
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
</ol>
<ol type="A">
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
</ol>
<ol type="a">
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
</ol>
<ol type="I">
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
<li>列表项06</li>
<li>列表项07</li>
<li>列表项08</li>
<li>列表项09</li>
<li>列表项10</li>
</ol>
<ol type="i">
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
<li>列表项06</li>
<li>列表项07</li>
<li>列表项08</li>
<li>列表项09</li>
<li>列表项10</li>
</ol>
<ol type="1" start="5">
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
</ol>
<ul>
<li>导航01</li>
<li>导航02</li>
<li>导航03</li>
<li>导航04</li>
<li>导航05</li>
</ul>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
<dd>White cold drink</dd>
</dl>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body>
<!--
cellpadding 表格边框到内容距离 内边距
cellspacing 表格边框外区域距离 外边距
-->
<!-- <table border="1px" width="800px" height="600px" align="center"> -->
<table border="1px" align="center" cellspacing="30px" cellpadding="30px">
<thead>
<caption>大标题</caption>
<tr>
<th>标题一</th>
<th>标题二</th>
<th>标题三</th>
<th>标题四</th>
<th>标题五</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
<td>1-5</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr>
<tr>
<td>3-1</td>
<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>4-4</td>
<td>4-5</td>
</tr>
<tr>
<td>5-1</td>
<td>5-2</td>
<td>5-3</td>
<td>5-4</td>
<td>5-5</td>
</tr>
</tbody>
</table>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格练习</title>
</head>
<body>
<!-- <table border="1px" width="800px" height="600px" align="center">
colspan横跨两个表头的单元格
rowspan竖跨两个表头的单元格
-->
<table border="1px" align="center" width="600px" height="600px" cellspacing="0px" cellpadding="0px">
<tbody align="center">
<tr>
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</tbody>
</table>
</body>
</html>
html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单之GET</title>
</head>
<body>
<!--
action="服务器接收表单数据的URL"
method="请求方式" 常见的请求方式 get post
-->
<form action="" method="get">
<!--
input 表单标签
type 表单类型
name 向服务器发送数据 后端接收数据的key
value 向服务器发送数据 后端接收数据的value
id 页面内使用便于DOM操作
text 文本框
password 密码框
submit 按钮
-->
<input type="text" name="account" value="" id="account" placeholder="请输入账号" autocomplete="off">
<input type="password" name="password" value="" id="password">
<input type="submit" value="提交">
</form>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单之POST</title>
</head>
<body>
<!--
表单用于收集用户的输入信息。
表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkboxe） 等等。
post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，同于提交敏感数据，如用户名与密码等。
get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.lihaozhe.com/?page=1，这里的 page=1 就是 get 方法提交的数据。
两种最常用的 HTTP 方法是：GET 和 POST。
什么是 HTTP？
超文本传输协议（HTTP）的设计目的是保证客户机与服务器之间的通信。
HTTP 的工作方式是客户机与服务器之间的请求-应答协议。
web 浏览器是客户端，而计算机上的网络应用程序也可能作为服务器端。
举例：客户端（浏览器）向服务器提交 HTTP 请求；服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。
两种 HTTP 请求方法：GET 和 POST
在客户机和服务器之间进行请求-响应时，两种最常被用到的方法是：GET 和 POST。
GET - 从指定的资源请求数据。
有关 GET 请求的其他一些注释：
GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据
POST - 向指定的资源提交要被处理的数据
有关 POST 请求的其他一些注释：
POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求
-->
<!--
action="服务器接收表单数据的URL"
method="请求方式" 常见的请求方式 get post
-->
<form action="" method="post">
<!--
input 表单标签
type 表单类型
name 向服务器发送数据 后端接收数据的key
value 向服务器发送数据 后端接收数据的value
id 页面内使用便于DOM操作
-->
<input type="text" name="account" value="" id="account" placeholder="请输入账号" autocomplete="off">
<input type="password" name="password" value="" id="password">
<input type="submit" value="提交">
</form>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<fieldset>
<legend>常用表单</legend>
<!--  空格-->
<form action="" method="get" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<!--男女单选框-->
性别：
<label for="male">男</label>
<input type="radio" name="gender" value="1" id="male" checked>
<label for="female">女</label>
<input type="radio" name="gender" value="0" id="female">
<br>
<!--多选框-->
爱好：
<label for="swimming">游泳</label>
<input type="checkbox" name="hobby" value="swimming" id="swimming" checked>
<label for="running">跑步</label>
<input type="checkbox" name="hobby" value="running" id="running">
<label for="skiing">滑雪</label>
<input type="checkbox" name="hobby" value="skiing" id="skiing">
<br>
<!--下拉列表-->
籍贯：
<select name="hometown" id="hometown">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="jilin" selected>吉林</option>
</select>
<br>
<!--下拉列表多选框-->
水果：
<select name="fruits" id="fruits" multiple>
<option value="banana">香蕉</option>
<option value="apple">苹果</option>
<option value="pear" selected>梨</option>
</select>
<br>
<!--文本框-->
slogan
<br>
<textarea name="slogan" id="slogan" cols="30" rows="10"></textarea>
<br>
年龄：
<input type="number" name="age" id="age">
<br>
时间：
<input type="time" name="time" id="time">
<br>
周：
<input type="week" name="week" id="week">
<br>
日期：
<input type="date" name="date" id="date">
<br>
datetime-local：
<input type="datetime-local" name="datetime-local" id="datetime-local">
<br>
URL：
<input type="url" name="url" id="url">
<br>
电话：
<input type="tel" name="tel" id="tel">
<br>
邮箱：
<input type="email" name="email" id="email">
<br>
文件：
<input type="file" name="file" id="file">
<br>
预定义控件：<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<br>
0<input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output>
<br>
<input type="submit" value="提交">
</form>
</fieldset>
</body>
</html>
扫一扫
3230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
