html基础之html标签
HTML(HyperText Markup Language),超文本标记语言。是一长串字符串,能够被浏览器所解析。
超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。
html分三个重要的模块。
HTML:一个赤裸的人
CSS:是这个人的衣服
JS(JavaScript):这个人的动作
1、html head部分
<!DOCTYPE html><!--规定标准的html--> <!--一个页面只有一个html标签--> <!--标签的属性 lang="en"指定英文--> <html lang="en"> <head> <!-- 在head中所写的所有标签全部都看不到,是内部的一些东西,除了一个标签就是title--> <!--meta是自闭和标签--> <meta charset="UTF-8"> <!--每隔一秒钟刷新一次--> <meta http-equiv="refresh" content="1"> <meta http-equiv="refresh" content="2;url=http://www.baidu.com"> <!--titlt是主动闭合标签--> <!--更改浏览器tab的名字--> <title>双鱼座</title> <!--rel 代表link做什么用,href代表路径--> <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg">
<!-- 引入css -->
<link rel="stylesheet" href="tmp.css">
<!-- css样式-->
<style></style>
<!-- 引入js -->
<script src="tmp.js"></script> </head> <body> </body> </html>
2.html body部分
符号
<a href="http://www.imdsx.cn">大 师 兄</a>
<a href="http://www.imdsx.cn"><a></a>
空格:  大于号:> 小于号 < 记住常用的这三个,其他的用时百度
块级标签:H标签(加大加粗),P标签(段落间有间距),DIV(白板)
行内标签:SPAN标签(白板)
H,标题标签,由h1到h6,标题由大到小
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>
</body>
</html>
p,段落标签,每行文字之间有一定的间距,在检查模式下可查看到(也属于块级标签,鼠标悬浮去看,如果占了整行就是块级标签);
br,换行;
span,(行内标签),鼠标悬浮去看,如果只占了文字的那一块就是行内标签;(白板标签),没有任何的样式,可以通过css修饰变成p标签等任何标签。
div,块级标签,也叫伪白板标签,可以通过css修饰变成任何一种标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双鱼座</title>
</head>
<body>
<p>年轻,就是拿来折腾的。让自己具备独立生活的能力,具备一技之长的资本,是需要无数个夜晚的静思,无数寂寞时光的堆积而成的。</p>
<span>年轻,就是拿来折腾的。</span>
<div>年轻,就是拿来折腾的。</div>
</body>
</html>
input,文本框标签,包含多个属性,button、text、password、checkbox、radio、file、submit、reset
form, 表单标签可以理解为载体,承载着所有要像后端提交的数据,通常与input连用,表单提交数据分为get提交和post提交,get提交在url上挂参数,post提交在body中
label,label 标题标签 与input联合运用,增加input的点击范围 可直接点击文字就输入 for:映射到input的id
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双鱼座</title> </head> <body> <input type="text" placeholder="请输入用户名" name="username" value="admin"> <input placeholder="请输入密码" type="password" name="password"> <span>是否记住登录</span><input type="checkbox" checked="checked" name="xxx" > <div>性别</div> <span>男</span><input type="radio" checked="checked" name="sex"> <span>女</span><input type="radio" name="sex"> <input type="file" name="file"> <!--button是需要和js连用,通过js进行提交操作--> <input type="button" value="提交"> <form action="http://www.baidu.com" method="post"> <!--- form标签是一个承载体,可以理解为一张白纸,input是往白纸上写字 --> <input type="text" name="username" value="admin"> <input type="reset" value="重置"> <!--submit如果和form表单连用,则直接提交表单--> <input type="submit" value="提交"> <input type="button" value="button登录">
</form> <label for="i1">用户名</label><input id="i1" type="text" value="admin"> <!-- 扩展了input的可点击范围 --> <span>密码</span><input type="password">
<!-- 多行文本 -->
<textarea>多行文本,内容较多的时候会出现下拉条</textarea> </body> </html>
select option,select option 下拉框标签 默认选择在option上增加selected size属性显示多少个 多选属性:multiple
select optgroup,对下拉选项进行分组optgroup 分组,label属性是组的名字,不可选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双鱼座</title>
</head>
<body>
<select name="city" size="3" multiple="multiple">
<option value="1">北京</option>
<option value="2" selected="selected">河北</option>
<option value="3">黑龙江</option>
<option value="4">湖北</option>
</select>
<select>
<optgroup label="黑龙江">
<option>牡丹江</option>
<option>哈尔冰</option>
</optgroup>
<optgroup label="湖北">
<option>武汉</option>
<option>荆州</option>
</optgroup>
</select>
</body>
</html>
a,超链接 href属性为跳转的地址,target属性为以什么方式跳转"_blank"新tab跳转,a标签还可以做锚点,通过id进行对应关系的映射 去掉a标签的下划线通过属性text-decoration:none
ul,列表 ul li · 形式的列表;列表 ol li 数字形式的列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双鱼座</title>
</head>
<body>
<!--超链接标签-->
<a href="http://www.baidu.com">百度一下</a>
<a href="#kk">跳转</a>
<div id="kk">ddddddddddddddddddddddddd</div> <!--锚点-->
<ul>
<li>武汉</li>
<li>荆州</li>
</ul>
<ol>
<li>北京</li>
<li>河北</li>
</ol>
<dl>
<dt>湖北</dt>
<dd>武汉</dd>
<dd>荆州</dd>
</dl>
</body>
</html>
table,table 表格标签 thead:表头 th:表头行 tbody:内容 tr:行 td:列 boder:表格的边框 coslpan:td占几列 rowspan:tr占几列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双鱼座</title>
</head>
<body>
<table border="1">
<thead>
<!--行-->
<tr>
<!--表头当中的列-->
<th>id</th>
<th>请求方式</th>
<th>参数</th>
<th>接口</th>
<th colspan="2">操作</th>
</tr>
</thead>
<tbody>
<!--行-->
<tr>
<!--表体当中的列-->
<td>1</td>
<td rowspan="4">post</td>
<td>{'name':'dsx'}</td>
<td>/login</td>
<td><a href="http://www.baidu.com" style="text-decoration: none">修改</a></td>
<td><a href="http://www.sina.com" style="text-decoration: none">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>{'name':'dsx'}</td>
<td>/login</td>
<td><a href="http://www.baidu.com" style="text-decoration: none">修改</a></td>
<td><a href="http://www.sina.com" style="text-decoration: none">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>{'name':'dsx'}</td>
<td>/login</td>
<td><a href="http://www.baidu.com" style="text-decoration: none">修改</a></td>
<td><a href="http://www.sina.com" style="text-decoration: none">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>{'name':'dsx'}</td>
<td>/login</td>
<td><a href="http://www.baidu.com" style="text-decoration: none">修改</a></td>
<td><a href="http://www.sina.com" style="text-decoration: none">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
img,img 图片标签 src:图片的位置 图片跳转通过a标签 alt:当图片加载失败时显示alt的文案 title:鼠标悬浮在图片上显示的文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双鱼座</title>
</head>
<body>
<a href="http://www.baidu.com"><img src="http://ui.imdsx.cn/static/image/dsx.jpg" alt="图片加载失败时显示的文字" title="鼠标悬浮时显示的文字"></a>
</body>
</html>