HTML是一种超文本标记语言,不是编程语言
- HTML标签是由尖括号包围的关键字
- HTML标签通常成双出现
1、常用标签
- 块级标签:d div ul ol li dl dt dd h1-h6
- 单独一行,对高度和宽度可以设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<h1>列表标签</h1>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<h3>自定义列表</h3>
<dl>
<dt>湖南省</dt>
<dd>长沙</dd>
<dd>衡阳</dd>
<dd>武汉</dd>
<dt>辽宁省</dt>
<dd>沈阳</dd>
<dd>营口</dd>
<dd>锦州</dd>
</dl>
</body>
</html>
- 行内标签:a span em strong b i u br
多个标签可以在一行,不能设置行内标签的高度宽度,主要靠内容支撑
- 行内块标签:img input textarea
可以和其他元素在一起,可以设置宽高
- 行内标签和块级标签可以相互转化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
<style>
b{
width: 80px;
height: 40px;
border: 2px solid greenyellow;
display: block;
}
div{
width: 80px;
height: 80px;
border: 1px solid red;
display: inline;
}
</style>
</head>
<body>
<b>行内标签转块级标签</b>
<div>块级标签转行内标签</div>
</body>
</html>
2、链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接</title>
<style>
span{
color: hotpink;
font-size: 50;
background-color: greenyellow;
}
</style>
</head>
<body>
<a href="http://www.baidu.com"
title="跳转到百度"
target="_blank">点击我可以跳转到百度</a>
<img src="鞠婧祎.jpg" alt="图片不存在"
title="我是鞠婧祎"
width="300" height="500">
<h1>我喜欢<span>唱,跳,rap</span>篮球</h1>
</body>
</html>
3、特殊符号
&emsp 全角 占用一个中文
  半角 占用一个字节
<body>
< > <br>
< > <br>
用户名: <br>
密 码:
运行 结果
4、表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<style>
td,th{
border: 3px solid hotpink;
width: 50px;
text-align: center; /* 居中显示 */
line-height: 20px; /* 设置行高 */
}
</style>
<body>
<table style="border-collapse: collapse;" id="a" >
<caption>border边框</caption>
<tbody id="b">
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
- 程序结果
5、表单
表单控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="" method="get" enctype="multipart/form-data">
<p>用户名: <input type="text" name="user"></p>
<p>密 码: <input type="password" name="passwd"></p>
<p>性 别:
<!--单选框-->
<input type="radio" name="sex" value="man" checked>男
<input type="radio" name="sex" value="woman">女
<input type="radio" name="sex" value="secret">保密
</p>
<p>爱 好:
<!--多选框-->
<input type="checkbox" name="hobby" value="sing">唱歌
<input type="checkbox" name="hobby" value="dance">跳舞
<input type="checkbox" name="hobby" value="basketball">篮球
</p>
<!--实现弹窗-->
<p>上传文件: <input type="file"></p>
<!--下拉框-->
<p>地址:
<select name="addr" id="">
<optgroup label="辽宁省">
<option value="yk">营口</option>
<option value="sy">沈阳</option>
</optgroup>
<optgroup label="湖南省">
<option value="cs">长沙</option>
<option value="hy">衡阳</option>
</optgroup>
</select>
</p>
<!--文本域-->
<fieldset>
<legend>个人简介: </legend>
<textarea name="profile" id="" cols="30" rows="5"></textarea>
</fieldset>
<p><input type="submit" value="提交">
<input type="reset" value="重置"></p>
</form>
</body>
</html>
- 结果演示