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

随机推荐

总结下Nginx的功能模块
nginx-1.10.3]# ./configure \ --prefix=/usr/local/nginx \ #指定安装路径 --user=nginx --group=ngin ...
libev个人问题解惑
我们的游戏后端一直以来用的都是libev,之前尝试过去读源码,因为里面用了大量宏和自己也不够耐心的原因,一直没有看懂.这次终于痛下决心,一定要啃下它,于是在这个星期调整自己的工作学习方式(在读源码的过 ...
用jmeter进行接口测试（2）
1.jmeter配置元件之HTTP信息头管理器使用右击线程组-[添加]-[HTTP信息头管理器] 是打发 Jmeter请求元件之参数化txt
MySQL 数据库的创建、修改、删除、跳转
一. 创建数据库 []代表可选项. IF NOT EXISTS:在创建数据库之前进行判断,只有该数据库目前尚不存在时才能执行操作. <数据库名>:创建数据库的名称.MySQL 的数据存储区 ...
微信支付之扫码支付、公众号支付、H5支付、小程序支付相关业务流程分析总结
前言很久以来,一直想写一篇微信支付有关的总结文档:一方面是总结自己的一些心得,另一方面也可以帮助别人,但是因种种原因未能完全理解透彻微信支付的几大支付方式,今天有幸做一些总结上的文章,也趁此机会,将 ...
enums应用详解
枚举类: 获取枚举相关值:
使用vux的x-input组件中show-clear=“true”清除icon点击失效的问题
问题场景: 在电脑浏览器点击清除icon正常在手机浏览器,手机微信,微信开发者工具中点击清除icon失效查看vux中的x-input组件中的源码发现,清除icon使用了v-show显示与隐藏,对应 ...
Windows 2012 R2 DataCenter服务器重启之后，其他加域电脑无法访问域账户
需在域控服务器重启,服务Kerberos Key
java——SimpleDateFormat与DateTimeFormatter
https://www.jianshu.com/p/b212afa16f1f SimpleDateFormat不是线程安全的 DateTimeFormatter是线程安全的
Mapnik连接文件数据、数据库中的vertor数据和raster数据
Mapnik的XML文件,选择其中一个Datasource. <?xml version="1.0" encoding="utf-8"?> < ...

HTML学习之==>HTML标签

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

随机推荐

热门专题