HTML 基本骨架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
</body>
</html>
文字标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>zzh</title>
</head>
<body>
<!-- 添加注释快捷键：ctrl + / -->
<!-- 标题标签 -->
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三极标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<!-- 段落标签 -->
<p>这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签</p>
<p>可就是不覅被<br>可就是不覅被<br>可就是不覅被<br>可就是不覅被可就是不覅被可就是不覅被可就是不覅被可就是不覅被可就是不覅被可就是不覅被可就是不覅被可就是不覅被可就是不覅被可就是不覅被可就是不覅被可就是不覅被可就是不覅被可就是不覅被可就是不覅被可就是不覅被</p>
<!-- 换行标签 br（单标签） -->
<p>这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标<br><br><br><br><br><br>签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签这是一个段落标签</p>
<!-- 水平线标签 hr（单标签）
颜色属性：color=""
红色：red 黄色：yellow 粉色：pink 绿色：green 蓝色：blue 橙色：orange 紫色：purple
灰色：grey
宽度属性：width=""
高度属性：size=""
对齐方式默认是居中（center）
align="left" 左对齐
align="right" 右对齐
-->
<hr>
<hr color="red" width="530" size="10" align="left">
<hr color="red" width="530" size="10" align="right">
<hr color="blue" width="200" size="5" align="left">
</body>
</html>
链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>zzh</title>
</head>
<body>
<!-- 图片标签 img -->
<!--
src 图片所在路径
1.相对路径 图片所在的位置相对于当前html文件的位置
./ 当前目录
2.绝对路径 图片所在的真实路径
-->
<!-- 相对路径 同目录下 ./ 加文件名 （./ 可以省略） -->
<img src="./a.jpg" alt="">
<!-- 绝对路径 直接复制图片路径 加图片名称 -->
<img src="/Users/liona/Desktop/2022-08-25 20.45.09.png" alt="">
<!-- 网络路径（其他电脑上的绝对路径）直接复制图片链接 -->
<img src="https://scpic.chinaz.net/files/pic/pic9/202009/apic27858.jpg" alt="">
<!-- 相对路径 下级目录下 ./ 加下级目录名称/文件名称
-->
<img src="./images/a.jpg" alt="">
<!-- （下级目录可以存在多层目录） -->
<img src="./images/images2/a.jpg" alt="">
<!-- 上级目录 ../ 直接加文件名称 -->
<img src="../a.jpg" alt="Imaege can't be found.">
<!-- 添加另外文件夹的图片 先../ (退出)/（文件名） -->
<img src="../11/a.jpg" alt="">
<!-- alt 图片加载失败时会显示 -->
<img src="./a.jpg" alt="图片不存在">
<!-- 图片属性
宽度：width 高度：height px：像素(单位)
-->
<img src="./a.jpg" alt="" width="200px" height="300px">
<!-- a标签 跳转标签 （既可以是绝对也可以是相对，既可以是本地也可以是网络上的）
href="" 所要跳转的地址 href="#" 假链接，返回当前页面的顶部
target="" 以何种方式打开链接（默认的是target="_self" 从自身的标签页打开）
target="_blank" 从新的标签打开
-->
<a href="http://www.baidu.com">点击跳转</a>
<a href="http://www.baidu.com" target="_blank">点击跳转(new blank)</a>
<a href="http://www.baidu.com" target="_self">点击跳转(this blank)</a>
<!-- 从head标签里面写 <base target="_blank"> 全局的超链接都以新页面打开 -->
<!-- title
鼠标悬停在标签上会显示的内容（既可以给a标签添加 也可以给img标签添加）-->
<a href="http://www.baidu.com" target="_blank" title="百度">点击跳转</a>
<!-- 在代码中间添加一个<p id=123>添加文字<p> 在#后面直接加id内容 （锚点 跳转到id所在的位置）-->
111<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="123">添加文字</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#123" target="" title="跳转到文字">点击跳转</a>
<!-- -->
</body>
</html>
分区标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>zzh</title>
</head>
<body>
<!-- div标签
独立成行
本身没有什么意义 可以在里面嵌套其他标签
可以用css设置属性 宽度 width=" px";高度 height=" px" 背景颜色 background-color=" " 文字大小 font-size=" px"
在行内设置div的样式 <div style="width:200px;height:300px;background-color:red;font-size:30px"> <div>(没有=)
-->
<div style="width: 200px;height: 300px;background-color: red;font-size: 30px;">
<a href="">11</a>
<a href="">12</a>
<a href="">13</a>
<a href="">14</a>
<a href="">15</a>
</div>
<div>
<a href="">11</a>
<a href="">12</a>
<a href="">13</a>
<a href="">14</a>
<a href="">15</a>
<!-- span标签
span标签里面标记什么属性 被span标签选中的代码的什么属性就不会跟随p标签改变而改变 没被span标签标记的属性就会随着p标签属性的改变而改变
没有实际意义,一般用来标记特殊文本
-->
<p>11111111111111111111111<span style="color: red;">222</span>11111111111111111</p>
</div>
</body>
</html>
列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>zzh</title>
</head>
<body>
<!--
无序列表
有序列表
自定义列表
-->
<!-- 无序列表 标签是<ul></ul> ,<ul></ul>里面只能嵌套多个 <li></li> (一个 <li></li> 代表一条)
type 列表样式 默认的是disc(实心原点)
none(无样式)
circle(空心原点)
square(方形原点)
-->
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
ol>li*6>a[href='#']
<ul>
<li><a href="#">W</a></li>
<li><a href="#">W</a></li>
<li><a href="#">W</a></li>
<li><a href="#">W</a></li>
<li><a href="#">W</a></li>
<li><a href="#">W</a></li>
</ul>
<!-- 有序列表 标签是<ol></ol> 里面只能嵌套<li></li> (一个 <li></li> 代表一条)
type 列表样式 默认是的是:1 阿拉伯数字
I 罗马数字
i 罗马数字小写
a 小写字母(abcd)
A 大写字母(ABCD)
-->
<ol>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ol>
ol>li*7>a[href='#']
<ol>
<li>
<p class="content"><a href="#">S</a></p>
</li>
<li>
<p class="content"><a href="#">S</a></p>
</li>
<li>
<p class="content"><a href="#">S</a></p>
</li>
<li>
<p class="content"><a href="#">S</a></p>
</li>
<li>
<p class="content"><a href="#">S</a></p>
</li>
<li>
<p class="content"><a href="#">S</a></p>
</li>
<li>
<p class="content"><a href="#">S</a></p>
</li>
</ol>
<!-- 自定义列表 标签是<dt></dt> 里面前套的是<dt></dt>;<dd></dd>
<dl>
<dt> </dt>
<dd> </dd>
<dd> </dd>
<dd> </dd>
<dd> </dd>
<dt> </dt>
<dt> </dt>
<dt> </dt>
</dl>
-->
</body>
</html>
表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>zzh</title>
</head>
<body>
<!-- table 表格
thead 表格首行
tfood 表格尾行
tbody 表格主题
tr 行
td 列
边框属性 border
对齐方式 align
边框颜色 bordercolor
外框边距 cellspacing(默认值是2px)
内框边距 cellpadding(默认值是1px)
tr
align(水平方向):默认是左对齐:left;右对齐:right;居中:center
valign(垂直方向):默认是居中:middle;顶端对齐:top;底端对齐:bottom
caption 表格标题标签 写在<tbody></tbody>里的第一行
td
宽度属性：width="";高度属性：height=""；bgcolor=""
colspan(column列) 跨列
rowspan（row 行） 跨行
-->
<table border="5" align="center" bordercolor="red" cellspacing="0px" cellpadding="10px">
<thead align="center">
<td>a</td>
<td>b</td>
<td>c</td>
</thead>
<tbody>
<tr align="center">
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>44</td>
<td>55</td>
<td>66</td>
</tr>
<tr>
<td>77</td>
<td>88</td>
<td>99</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<td>111</td>
<td>222</td>
<td>333</td>
</tfoot>
</table>
</body>
</html>
表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>zzh</title>
</head>
<body>
<!--
表单标签 <form></form>
form用来收集用户信息，传给其他页面进行处理
action 要传的页面
input
不一定写在form里面，可以写在任何地方
-->
<form action="07_服务器接收数据.html">
<!-- type="text" (默认值，输入框) -->
请输入用户名：<input type="text" name="username"><br>
<!-- type="password"(密码) -->
请输入密码：<input type="password" name="password"><br>
<!-- type="radio"(单选框) -->
<!-- name值相同 实现单选 -->
<!-- checked 默认选中的一个 -->
<!-- value 提交表单时实际传递的值（反馈给后端的值） -->
<input type="radio" name="诗人" value="李白" checked>李白
<input type="radio" name="诗人" value="杜甫">杜甫
<input type="radio" name="诗人" value="王维">王维
<input type="radio" name="诗人" value="王安石">王安石<br>
<!-- type="checkbox"(复选框) 也可以用checked首选第一个-->
<input type="checkbox" name="诗人多选" value="李白">李白
<input type="checkbox" name="诗人多选" value="杜甫">杜甫
<input type="checkbox" name="诗人多选" value="王维">王维
<input type="checkbox" name="诗人多选" value="王安石">王安石<br>
<!-- submit 相当于提交按钮 -->
<input type="submit">
<!-- redet 重置按钮 -->
<input type="reset">
<!-- button 一个按钮 此时value的值是button的名称 -->
<input type="button" value="保存"><br>
<!--
label标签 用来和input标签进行关联
-->
<label for="username1">请输入用户名</label>
<input type="text" id="username1"><br>
<label for="username2">请输入密码</label>
<input type="text" id="username2"><br>
<!--
select标签 下拉框
optgroup 选项分组
option 选项
-->
<select name="" id="">
<option value="1">a</option>
<option value="2">b</option>
</select>
<select>
<optgroup label="性别">
<option value="1">男</option>
<option value="2">女</option>
</optgroup>
<optgroup label="身材">
<option value="1">胖</option>
<option value="2">瘦</option>
</optgroup>
</select><br>
<!-- textareacols 文本域标签 相当于input type="text"标签
cols 宽度 rows 高度
文本框里的文本可以自动换行
-->
<textarea name="" cols="20" rows="50"></textarea><br>
<!-- image 将图片作为按钮提交 -->
<input type="image" src="a.jpg"><br>
<!-- file 上传文件 -->
<input type="file">
<!-- hidden 隐藏字段 -->
<input type="hidden" value="你被骗了">
</form>
</body>
</html>
服务器接收数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>服务器接收数据</title>
</head>
<body>
服务器接收数据
</body>
<script type="text/javascript">
var params = decodeURI(location.search).split('?')
if (params.length > 1) {
params = params[1].split('&')
var info = ''
for (var i = 0; i < params.length; i++) {
var item = params[i].split('=')
info += `${item[0]} 的值是: ${item[1] ? item[1] : '--' } ;\n`
}
if (info) {
info = '服务器接收到的数据: \n' + info
alert(info)
}
}
</script>
</html>
实体字符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>zzh</title>
</head>
<body>
<!--
空格  ；
大于号 >；
小于号 <；
版权符号 ©；
-->
<p>aaaaaaaa aaaaaaaaaaaaaa<br>><©</p>
</body>
</html>
