HTML标签
标签分类
1. 双闭合标签：<html></html>
1. 单闭合标签：<meta charset="UTF-8">
head相关标签
meta：基本网站元信息标签
meta标签，不指定字符集，中文乱码
<!DOCTYPE html>
<html lang="en">
<head>
<meta>
</head>
<body>
你好
</body>
</html>
指定字符集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
你好
</body>
</html>
title：网站的标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>saiya06</title>
</head>
<body>
你好
</body>
</html>
link：链接css文件
<link rel="stylesheet" href="test.css">
test.css 是css文件名
script：链接JavaScript文件
<script src="test.js"></script>
test.js是js文件名
style：内嵌样式
<style>
body{background-color: cyan}
</style>
body相关标签
标题标签h1-h6
<body>
<h1>saiya06</h1>
<h2>saiya06</h2>
<h3>saiya06</h3>
<h4>saiya06</h4>
<h5>saiya06</h5>
<h6>saiya06</h6>
</body>
空格nbsp
<body>
<h1>sai ya06</h1>
</body>
段落标签p
<body>
<p>hello</p>
<p>saiya06</p>
</body>
超链接标签a
href属性，链接的网址
<body>
<a href="https://i.cnblogs.com/saiya6">saiya06</a>
</body>
当href属性的值为一个空链接时，表示回到页面顶部
<body>
<a href="#" target="_self">回到顶部</a>
</body>
title属性，表示鼠标悬停时显示的信息
<body>
<a href="https://i.cnblogs.com/saiya6" title="我是黄某人">siya06</a>
</body>
target属性
<body>
<a href="https://i.cnblogs.com/saiya6" target="_self">在本窗口跳转</a>
<a href="https://i.cnblogs.com/saiya6" target="_blank">新开一个窗口跳转</a>
</body>
图片标签
src属性是图片的地址
<body>
<img src="./test.jpg" alt="">
</body>
alt属性是图片链接失败时显示的文本
<body>
<img src="./test.jp" alt="这是一张图片">
</body>
width属性是图片的宽度，只指定宽度是，会对图片进行等比缩放
<body>
<img src="./test.jpg" alt="" width="100">
</body>
height属性是图片的高度，和width一起使用是，有可能会对图片继续拉伸
<body>
<img src="./test.jpg" alt="" width="100" height="300">
</body>
字体标签
<body>
<u>下划线</u>
<strong>加粗</strong>
<em>斜体</em>
<i>也是斜体</i>
</body>
列表标签
有序列表ol, 可以指定type属性值，默认是1(阿拉伯数字)、也可以是：a、A、i、I
<body>
<ol>
<li>Python</li>
<li>Java</li>
<li>HTML</li>
<li>Linux</li>
</ol>
</body>
<body>
<ol type="a">
<li>Python</li>
<li>Java</li>
<li>HTML</li>
<li>Linux</li>
</ol>
</body>
无序列表ul，可以指定type属性，默认值是实心圆点，也可以是square、circle
<body>
<ul>
<li>Python</li>
<li>Java</li>
<li>HTML</li>
<li>Linux</li>
</ul>
</body>
<body>
<ul type="circle">
<li>Python</li>
<li>Java</li>
<li>HTML</li>
<li>Linux</li>
</ul>
</body>
表格标签
border属性，指定边框厚度
<body>
<table border="1">
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
<td>sex</td>
</tr>
<tr>
<td>1</td>
<td>saiya06</td>
<td>21</td>
<td>男</td>
</tr>
</table>
</body>
cellspacing属性，指定单元格间隙
<body>
<table border="1" cellspacing="0">
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
<td>sex</td>
</tr>
<tr>
<td>1</td>
<td>saiya06</td>
<td>21</td>
<td>男</td>
</tr>
</table>
</body>
width属性指定表格宽度
<body>
<table border="1" cellspacing="0" width="30%">
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
<td>sex</td>
</tr>
<tr>
<td>1</td>
<td>saiya06</td>
<td>21</td>
<td>男</td>
</tr>
</table>
表单标签
form
<body>
<form action="" method="post"> # action指定提交的路径， method指定提交的方法
</form>
</body>
input
type="text"，表示文本输入框
<body>
<form action="" method="post">
<input type="text">
</form>
</body>
type="password"，表示密码输入框
<body>
<form action="" method="post">
<input type="password">
</form>
</body>
type="submit"，表示提交按钮，其中value是按钮显示的文本
<body>
<form action="" method="post">
<input type="submit" value="saiya06">
</form>
</body>
type="radio"，表示单选框,多个单选框设置相同的name值，可以形成互斥效果，只能选择其中一个，checked属性表示勾选的默认项
<body>
<form action="" method="post">
<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex">女
</form>
</body>
type="checkbox"，表示复选框，name和value是提交到后端服务器的key和value，checked属性表示勾选的默认项
<body>
<form action="" method="post">
<input type="checkbox" name="a" value="xietingfeng" checked="checked">谢霆锋
<input type="checkbox" name="b" value="zhoujielun">周杰伦
<input type="checkbox" name="c" value="zhangxueyou">张学友
</form>
</body>
type="datetime-local"，表示时间框
<body>
<form action="" method="post">
<input type="datetime-local">
</form>
</body>
select下拉列表
<body>
<form action="" method="post">
<select name="" id="">
<option value="0">全部</option>
<option value="1">谢霆锋</option>
<option value="2">周杰伦</option>
<option value="3">张学友</option>
</select>
</form>
</body>
使用multiple属性时，可以在下拉框中进行多选
<body>
<form action="" method="post">
<select name="" id="" multiple>
<option value="0">全部</option>
<option value="1">谢霆锋</option>
<option value="2">周杰伦</option>
<option value="3">张学友</option>
</select>
</form>
</body>
textarea多行输入框，cols表示列数，rows表示行数
<body>
<form action="" method="post">
<textarea name="" id="" cols="30" rows="10"></textarea>
</form>
</body>
div标签，称为盒子标签，独占一行
<body>
<div>saiya06</div>
</body>
span标签,不占一行
<body>
<span style="color: red;">saiya</span>06
</body>
label, 它的for属性跟表单控件中的id属性有关联
lable的for属性值是test, 当鼠标点击lable标签时，会自动聚焦到id为test的输入框中
<body>
<form action="">
<label for="test">用户名</label>
<input type="text" id="test">
</form>
</body>
浙公网安备 33010602011771号