一、HTML基础语法
---> 单标签、双标签、块级元素、行内元素
单双标签其实就是HTML文档中标签书写的格式，页面中最常见的是双标签；
单标签就是只有一个标签，也就是一个空元素：meta、img、hr、br
双标签有开始标签和结束标签
块级元素：独占一行，对宽高的属性值生效，如果不给宽度，块级元素就默认浏览器的宽度，（即就是100%宽）
例如：div p ul h1~h6 .....
行内元素：对宽高属性值不生效，完全靠内容撑开宽高，可以跟其他标签存在一行
例如：span b strong em a img input ......
行内块元素：结合行内和块级元素的特点，不仅对宽高的属性值生效，还可以跟多个 标签存在一行
例如：input img
二、HTML中常用标签 ---> 文档头部
<!DOCTYPE html>
<!-- 申明，这行以下的文档都是html文档 -->
<html lang="en">
<head>
<!-- 设置字符集编码 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 定义网页头部 -->
<title>Document</title>
<!-- link标签引入外部文件 rel定义文档与被链接文档的关系 shortcut icon:链接图片 type规定链接文档的类型 image/x-icon 图片类型 -->
<link rel="shortcut icon" type="image/x-icon" href="">
<!-- link标签引入外部文件 rel定义文档与被链接文档的关系 stylesheet:层叠样式表 type规定链接文档的类型 text/css CSS样式表 -->
<link rel="stylesheet" type="text/css" href="">
</head>
<body>
</body>
</html>三、HTML中常用标签 ---> 文本标签级属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 块级元素，段落标签 text-indent:段落缩进 1个em就是1个字体的长度; -->
<!-- font-size:字体大小设置 1px一个像素点大小;color:字体颜色;font-weight:bold 字体加粗;font-family:字体类型 -->
<p style="text-indent: 2em;font-size:15px;color: red;font-weight: bold;font-family: monospace;"></p>
<!-- ************ -->
<!-- 行内元素标签 -->
<!-- 斜体标签1 -->
<em></em>
<!-- 斜体标签2 -->
<i></i>
<!-- 删除线标签 -->
<del></del><span></span>
<!-- ************ -->
<!-- 换行标签，单标签，内部没有属性，上面的段落、行内标签可以通过br换行 -->
<br>
<!-- 预格式标签，保留文本中的换行或者空格 -->
<pre></pre>
<!-- 标题标签，h1~h6，块级元素，从大到小，h1最大 -->
<!-- text-align:设置文本位置 left:靠左 center:居中 right:靠右 -->
<h1 style="text-align: center;"></h1>
<!-- background:背景颜色 height:标签高度 line-height:设置行高 -->
<h2 style="background: pink;height: 50px;line-height: ;"></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
</body>
</html>四、HTML中常用标签 ---> 超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/* 去掉a链接下划线 */
a{text-decoration: none;}
/* 伪属性，鼠标移上字体变红,下划线显示 */
a:hover{color: red;text-decoration: underline;}
div{height: 1000px;background: pink;width:400px;}
</style>
</head>
<body>
<!-- 链接标签 href:链接地址，"#"本页面跳转，默认自带下划线 -->
<a href="#">我是一个链接</a>
<!-- 图片链接 -->
<a href=""><img src="" alt=""></a>
<!-- 设置锚点定位 -->
<a href="top">页面顶部</a>
<div>
</div>
<a href="" id="top">回到顶部</a>
</body>
</html>五、HTML中常用标签 ---> 列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表标签</title>
<style type="text/css">
/* 清空li样式；文化素质宽高；设置边框线 */
ul li{list-style: none;height: 40px;width: 200px;border: 1px solid #ccc;margin: 5px 0px;text-align:center;line-height: 40px;}
/* 设置前面样式为图片，但是无法调整图片与文字的间距 */
ul li{list-style: url(图片地址);}
/* 伪元素；在文字前面设置图片与文字的间距 */
ul li::before{content: url(图片地址);margin-right: 30px;}
/* 伪元素；在文字前面设置图片与文字的间距 */
ul li::after{content: url(图片地址);}
</style>
</head>
<body>
<!-- 有序列表 -->
<ol>
<li>web前端</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>西瓜
<ul>
<li>有籽西瓜</li>
<li>无籽西瓜</li>
</ul>
</li>
<li>苹果</li>
<li>西柚</li>
</ul>
</body>
</html>六、HTML中常用标签 ---> form表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form表单</title>
<style type="text/css">
/* padding内边距 */
input{height: 8px;width: 258px;border: 1px solid #ccc;margin-top: 20px;padding: 20px;}
/* border: none去掉按钮自带的边框线 */
button{height: 50px;width: 300px;margin-top: 20px;background: #FF6A00;border: none;color: #fff;}
</style>
</head>
<body>
<!-- method在后端传输数据用到,传值方式get/post -->
<!-- action传值url地址 -->
<form method="" action="">
<!-- type类型，输入域的类型：text文本型，password密码类型 -->
<!-- placeholder文本框内部的提示信息 -->
<input type="text" name="username" placeholder="请输入用户名"><br>
<input type="password" name="pwd" placeholder="请输入用密码"><br>
<button>登陆</button>
</form>
</body>
</html>七、HTML中常用标签 ---> 表格（table）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
<style type="text/css">
/* 清除默认样式 */
*{margin: 0px;padding: 0px;}
/* border-collapse: collapse;合并多余的边框线 */
table{border: 1px solid #ccc;border-collapse: collapse;}
tr th{height: 200px;border: 1px solid #ccc;width: 100px;}
tr td{height: 200px;border: 1px solid #ccc;width: 100px;}
</style>
</head>
<body>
<table>
<!-- 表头定义用th -->
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<!-- 定义行用tr -->
<tr>
<!-- 定义列用td -->
<!-- colspan="5"合并5列 -->
<td colspan="5"></td>
</tr>
<tr>
<!-- 定义列用td -->
<!-- rowspan="2"合并两行，同时删除合并行的列 -->
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
