前端的三把利器：

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、自闭和标签

<meta charset="UTF-8">

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

2、主动闭合标签

<title>牧马人</title>

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

 <!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标签的更多相关文章

  1. 学习笔记_Java_day13_JSTL标签库（1、2、3、4、5、6、7、8）

    1.一种标签语言 day13 l  JSTL标签库(重点) l  自定义标签(理解) l  MVC设计模式(重点中的重点) l  Java三层框架(重点中的重点) JSTL标签库 1 什么是JSTL ...

  2. JUnit5学习之五：标签(Tag)和自定义注解

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  3. 重温JSP学习笔记--JSTL标签库

    以前写jsp的时候对jstl标签库是有些抵触的,因为我觉得嵌入java代码的方式几乎无往不利,没有必要使用标签库,不过这次复习还是好好地学习了一下,发现这个还是很有用处的,用得好能省不少事,JSTL是 ...

  4. JAVA学习Swing章节标签JLabel中图标的使用

    package com.swing; import java.awt.Color; import java.awt.Component; import java.awt.Container; impo ...

  5. JQery w3school学习第一章 标签的隐藏和显示

    鄙人初学JQuery,最关键的是JQuery获取标签对象的方式 这一章学习的是点击按钮让所有标签的文字以及标签栏的位置隐藏起来,因为单纯的隐藏文字,还是会有空格和空行的影响 这里最关键的代码就是 $( ...

  6. HTML学习-2标记标签-1

    大致可以分为以下6类学习: 1.通用标签. 2.常用标签. 3.表格标签. 4.表单元素. 5.框架. 6.其他. 一.通用标签.及属性 1.<body></body>标签,主 ...

  7. javaweb学习6——自定义标签

    声明:本文只是自学过程中,记录自己不会的知识点的摘要,如果想详细学习JavaWeb,请到孤傲苍狼博客学习,JavaWeb学习点此跳转 本文链接:https://www.cnblogs.com/xdp- ...

  8. jQuery学习之------对标签属性的操作

    jQuery学习之------标签的属性 <a href=””>链接</a>此处的href就是该a标签带有的属性 在js中对标签的属性的操作方法有 1.1getAttribut ...

  9. HTML学习笔记之标签基础

    目录 1.基本标签 2.链接 3.图像 4.表格 5.列表 6.块与布局 1.基本标签 (1)标题与段落 标签 <h1> ~ <h6> 分别用于定义一至六级标题,标签 < ...

  10. 前端学习(一) body标签(上)

    body标签中相关标签 主要内容: 字体标签:  h1~h6.<font>.<u>.<b>.<strong><em>.<sup> ...

随机推荐

  1. 2019-11-29-dotnet-获取指定进程的输入命令行

    title author date CreateTime categories dotnet 获取指定进程的输入命令行 lindexi 2019-11-29 08:35:11 +0800 2019-0 ...

  2. Ubuntu打开中文输入法

    方法/步骤: 1.从system settings 进入language support 在keyboard input method system 中选择 ibus (这里以ibus为例) 然后cl ...

  3. java高并发实战Netty+协程（Fiber）|系列1（续）|事件驱动模式和零拷贝

    上次讲到事件驱动模式,今天我们来好好分析下netty的事件模式的几个类型. 先从NIO讲起, JAVA NIO方面Selector给Reactor模式提供了基础,Netty结合Selector和Rea ...

  4. java 对象与类

    类与类之间的关系 一.继承关系      继承指的是一个类(称为子类.子接口)继承另外的一个类(称为父类.父接口)的功能,并可以增加它自己的新功能的能力.在Java中继承关系通过关键字extends明 ...

  5. 安装 mysql odbc连接器

    下载地址: https://dev.mysql.com/downloads/connector/odbc/ 可以选择旧版本的下载 一. 配置数据源 1. 安装后如果找不到软件可以按  win键 后 输 ...

  6. Synchronized 失效原因

    Synchronized 同步出现失效 Synchronized ,大家都知道这个是Java 提供的一种原子性内置锁,其实现原理是通过获取对象的监视器monitor进行来实现同步的,只有当线程获取到对 ...

  7. Linux系统无法启动故障解决方案

    Linux系统无法启动故障解决方案 2011-09-27 09:42 佚名 比特网 我要评论(0) 字号:T | T 不管你多么喜爱你的Linux系统机器,有时候你都必须恢复你的系统.是的,即使一台L ...

  8. 《Head First 软件开发》阅读一

    伟大的软件开发:让客户满意. 大多数项目的焦点:钱.时间. 我们需要交付的软件系统是需要客户满意,而你认为的完成并不是客户认为的完成. 如果我们不能确定客户需要的是什么,得回去问问他们.这是执行一个项 ...

  9. java中System类

    System作为系统类,在JDK的java.lang包中,可见它也是一种java的核心语言特性.System类的构造器由private修饰,不允许被实例化.因此,类中的方法也都是static修饰的静态 ...

  10. springboot 集成apollo，根据不同环境加载配置