⼀、HTML中常⽤标签及属性
⼀、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 ></p>
<!-- ************ -->
<!-- ⾏内元素标签 -->
<!-- 斜体标签1 -->
<em></em>
<!-- 斜体标签2 -->
<i></i>
<!-- 删除线标签 -->
<del></del><span></span>
<!-- ************ -->
<!-- 换⾏标签，单标签，内部没有属性，上⾯的段落、⾏内标签可以通过br换⾏ -->
<br>
<!-- 预格式标签，保留⽂本中的换⾏或者空格 -->
<pre></pre>
<!-- 标题标签，h1~h6，块级元素，从⼤到⼩，h1最⼤ -->
<!-- text-align：设置⽂本位置 left：靠左 center：居中 right：靠右 -->
<h1 ></h1>
<!-- background：背景颜⾊ height：标签⾼度 line-height：设置⾏⾼ -->
<h2 ></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;}html href属性
</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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论