HTML学习之==>HTML标签

前端的三把利器：

HTML：一个人

CSS：这个人的衣服

JS：这个人的行为

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.baidu.com">跳转百度</a> <!--类似有很多href这种的叫做标签内部属性-->

 </body> <!-- html body标签的结束 -->

 </html>

 注释的写法 <!-- -->

html head

1、自闭和标签

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

2、主动闭合标签

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <!-- 指定编码 -->

 <meta charset="UTF-8">

 <!-- 每1秒中刷新一次 -->

 <meta http-equiv="refresh" content="1">

 <!-- 2秒后跳转页面 -->

 <meta http-equiv="refresh" content="2;Url=http://www.baidu.com">

 <!-- 关键字检索 -->

 <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="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg">

 <!-- 引入css -->

 <link rel="stylesheet" href="s1.css">

 <!-- css样式-->

 <style></style>

 <!-- 引入js和编写js -->

 <script src="s1.js"></script>

 </head>

 <body>

 </body>

 </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

 <!--h123456标签：标题标签，由大到小-->

 <h1>标题标签</h1>

 <h2>标题标签</h2>

 <h3>标题标签</h3>

 <h4>标题标签</h4>

 <h5>标题标签</h5>

 <h6>标题标签</h6>

 <p>年轻,<br>就是拿来折腾的</p>

     <!--p标签：段落标签-->

     <!--p标签：块级标签，占满整行-->

     <!--br标签：换行标签-->

 <span>年轻,就是拿来折腾的</span>

     <!--span标签：行内标签-->

     <!--span标签：白板标签，它没有做任何的修饰，可以通过css修饰变成任意标签-->

 <div>年轻,就是拿来折腾的</div>

     <!--div标签，块级标签-->

     <!--div标签，伪白板标签-->

 <span>年&nbsp&nbsp&nbsp&nbsp轻</span>

     <!--&nbsp：字符之间增加空格-->

 <span>&lt年&nbsp&nbsp轻&gt</span>

     <!--&lt &gt：将尖角号展示到页面-->

 <span>&ltp&gt&lt/p&gt</span>

     <!--将p标签展示到页面-->

 <!--input标签：文本框标签-->

 <input type="text" placeholder="请输入用户名" name="username" value="admin">

     <!--type="text"：普通输入框-->

     <!--placeholder：输入框提示信息，输入框为空时显示-->

     <!--name：通过输入框传递给后端的值-->

     <!--value：输入框默认填入的值-->

 <input type="password" placeholder="请输入密码" name="password">

     <!--type="password"：密码输入框-->

     <!--placeholder：输入框提示信息，输入框为空时显示-->

     <!--name：通过输入框传递给后端的值-->

 <span>是否记住登录</span><input type="checkbox" name="xxx" checked="checked">

     <!--type="checkbox"：勾选框-->

     <!--name：通过输入框传递给后端的值-->

     <!--checked="checked"：默认勾选-->

 <div>性别</div>

 <span>男</span><input type="radio" checked="checked" name="sex">

     <!--type="radio"：单选按钮-->

     <!--checked="checked"：默认勾选-->

     <!--name="sex"：名字相同则互斥-->

 <span>女</span><input type="radio" name="sex">

     <!--type="radio"：单选按钮-->

     <!--name="sex"：名字相同则互斥-->

 <input type="file" name="file">

     <!--type="file"：上传文件-->

     <!--name：通过输入框传递给后端的值-->

 <input type="button" value="提交">

     <!--type="button"：button是需要和js连用，通过js进行提交操作-->

     <!--value="提交"：按钮名称-->

 <form action="http://www.baidu.com" method="get">

     <!--点击登录按钮，跳转到百度页面-->

     <input type="text" name="username" value="admin">

     <!--type="text"：普通输入框-->

     <!--name：通过输入框传递给后端的值-->

     <!--value：输入框默认填入的值-->

     <input type="reset">

         <!--重置form表单到初始化状态-->

     <input type="submit" value="登录">

         <!--submit和form连用则直接提交表单-->

         <!--现在比较少用，点击后会刷新整个页面，所有input框都被清空，一旦有一个地方出错，刷新后其他地方都要重新输入-->

     <input type="button" value="button按钮">

         <!--点击button按钮登录，异步提交，前端页面不动，前端通过js向后端偷偷发送请求，拿到请求结果后把请求结果直接绚览到页面上，能保证已经输入的内容不会被清空-->

 </form>

 <!--label标签：扩展了可点击范围-->

 <label for="i1">用户名：</label><input id="i1" type="text" value="admin">

 <span>密码：</span><input type="password">

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

 <!--textarea标签：多行文本标签-->

 <textarea name="tex">sssssss</textarea>

 <!--select option标签：下拉框标签-->

 <select name="city" size="3" multiple="multiple">

     <!--size="3"：下拉框可以展示几个个东西-->

     <!--multiple="multiple"：多选属性-->

     <option value="1">北京</option>

     <option value="2" selected="selected">上海</option>

         <!--selected="selected"：默认选中上海-->

     <option value="3">天津</option>

     <option value="4">重庆</option>

     <option value="5">深圳</option>

 </select>

 <!--select optgroup标签-->

 <select>

     <!--optgroup标签：对下拉框进行分组-->

     <optgroup label="黑龙江">

         <option>哈尔滨</option>

         <option>牡丹江</option>

     </optgroup>

     <optgroup label="河北">

         <option>石家庄</option>

         <option>唐山</option>

     </optgroup>

 </select>

 <!--a标签：超文本链接标签-->

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

     <!--href=""：跳转地址-->

 <!--a标签的锚点-->

 <a href="#i1">跳转</a>

     <!--井号代指id-->

 <div id="i1">ssssssssssssss</div>

     <!--id：id选择器-->

 <!--ul+li：·形式的列表-->

 <ul>

     <li>大连</li>

     <li>秦皇岛</li>

 </ul>

 <!--ol+li：数字形式的列表-->

 <ol>

     <li>大连</li>

     <li>秦皇岛</li>

 </ol>

 <!--dl+dt+dd：分层列表，dd内层，dt外层-->

 <dl>

     <dt>黑龙江</dt>

     <dd>牡丹江</dd>

     <dd>哈尔滨</dd>

 </dl>

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

 <!--table标签：表格标签-->

 <table border="1">

     <!--border="1"：边框-->

     <!--thead：表头-->

     <thead>

         <!--tr:行-->

         <tr>

             <!--th:表头当中的列-->

             <th>id</th>

             <th>请求方式</th>

             <th>参数</th>

             <th>接口</th>

             <th colspan="2">操作</th>

                 <!--colspan="2"：操作栏占2列-->

         </tr>

     </thead>

     <!--tbody：表体-->

     <tbody>

         <!--tr：表体当中的第一行-->

         <tr>

             <!--td：表体第一行中的列-->

             <td>1</td>

             <td rowspan="3">post</td>

                 <!--rowspan="3"：post占3行-->

             <td>{'name':'dsx'}</td>

             <td rowspan="3">/login</td>

                 <!--rowspan="3"：/login占3行-->

             <td><a href="http://www.baidu.com">修改</a></td>

                 <!--加了a标签和href属性，点击修改则跳转页面-->

             <td>删除</td>

         </tr>

         <!--tr：表体当中的第二行-->

         <tr>

             <!--td：表体第二行中的列-->

             <td>2</td>

             <td>{'name':'dsx'}</td>

             <td>修改</td>

             <td>删除</td>

         </tr>

         <!--tr：表体当中的第三行-->

         <tr>

             <!--td：表体第三行中的列-->

             <td>3</td>

             <td>{'name':'dsx'}</td>

             <td>修改</td>

             <td>删除</td>

         </tr>

     </tbody>

 </table>

img

 <!--img标签：图片标签-->

 <img src="http://ui.imdsx.cn/static/image/dsx.jpg" alt="失败时展示的文字" title="鼠标悬浮时显示的文字">

     <!--alt：失败时展示的文字-->

     <!--title：鼠标悬浮时显示的文字-->

HTML学习之==>HTML标签的更多相关文章

学习笔记_Java_day13_JSTL标签库（1、2、3、4、5、6、7、8）
1.一种标签语言 day13 l JSTL标签库(重点) l 自定义标签(理解) l MVC设计模式(重点中的重点) l Java三层框架(重点中的重点) JSTL标签库 1 什么是JSTL ...
JUnit5学习之五：标签(Tag)和自定义注解
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
重温JSP学习笔记--JSTL标签库
以前写jsp的时候对jstl标签库是有些抵触的,因为我觉得嵌入java代码的方式几乎无往不利,没有必要使用标签库,不过这次复习还是好好地学习了一下,发现这个还是很有用处的,用得好能省不少事,JSTL是 ...
JAVA学习Swing章节标签JLabel中图标的使用
package com.swing; import java.awt.Color; import java.awt.Component; import java.awt.Container; impo ...
JQery w3school学习第一章标签的隐藏和显示
鄙人初学JQuery,最关键的是JQuery获取标签对象的方式这一章学习的是点击按钮让所有标签的文字以及标签栏的位置隐藏起来,因为单纯的隐藏文字,还是会有空格和空行的影响这里最关键的代码就是 $( ...
HTML学习-2标记标签-1
大致可以分为以下6类学习: 1.通用标签. 2.常用标签. 3.表格标签. 4.表单元素. 5.框架. 6.其他. 一.通用标签.及属性 1.<body></body>标签,主 ...
javaweb学习6——自定义标签
声明:本文只是自学过程中,记录自己不会的知识点的摘要,如果想详细学习JavaWeb,请到孤傲苍狼博客学习,JavaWeb学习点此跳转本文链接:https://www.cnblogs.com/xdp- ...
jQuery学习之------对标签属性的操作
jQuery学习之------标签的属性 <a href=””>链接</a>此处的href就是该a标签带有的属性在js中对标签的属性的操作方法有 1.1getAttribut ...
HTML学习笔记之标签基础
目录 1.基本标签 2.链接 3.图像 4.表格 5.列表 6.块与布局 1.基本标签 (1)标题与段落标签 <h1> ~ <h6> 分别用于定义一至六级标题,标签 < ...
前端学习(一) body标签(上)
body标签中相关标签主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup> ...

随机推荐

mybatis返回map结果集
今天突发奇想,想用mybatis返回一个map结果集,结果我就整了一下午,不过终于解决了 1.如果你确定返回的数据只有一条,你可以这样整 xml中: <select id="searc ...
3.SpringBoot整合Mybatis(一对多)
前言: Mybatis一对多的处理关系: 一个人有好多本书,每本书的主人只有一个人.当我们查询某个人拥有的所有书籍时,就涉及到了一对多的映射关系. 一.添加数据表: CREATE TABLE `boo ...
使用switchshow/supportshow命令确认Brocade交换机型号(转载)
switchshow命令(或supportshow日志)中的switchType是以数字来代表不同的交换机型号,完整的对应表格如下: Switchtype EMC / Brocade名称 / 端口 / ...
ui自动化之selenium操作（五）简单元素操作--续
1. 多窗口切换有时候需要在多窗口切换,webdriver提供了switch_to_window()方法支持切换窗口: from selenium import webdriver import o ...
ArrayList与LinkedList的区别
两者区别大致分为以下几点: 1.ArrayList采用的是采用的是数组形式保存数据,这种方式将对象放在连续的位置中(线性存储):LinkedList采用的将对象放在独立的空间中,每个空间还保留下一个节 ...
element-ui + redis + mongo + nuxt
用户注册: let {username,password} = req.body; let u = await UserModel.findOne({username}); if(u){ res.js ...
ESP8266--WIFI热点扫描
现在,通常,为了让手机连上一个WiFi热点,基本上都是打开手机设置里面的WiFi设置功能,然后会看到里面有个WiFi热点列表,然后选择你要的连接上. 基本上你只要打开手机连接WiFi功能,都会发现附近 ...
javascript基本知识图解
转载自网络博客变量数据类型 javascript运算符 javascript流程语句 javascript 数组 javascript window对象 javascript DOM javas ...
【leetcode】Heaters
Winter is coming! Your first job during the contest is to design a standard heater with fixed warm r ...
对0.5px的边的研究--------------引用
什么是像素? 像素是屏幕显示最小的单位,在一个1080p的屏幕上,它的像素数量是1920 1080,即横边有1920个像素,而竖边为1080个.一个像素就是一个单位色块,是由rgba四个通道混合而成. ...

HTML学习之==>HTML标签

HTML学习之==>HTML标签的更多相关文章

随机推荐

热门专题