HTML学习之==>HTML标签

发布时间：2023-09-06 02:05责任编辑：林大明关键词：HTML

前端的三把利器：

HTML：一个人

CSS：这个人的衣服

JS：这个人的行为

HTML（超文本标记语言）

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

后端与前端交互方式

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

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

HTML标签

1 <!DOCTYPE html> <!--标准的html规则，类似于Python的解释器-->2 <html lang="en"> <!--html标签(只能一个)，指定语言en--> 3 <head> <!-- html head标签的开始 -->4 </head> <!-- html head标签的结束 -->5 <body> <!-- html body标签的开始 -->6 <a href="http://www.baidu.com">跳转百度</a> <!--类似有很多href这种的叫做标签内部属性-->7 </body> <!-- html body标签的结束 --> 8 </html> 9 注释的写法 <!-- -->

html head

1、自闭和标签

只有开头标签，没有结尾标签，只有一对尖括号

2、主动闭合标签

既有开头标签，又有结尾标签，有两对尖括号

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <!-- 指定编码 --> 5 <meta charset="UTF-8"> 6 <!-- 每1秒中刷新一次 --> 7 <meta http-equiv="refresh" content="1"> 8 <!-- 2秒后跳转页面 --> 9 <meta http-equiv="refresh" content="2;Url=http://www.baidu.com">10 <!-- 关键字检索 -->11 <meta name="keywords" content="双鱼座">12 <!-- 网站描述-->13 <meta name="description" content="大师兄是名低调的测试工程师">14 <!-- ie打开时以最高的兼容模式打开 -->15 <meta http-equiv="X-UA-Compatible" content="IE=edge">16 <!-- 在head中所写的所有标签全部都看不到，是内部的一些东西，除了一个标签就是title-->17 <title>白羊座</title>18 <!-- 前方高能预警，***重要*** -->19 20 <!-- title的图标 -->21 <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg">22 23 <!-- 引入css -->24 <link rel="stylesheet" href="s1.css">25 26 <!-- css样式-->27 <style></style>28 29 <!-- 引入js和编写js -->30 <script src="s1.js"></script>31 32 </head>33 34 <body>35 36 </body>37 38 </html>

html body

符号：

&nbsp：字符之间增加空格，有几个空格就要几个&nbsp

&lt：左尖角号或小于号展示到页面

&gt：右尖角号或大于号展示到页面

例：<h1>&lth1&gt &lt/h1&gt标题标签</h1>

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

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

h、p、br、span、div、input、form、label

 1 <!--h123456标签：标题标签，由大到小--> 2 <h1>标题标签</h1> 3 <h2>标题标签</h2> 4 <h3>标题标签</h3> 5 <h4>标题标签</h4> 6 <h5>标题标签</h5> 7 <h6>标题标签</h6> 8 ?9 <p>年轻,<br>就是拿来折腾的</p>10 ????<!--p标签：段落标签-->11 ????<!--p标签：块级标签，占满整行-->12 ????<!--br标签：换行标签-->13 14 <span>年轻,就是拿来折腾的</span>15 ????<!--span标签：行内标签-->16 ????<!--span标签：白板标签，它没有做任何的修饰，可以通过css修饰变成任意标签-->17 18 <div>年轻,就是拿来折腾的</div>19 ????<!--div标签，块级标签-->20 ????<!--div标签，伪白板标签-->21 22 <span>年&nbsp&nbsp&nbsp&nbsp轻</span>23 ????<!--&nbsp：字符之间增加空格-->24 25 <span>&lt年&nbsp&nbsp轻&gt</span>26 ????<!--&lt &gt：将尖角号展示到页面-->27 28 <span>&ltp&gt&lt/p&gt</span>29 ????<!--将p标签展示到页面-->30 31 <!--input标签：文本框标签-->32 <input type="text" placeholder="请输入用户名" name="username" value="admin">33 ????<!--type="text"：普通输入框-->34 ????<!--placeholder：输入框提示信息，输入框为空时显示-->35 ????<!--name：通过输入框传递给后端的值-->36 ????<!--value：输入框默认填入的值-->37 <input type="password" placeholder="请输入密码" name="password">38 ????<!--type="password"：密码输入框-->39 ????<!--placeholder：输入框提示信息，输入框为空时显示-->40 ????<!--name：通过输入框传递给后端的值-->41 <span>是否记住登录</span><input type="checkbox" name="xxx" checked="checked">42 ????<!--type="checkbox"：勾选框-->43 ????<!--name：通过输入框传递给后端的值-->44 ????<!--checked="checked"：默认勾选-->45 <div>性别</div>46 <span>男</span><input type="radio" checked="checked" name="sex">47 ????<!--type="radio"：单选按钮-->48 ????<!--checked="checked"：默认勾选-->49 ????<!--name="sex"：名字相同则互斥-->50 <span>女</span><input type="radio" name="sex">51 ????<!--type="radio"：单选按钮-->52 ????<!--name="sex"：名字相同则互斥-->53 <input type="file" name="file">54 ????<!--type="file"：上传文件-->55 ????<!--name：通过输入框传递给后端的值-->56 <input type="button" value="提交">57 ????<!--type="button"：button是需要和js连用，通过js进行提交操作-->58 ????<!--value="提交"：按钮名称-->59 60 <form action="http://www.baidu.com" method="get">61 ????<!--点击登录按钮，跳转到百度页面-->62 ????<input type="text" name="username" value="admin">63 ????<!--type="text"：普通输入框-->64 ????<!--name：通过输入框传递给后端的值-->65 ????<!--value：输入框默认填入的值-->66 ????<input type="reset">67 ????????<!--重置form表单到初始化状态-->68 ????<input type="submit" value="登录">69 ????????<!--submit和form连用则直接提交表单-->70 ????????<!--现在比较少用，点击后会刷新整个页面，所有input框都被清空，一旦有一个地方出错，刷新后其他地方都要重新输入-->71 ????<input type="button" value="button按钮">72 ????????<!--点击button按钮登录，异步提交，前端页面不动，前端通过js向后端偷偷发送请求，拿到请求结果后把请求结果直接绚览到页面上，能保证已经输入的内容不会被清空-->73 </form>74 75 <!--label标签：扩展了可点击范围-->76 <label for="i1">用户名：</label><input id="i1" type="text" value="admin">77 <span>密码：</span><input type="password">

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

 1 <!--textarea标签：多行文本标签--> 2 <textarea name="tex">sssssss</textarea> 3 ?4 <!--select option标签：下拉框标签--> 5 <select name="city" size="3" multiple="multiple"> 6 ????<!--size="3"：下拉框可以展示几个个东西--> 7 ????<!--multiple="multiple"：多选属性--> 8 ????<option value="1">北京</option> 9 ????<option value="2" selected="selected">上海</option>10 ????????<!--selected="selected"：默认选中上海-->11 ????<option value="3">天津</option>12 ????<option value="4">重庆</option>13 ????<option value="5">深圳</option>14 </select>15 16 <!--select optgroup标签-->17 <select>18 ????<!--optgroup标签：对下拉框进行分组-->19 ????<optgroup label="黑龙江">20 ????????<option>哈尔滨</option>21 ????????<option>牡丹江</option>22 ????</optgroup>23 ????<optgroup label="河北">24 ????????<option>石家庄</option>25 ????????<option>唐山</option>26 ????</optgroup>27 </select>28 29 <!--a标签：超文本链接标签-->30 <a href="http://www.imdsx.cn">大师兄博客</a>31 ????<!--href=""：跳转地址-->32 33 <!--a标签的锚点-->34 <a href="#i1">跳转</a>35 ????<!--井号代指id-->36 <div id="i1">ssssssssssssss</div>37 ????<!--id：id选择器-->38 39 <!--ul+li：·形式的列表-->40 <ul>41 ????<li>大连</li>42 ????<li>秦皇岛</li>43 </ul>44 45 <!--ol+li：数字形式的列表-->46 <ol>47 ????<li>大连</li>48 ????<li>秦皇岛</li>49 </ol>50 51 <!--dl+dt+dd：分层列表，dd内层，dt外层-->52 <dl>53 ????<dt>黑龙江</dt>54 ????<dd>牡丹江</dd>55 ????<dd>哈尔滨</dd>56 </dl>

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

 1 <!--table标签：表格标签--> 2 <table border="1"> 3 ????<!--border="1"：边框--> 4 ????<!--thead：表头--> 5 ????<thead> 6 ????????<!--tr:行--> 7 ????????<tr> 8 ????????????<!--th:表头当中的列--> 9 ????????????<th>id</th>10 ????????????<th>请求方式</th>11 ????????????<th>参数</th>12 ????????????<th>接口</th>13 ????????????<th colspan="2">操作</th>14 ????????????????<!--colspan="2"：操作栏占2列-->15 ????????</tr>16 ????</thead>17 ????<!--tbody：表体-->18 ????<tbody>19 ????????<!--tr：表体当中的第一行-->20 ????????<tr>21 ????????????<!--td：表体第一行中的列-->22 ????????????<td>1</td>23 ????????????<td rowspan="3">post</td>24 ????????????????<!--rowspan="3"：post占3行-->25 ????????????<td>{‘name‘:‘dsx‘}</td>26 ????????????<td rowspan="3">/login</td>27 ????????????????<!--rowspan="3"：/login占3行-->28 ????????????<td><a href="http://www.baidu.com">修改</a></td>29 ????????????????<!--加了a标签和href属性，点击修改则跳转页面-->30 ????????????<td>删除</td>31 ????????</tr>32 ????????<!--tr：表体当中的第二行-->33 ????????<tr>34 ????????????<!--td：表体第二行中的列-->35 ????????????<td>2</td>36 ????????????<td>{‘name‘:‘dsx‘}</td>37 ????????????<td>修改</td>38 ????????????<td>删除</td>39 ????????</tr>40 ????????<!--tr：表体当中的第三行-->41 ????????<tr>42 ????????????<!--td：表体第三行中的列-->43 ????????????<td>3</td>44 ????????????<td>{‘name‘:‘dsx‘}</td>45 ????????????<td>修改</td>46 ????????????<td>删除</td>47 ????????</tr>48 ????</tbody>49 </table>

img

1 <!--img标签：图片标签-->2 <img src="http://ui.imdsx.cn/static/image/dsx.jpg" alt="失败时展示的文字" title="鼠标悬浮时显示的文字">3 ????<!--alt：失败时展示的文字-->4 ????<!--title：鼠标悬浮时显示的文字-->

HTML学习之==>HTML标签

原文地址：https://www.cnblogs.com/L-Test/p/9308068.html

HTML学习之==>HTML标签

知识推荐