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

随机推荐

学习-Pytest（三）setup/teardown
1. 用例运行级别模块级(setup_module/teardown_module)开始于模块始末,全局的函数级(setup_function/teardown_function)只对函数用例生效 ...
Codeforces 965 枚举轮数贪心分糖果青蛙跳石头最大流=最小割思想 trie启发式合并
A /*#include<cstring>#include<algorithm>#include<queue>#include<vector>#incl ...
vue2.0 笔记（杂记）
一.vue class.style表达式的类型: 字符串.对象和数组1.字符串 <div class="static" v-bind:class="class-a& ...
Python修炼之路-装饰器、生成器、迭代器
装饰器本质:是函数,用来装饰其他函数,也就是为其他函数添加附加功能. 使用情景 1.不能修改被装饰的函数的源代码: 2.不能修改被装饰的函数的调用方式. 在这两种条件下,为函数添加附加 ...
springboot maven打包插件
<build> <plugins>  <plugin> <groupId>org.spr ...
015：URLs分层模块化
URLs分层模块化: 经过上面的14节课程,大伙有没有发现一个问题:那就是随着的项目功能模块越来越多,所有url匹配都写在一个urls.py文件中,其结果是:文件长,看着心累——需要分门别类:因此能不 ...
winform 异步更新ui
http://download.csdn.net/download/mingge38/9378852
UNIX标准C - 进程之间的通信
一.基本概念进程间通信IPC:进程之间交换数据的过程叫进程间通信进程间同性的方式: 简单的进程间的通信: 命令行:父进程通过exec函数创建子进程是可以附加一些数据环境变量表:父进程通过exec ...
Mysql安装及用简单用法
Mysql安装和初始化初见: Mysql软件 - 服务端软件 - 服务端程序 - 解析指令 - 对文件的操作 - 客户端软件 - 客户端程序 - 发送指令(sql语句) - 解析指令其他类似软件: ...
CentOS7/RHEL7 pacemaker+corosync高可用集群搭建
TOC \o "1-3" \h \z \u 一.集群信息... PAGEREF _Toc502099174 \h 4 08D0C9EA79F9BACE118C8200AA004B ...

HTML学习之==>HTML标签

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

随机推荐

热门专题