HTML基础之HTML标签

前端的三把利器

HTML:赤裸的一个人

CSS:华丽的衣服

JS/JavaScript:赋予这个人的行为,也就是动起来

HTML(超文本标记语言)

html代码实际上就是一套能够被浏览器所识别的规则代码,由一个个标签组成。html代码就是一大长串字符串,而这种字符串的格式正好能够被浏览器所识别,也就有了我们的WEB页面。

后端与前端交互方式

1、后端通过直接返回浏览器能够识别的html代码

2、后端返回数据,前端替换html种的指定数据

HTML标签

<!DOCTYPE html> <!--标准的html规则,类似于Python的解释器-->
 
<html lang="en"> <!--html标签(只能一个),指定语言en-->
 
<head> <!-- html head标签的开始 -->
 
</head> <!-- html head标签的结束 -->
 
<body> <!-- html body标签的开始 -->
 
<a href="http://www.imdsx.cn">跳转大师兄</a> <!--类似有很多href这种的叫做标签内部属性-->
 
</body> <!-- html body标签的结束 -->
 
</html>
 
注释的写法 <!-- -->

html head

1、自闭和标签

<meta charset="UTF-8">

只有开头标签,没有结尾标签

2、主动闭合标签

<a></a>

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
<!-- 指定编码 -->
 
<meta charset="UTF-8">
 
<!-- 每3秒中刷新一次 -->
 
<meta http-equiv="refresh" content="1">
 
<!-- 3秒后跳转页面 -->
 
<meta http-equiv="refresh" content="1;Url=http://www.imdsx.cn">
 
<!-- 关键字检索 -->
 
<meta name="keywords" content="大师兄">
 
<!-- 网站描述-->
 
<meta name="description" content="大师兄是名低调的测试工程师">
 
<!-- ie打开时以最高的兼容模式打开 -->
 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
<!-- 在head中所写的所有标签全部都看不到,是内部的一些东西,除了一个标签就是title-->
 
<title>白羊座</title>
 
<!-- 前方高能预警,***重要*** -->
 
<!-- title的图标 -->
 
<link rel="shortcut icon" href="tubiao.ico">
 
<!-- 引入css -->
 
<link rel="stylesheet" href="tmp.css">
 
<!-- css样式-->
 
<style></style>
 
<!-- 引入js和编写js -->
 
<script src="tmp.js"></script>
 
</head>
 
<body>
 
</body>
 
</html>

html body

符号

<a href="http://www.imdsx.cn">大&nbsp师&nbsp兄</a>

<a href="http://www.imdsx.cn">&lta&gt</a>

空格:&nbsp 大于号:&gt 小于号 &lt  记住常用的这三个,其他的用时百度

块级标签:H标签(加大加粗),P标签(段落间有间距),DIV(白板)

行内标签:SPAN标签(白板)

p、br

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
<meta charset="UTF-8">
 
<title>Title</title>
 
</head>
 
<body>
 
<!-- p标签称之为段落标签,占满一整行,段落之间有空行 想换行需要通过<br/>标签 自闭合标签建议自己写上/作为区分-->
<p>从明天起,做一个幸福的人<br/> 喂马,劈柴,周游世界 </p>

<p>从明天起,关心粮食和蔬菜</p>

<p>我有一所房子,面朝大海,春暖花开</p>

<p>从明天起,和每一个亲人通信</p>

<p>告诉他们我的幸福</p>

<p>那幸福的闪电告诉我的</p>

<p>我将告诉每一个人</p>

<p>给每一条河每一座山取一个温暖的名字</p>

<p>陌生人,我也为你祝福</p>

<p>愿你有一个灿烂的前程</p>

<p>愿你有情人终成眷属</p>

<p>愿你在尘世获得幸福</p>

<p>我只愿面朝大海,春暖花开</p>
</body>
 
</html>

h、form、div、span、input、label

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
<meta charset="UTF-8">
 
<title>Title</title>
 
</head>
 
<body>
 
<!-- 标题标签 h1最大 h6最小 只需要记住先出生最大 自带属性 -->
 
<h1>大师兄</h1>
 
<h2>大师兄</h2>
 
<h3>大师兄</h3>
 
<h4>大师兄</h4>
 
<h5>大师兄</h5>
 
<h6>大师兄</h6>
 
<!-- 行内标签的代表 什么属性都不带-->
 
<span>大师兄</span>
 
<!-- 块级标签的代表 什么属性都不带,html代码中出场率最高-->
 
<div>大师兄</div>
 
<!-- 登录页面 -->
  
<!-- 表单标签 可以理解为载体 纸 input 就是写在纸上的文字-->
 
<form action="/login" method="post">
 
<!-- 文本输入框 -->
 
<input type="text" name="username"/>
 
<!-- 密码输入框 -->
 
<input type="password" name="passwd"/>
 
<!-- 按钮 点击什么用也没有 需要结合js绑定事件 -->
 
<input type="button" value="登录"/>
 
<!-- 提交 提交表单需要用submit -->
 
<input type="submit" value="提交"/>
 
</form>
 
 
<!-- get与post区别提交 -->
 
<form action="/login" method="get" enctype="multipart/form-data">
 
<!-- 文本输入框 text-->
 
<input type="text" name="username" value="默认值"/>
 
 
<!-- 密码输入框 password-->
 
<input type="password" name="passwd"/>
 
 
 
<!-- 按钮 点击什么用也没有 需要结合js绑定事件 -->
 
<input type="button" value="登录"/>
 
 
<!-- 多选框 checkbox {"name":[1,2,3]} 默认值checked=checked-->
 
<p>女朋友的选择标准</p>
 
<input type="checkbox" name="check" value="1" checked="checked"><span>大长腿</span>
 
<input type="checkbox" name="check" value="2"><span>长头发</span>
 
<input type="checkbox" name="check" value="3"><span>36C</span>
 
 
<!-- 单选框 radio name相同 勾选是互斥-->
 
<input type="radio" name="sax" value="1" checked="checked"><span></span>
 
<input type="radio" name="sax" value="2"><span></span>
 
 
<!-- 文件类 file 如果上传文件一定要在form中添加特殊属性 enctype="multipart/form-data" 意思是一点一点的发给服务器-->
 
<p>上传文件</p>
 
<input type="file" name="file"/>
 
 
<!-- 提交 提交表单需要用submit -->
 
<input type="submit" value="提交"/>
 
<!-- reset 还原表单中填写的数据到默认 -->
 
<input type="reset" value="重置">
 
</form>
 
<!-- label 标题标签 与input联合运用,增加input的点击范围 可直接点击文字就输入 for:映射到input的id-->
 
<label for="username">用户名</label>
 
<input id="username" type="text"/>
 
</body>
 
</html>

textarea、select、option、optgroup、a、img、ul、li、ol、dl、dt、dd

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
<meta charset="UTF-8">
 
<title>Title</title>
 
</head>
 
<body>
 
<p id="t1">描述</p>
 
<!-- 多行文本 textarea 默认值在标签之间-->
 
<textarea name="meno">默认值</textarea>
 
 
<p>省市</p>
 
<!-- select option 默认选择在option上增加selected size属性显示多少个 多选属性:multiple-->
 
<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>
 
<!-- optgroup 分组 label 组的名字 -->
 
<select name="city" size="3" multiple="multiple">
 
<optgroup label="黑龙江省">
 
<option value="1">哈尔滨</option>
 
<option value="2">牡丹江</option>
 
</optgroup>
 
<optgroup label="北京省">
 
<option value="3">北京</option>
 
</optgroup>
 
</select>
 
<!-- 超链接标签 a href:跳转的链接 target="_blank" 新tab打开页面 -->
 
<p>超链接</p>
 
<a href="http://www.baidu.com" target="_blank">大师兄</a>
 
 
<!-- a标签 锚的链接 通过id进行对应关系的映射 例子回到顶部-->
 
<div style="height: 500px;">文章</div>
 
<a style="position: fixed;right: 0;bottom: 0" href="#t1">回到顶部</a>
 
 
<!-- img 图片标签 src:图片的位置 图片跳转通过a标签 alt:当图片加载失败时显示alt的文案 title:鼠标悬浮在图片上显示的文字-->
 
<a href="http://www.imdsx.cn"><img src="1.png" style="height: 200px;width: 200px;" alt="html" title="大师兄html"></a>
 
 
<!-- 列表 ul li 点-->
 
<ul>
 
<li>第一列</li>
 
<li>第二列</li>
 
</ul>
 
 
<!-- 列表 ol li 数字 -->
 
<ol>
 
<li>第一列</li>
 
<li>第二列</li>
 
</ol>
 
 
<!-- 分层列表 dl dd内层 dt外层 -->
 
<dl>
 
<dt>黑龙江</dt>
 
<dd>哈尔滨</dd>
 
<dd>牡丹江</dd>
 
</dl>
 
<dl>
 
<dt>北京</dt>
 
<dd>北京</dd>
 
</dl>
 
</body>
 
</html>

table、thead、tr、th、tbody、tr、td

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
<meta charset="UTF-8">
 
<title>Title</title>
 
</head>
 
<body>
 
<!-- table 表格标签 thead:表头 th:表头行 tbody:内容 tr:行 td:列 boder:表格的边框 coslpan:td占几列 rowspan:tr占几列-->
 
<table border="1">
 
<thead>
 
<tr>
 
<th>ID</th>
 
<th>用例名称</th>
 
<th>执行人</th>
 
<th>编辑</th>
 
</tr>
 
</thead>
 
<tbody>
 
<tr>
 
<td>1</td>
 
<td>table表格测试</td>
 
<td>大师兄</td>
 
<td><a href="tmp.html">详情</a> <a href="edit.html">编辑</a></td>
 
</tr>
 
<tr>
 
<td>1</td>
 
 
<!-- colspan等于几就占几列-->
 
<td colspan="2">table表格测试</td>
 
 
<td><a href="tmp.html">详情</a> <a href="edit.html">编辑</a></td>
 
</tr>
 
<tr >
 
<td>1</td>
 
 
<!-- rowspan等于几就占几行-->
 
<td rowspan="2">table表格测试</td>
 
 
<td>大师兄</td>
 
<td><a href="tmp.html">详情</a> <a href="edit.html">编辑</a></td>
 
</tr>
 
<tr>
 
<td>1</td>
 
<td>大师兄</td>
 
<td><a href="tmp.html">详情</a> <a href="edit.html">编辑</a></td>
 
</tr>
 
</tbody>
 
</table>
 
</body>
 
</html>

 

HTML基础之HTML标签

上一篇:php数据类型 及变量数据类型


下一篇:java输入输出流及文件操作