HTM基础之HTML标签
2024-09-05 19:32:37
HTML（超文本标记语言）
html代码实际上就是一套能够被浏览器所识别的规则代码，由一个个标签组成。html代码就是一大长串字符串，而这种字符串的格式正好能够被浏览器所识别，也就有了我们的WEB页面。
后端与前端交互方式
1、后端通过直接返回浏览器能够识别的html代码
2、后端返回数据，前端替换html种的指定数据
常用的HTML标签：
<head>
<!-- 指定编码 -->
<meta charset="UTF-8">
<title>Darren</title>
<!--引入css-->
<link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/favicon.ico">
<!--每一秒刷新一次-->
<!--<meta http-equiv="refresh" content="1">-->
<!-- 关键字检索 -->
<!--<meta name="keywords" content="大师兄">-->
<!--每一秒跳转到url-->
<!--<meta http-equiv="refresh" content="1;Url=http://www.imdsx.cn">-->
<!-- 网站描述-->
<!--<meta name="description" content="大师兄是名低调的测试工程师">-->
<!-- ie打开时以最高的兼容模式打开 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--写css标签的位置-->
<style> </style>
<!--引入js和编写js-->
<script> </script>
<!--title图标-->
<link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/favico.ico">
<!--引入css文件-->
<link rel="stylesheet" href="tmp.css">
</head>
<body>
<!--<h1> 11111</h1>-->
<!--<br/>换行-->
<!--<p></p>段落标签-->
<!--<p>-->
<!--年轻,就是拿来折腾的。让自己具备独立生活的能力，具备一技之长的资本，是需要无数个夜晚的静思，<br/>-->
<!--无数寂寞时光的堆积而成的。-->
<!--别在最该拼搏的年纪选择稳定，世界上最大的不变是改变，只有每天进步，才能拥抱生命的无限可能！<br/>-->
<!--你以为你给对方留了电话存了微信，应该彼此也能互相帮忙，却忘记了一件很重要的事情，只有关系平等，才能互相帮助。-->
<!--不要为了户口丢掉生活，为了稳定丢掉青春，为了平淡丢掉梦想，因为你所谓的稳定，不过实在浪费生命。-->
<!--真正的勇者不是狼狈的逃脱，而是用闲暇时间，磨练自己。-->
<!--只有等现实的日子富足了，能力够强了，才可以去追求那些美好的生活状态，才该去追求那些伟大的梦。否则那些梦幻般的生活，都只是空中阁楼，不堪一击。-->
<!--生活是自己的，自己都不求进取，凭什么让别人给你美好的未来？</p>-->
<!--标题标签--1-6 1级别最高-->
<!--自动闭合标签--不是成对的>
<meta> <link><input>
<!--主动闭合标签-->
<!--1、块级标签 2、内连标签（行内标签）-->
<!--块级标签：自己占一整行-->
<!--<h1>大师兄</h1>-->
<!--<h2>大师兄</h2>-->
<!--<h3>大师兄</h3>-->
<!--<h4>大师兄</h4>-->
<!--<h5>大师兄</h5>-->
<!--<h6>大师兄</h6>-->
<!--div相当于一个白板什么都没有一切要通过css进行装饰，通过css样式装饰后可以变成任意标签-->
<!--<div>最真实</div>-->
<!--内连标签和行内标签用多少占多少-->
<!--span是一个真正的白板标签，通过css样式装饰后可以变成任意标签-->
<!--<span>n你猜吧</span>--> <!--文本框标签<input>-->
<!--文本框-->
<!--<input type="text" name=username">-->
<!--<input type="text" value="请输入用户名" name="username">-->
<!--<!–文本框提示置灰显示–>-->
<!--<input type="text" placeholder="请输入用户名">-->
<!--<!–密码输入框–>-->
<!--<input type="password" name="passwd">-->
<!--多选框-->
<!--<input type="checkbox"> -->
<!--<!–默认勾选的复选框–>-->
<!--<input type="checkbox" checked="checked">-->
<!--单选框-->
<!-- 单选框 radio name相同 勾选是互斥-->
<!--<input type="radio" name="sex" value="1" checked="checked"><span>男</span>-->
<!--<input type="radio"name="sex"value="2"><span>女</span>-->
<!--按钮 只是一个单纯的按钮，点击没反应,想提交数据必须结合js绑定事件（ajax）,value是按钮上的文字-->
<!--<input type="button" value="login">-->
<!-- 提交 提交表单需要用submit -->
<!-- reset 还原表单中填写的数据到默认 -->
<!--<input type="reset" value="重置">-->
<!--如果submit和form连用，直接请求form对应的action的目标的url-->
<!--<input type="submit" value="提交">-->
<!--表单标签 可以理解为载体相当于纸，input相当于在纸上的文字-->
<!--action就是提交到哪里 method就是请求的方法-->
<!--<!–ajax提-->
<!--<form action="https://www.baidu.cn" method="post">-->
<!--<input type="text" placeholder="请输入用户名">-->
<!--<input type="text" placeholder="请输入密码">-->
<!--<input type="button" value="登陆">-->
<!--<input type="submit" value="提交">-->
<!--<input type="reset" value="重置">-->
<!--</form>--> <!--label和input联合运用，增加input的点击范围可直接点击文字就输入(输入框获取到焦点显示光标)
for:映射到input的id；id是一种选择器，在整个html是唯一的；class也是
-->
<!--<label for="i1">用户名</label><input type="text" id="i1">-->
<!--<label for="li1">用户名</label><input type="text"id="li1">-->
<!--多行文本textarea的文本内容需要写在两个标签之间没有value属性-->
<!--<textarea>特别的爱，给特别的你</textarea>--> <!--下拉框-select,option里面是内容-->
<!-- select中size显示几个，mutiple表示按住ctrl可以多选-->
<!--option里面selected=selected默认选中的--> <!--<select size="4" multiple="multiple"name="城市">-->
<!--<option selected="selected" value="1">铁岭</option>-->
<!--<option value="2">鸡西</option>-->
<!--<option value="3">大连</option>-->
<!--<option value="4">沈阳</option>-->
<!--</select>-->
<!--下拉分组 label后面是分组的名字-->
<!--<select>-->
<!--<optgroup label="黑龙江">-->
<!--<option selected="selected" value="1">铁岭</option>-->
<!--<option value="2">鸡西</option>-->
<!--<option value="3">大连</option>-->
<!--<option value="4">沈阳</option>-->
<!--</optgroup>-->
<!--<optgroup label="山东">-->
<!--<option value="1">青岛</option>-->
<!--<option value="2">烟台</option>-->
<!--<option value="3">日照</option>-->
<!--<option value="4">济南</option>-->
<!--</optgroup>-->
<!--</select>--> <!--超链接标签 target属性为以什么方式跳转-->
<!--_blank新tab页跳转，去掉a标签的下划线通过属性style="text-decoration:none"-->
<!--<a href="https://www.baidu.com" target="_blank" style="text-decoration:none">百度</a>-->
<!--锚点 如：#test-p -->
<!--a标签还可以做锚点，通过id进行对应关系的映射 锚点可以作为跳转 -->
<!--<div style="height: 1000px" id="li"> </div>-->
<!--<a href="#li">回到顶部</a>-->
<!--特殊符号 代表空格-->
<!-->；代表大于号，<；代表小于号-->
<!--<a href="s.html">大     师 兄</a>--> <!--图案片标签，src是图片的位置；alt图片加载失败后显示alt的文案，
title鼠标悬浮在图片上显示的文字-->
<!--<img src="dsx.jpg" alt="测试" title="孩子和狗">-->
<!--列表标签。形式的标签-->
<!--<ul>-->
<!--<li>123</li>-->
<!--<li>123</li>-->
<!--</ul>-->
<!--列表标签数字形式的标签-->
<!--<ol>-->
<!--<li>abc</li>-->
<!--<li>abc</li>-->
<!--</ol>-->
<!--分层列表dl ,其中dt外层，dd内层-->
<!--<dl>-->
<!--<dt>山东</dt>-->
<!--<dd>青岛</dd>-->
<!--<dd>日照</dd>-->
<!--<dt>北京</dt>-->
<!--<dd>怀柔</dd>-->
<!--<dd>顺义</dd>-->
<!--</dl>--> <！--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>
<th colspan="2">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="3">计算机</td>
<td>阿霞</td>
<td rowspan="3">18</td>
<td>编辑</td>
<td>删除</td>
</tr>
<tr>
<td>2</td>
<td>阿磊</td>
<td>编辑</td>
<td>删除</td>
</tr>
<tr>
<td>3</td>
<td>阿西</td>
<td>编辑</td>
<td>删除</td>
</tr> </tbody>
</table>
</body>
</html>
最新文章
- PLSql Oracle配置
- WPF自定义控件与样式(2)-自定义按钮FButton
- 【leetcode】Balanced Binary Tree（middle）
- 在64位Win7中使用Navicat Premium 和PL\SQL Developer连接Oracle数据库备忘
- 2016HUAS暑假集训训练2 O - Can you find it?
- makefile常用函数
- ios 应用程序之间的跳转(内置程序的实现)
- 基于linux vim环境python代码自动补全
- C#中委托。
- mysql Using filesort 索引不可用问题
- MySQL平滑删除数据的小技巧【转】
- 解决浏览器跨域限制方案之CORS
- Faster_RCNN 2.模型准备(上)
- count(1)、count(*)与count(列名)的执行区别
- 代码问题: 【MatConvNet库编译】
- Spring 中PageHelper分页插件使用
- 汇编中CMP的作用
- CF 427D Match &amp; Catch 求最短唯一连续LCS
- Saltstack配置管理
- EasyUI+bootsrtap混合前端框架