HTML（超文本标记语言）

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

后端与前端交互方式

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

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

常用的HTML标签：

<head>
    <!-- 指定编码 -->
    <meta charset="UTF-8">
    <title>Darren</title>
    <!--引入css-->
    <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/favicon.ico">
    <!--每一秒刷新一次-->
    <!--<meta http-equiv="refresh" content="1">-->
    <!-- 关键字检索 -->
    <!--<meta name="keywords" content="大师兄">-->
    <!--每一秒跳转到url-->
    <!--<meta http-equiv="refresh" content="1;Url=http://www.imdsx.cn">-->
    <!-- 网站描述-->
    <!--<meta name="description" content="大师兄是名低调的测试工程师">-->
    <!-- ie打开时以最高的兼容模式打开 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--写css标签的位置-->
    <style>   </style>
    <!--引入js和编写js-->
    <script> </script>
       <!--title图标-->
    <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/favico.ico">
    <!--引入css文件-->
    <link rel="stylesheet" href="tmp.css">
</head>
<body>
<!--<h1> 11111</h1>-->
<!--<br/>换行-->
<!--<p></p>段落标签-->
<!--<p>-->
<!--年轻,就是拿来折腾的。让自己具备独立生活的能力，具备一技之长的资本，是需要无数个夜晚的静思，<br/>-->
<!--无数寂寞时光的堆积而成的。-->
<!--别在最该拼搏的年纪选择稳定，世界上最大的不变是改变，只有每天进步，才能拥抱生命的无限可能！<br/>-->
<!--你以为你给对方留了电话存了微信，应该彼此也能互相帮忙，却忘记了一件很重要的事情，只有关系平等，才能互相帮助。-->
<!--不要为了户口丢掉生活，为了稳定丢掉青春，为了平淡丢掉梦想，因为你所谓的稳定，不过实在浪费生命。-->
<!--真正的勇者不是狼狈的逃脱，而是用闲暇时间，磨练自己。-->
<!--只有等现实的日子富足了，能力够强了，才可以去追求那些美好的生活状态，才该去追求那些伟大的梦。否则那些梦幻般的生活，都只是空中阁楼，不堪一击。-->
<!--生活是自己的，自己都不求进取，凭什么让别人给你美好的未来？</p>-->
<!--标题标签--1-6  1级别最高-->
<!--自动闭合标签--不是成对的>
<meta> <link><input>
<!--主动闭合标签-->
<!--1、块级标签 2、内连标签（行内标签）-->
<!--块级标签：自己占一整行-->
<!--<h1>大师兄</h1>-->
<!--<h2>大师兄</h2>-->
<!--<h3>大师兄</h3>-->
<!--<h4>大师兄</h4>-->
<!--<h5>大师兄</h5>-->
<!--<h6>大师兄</h6>-->
<!--div相当于一个白板什么都没有一切要通过css进行装饰，通过css样式装饰后可以变成任意标签-->
<!--<div>最真实</div>-->
<!--内连标签和行内标签用多少占多少-->
<!--span是一个真正的白板标签，通过css样式装饰后可以变成任意标签-->
<!--<span>n你猜吧</span>-->

<!--文本框标签<input>-->
<!--文本框-->
<!--<input type="text" name=username">-->
<!--<input type="text" value="请输入用户名" name="username">-->
<!--&lt;!&ndash;文本框提示置灰显示&ndash;&gt;-->
<!--<input type="text" placeholder="请输入用户名">-->
<!--&lt;!&ndash;密码输入框&ndash;&gt;-->
<!--<input type="password" name="passwd">-->
<!--多选框-->
<!--<input type="checkbox"> -->
<!--&lt;!&ndash;默认勾选的复选框&ndash;&gt;-->
<!--<input type="checkbox" checked="checked">-->
<!--单选框-->
<!-- 单选框 radio name相同 勾选是互斥-->
<!--<input type="radio" name="sex" value="1" checked="checked"><span>男</span>-->
<!--<input type="radio"name="sex"value="2"><span>女</span>-->
<!--按钮 只是一个单纯的按钮，点击没反应,想提交数据必须结合js绑定事件（ajax）,value是按钮上的文字-->
<!--<input type="button" value="login">-->
<!-- 提交 提交表单需要用submit -->
<!-- reset 还原表单中填写的数据到默认 -->
<!--<input type="reset" value="重置">-->
<!--如果submit和form连用，直接请求form对应的action的目标的url-->
<!--<input type="submit" value="提交">-->
<!--表单标签 可以理解为载体相当于纸，input相当于在纸上的文字-->
<!--action就是提交到哪里 method就是请求的方法-->
<!--&lt;!&ndash;ajax提-->
<!--<form action="https://www.baidu.cn" method="post">-->
    <!--<input type="text" placeholder="请输入用户名">-->
    <!--<input type="text" placeholder="请输入密码">-->
    <!--<input type="button" value="登陆">-->
    <!--<input type="submit" value="提交">-->
    <!--<input type="reset" value="重置">-->
<!--</form>-->

<!--label和input联合运用，增加input的点击范围可直接点击文字就输入(输入框获取到焦点显示光标)
for:映射到input的id；id是一种选择器，在整个html是唯一的；class也是
-->
<!--<label for="i1">用户名</label><input type="text" id="i1">-->
<!--<label for="li1">用户名</label><input type="text"id="li1">-->
<!--多行文本textarea的文本内容需要写在两个标签之间没有value属性-->
<!--<textarea>特别的爱，给特别的你</textarea>-->

<!--下拉框-select,option里面是内容-->
<!-- select中size显示几个，mutiple表示按住ctrl可以多选-->
<!--option里面selected=selected默认选中的-->

<!--<select size="4" multiple="multiple"name="城市">-->
    <!--<option selected="selected" value="1">铁岭</option>-->
    <!--<option value="2">鸡西</option>-->
    <!--<option value="3">大连</option>-->
    <!--<option value="4">沈阳</option>-->
<!--</select>-->
<!--下拉分组 label后面是分组的名字-->
<!--<select>-->
    <!--<optgroup label="黑龙江">-->
        <!--<option selected="selected" value="1">铁岭</option>-->
        <!--<option value="2">鸡西</option>-->
        <!--<option value="3">大连</option>-->
        <!--<option value="4">沈阳</option>-->
    <!--</optgroup>-->
        <!--<optgroup label="山东">-->
        <!--<option value="1">青岛</option>-->
        <!--<option value="2">烟台</option>-->
        <!--<option value="3">日照</option>-->
        <!--<option value="4">济南</option>-->
    <!--</optgroup>-->
<!--</select>-->

<!--超链接标签 target属性为以什么方式跳转-->
<!--_blank新tab页跳转，去掉a标签的下划线通过属性style="text-decoration:none"-->
<!--<a href="https://www.baidu.com" target="_blank" style="text-decoration:none">百度</a>-->
<!--锚点  如：#test-p   -->
<!--a标签还可以做锚点，通过id进行对应关系的映射 锚点可以作为跳转 -->
<!--<div style="height: 1000px" id="li"> </div>-->
<!--<a href="#li">回到顶部</a>-->
<!--特殊符号&nbsp代表空格-->
<!--&gt；代表大于号，&lt；代表小于号-->
<!--<a href="s.html">大&nbsp&nbsp&nbsp&nbsp 师        兄</a>-->

<!--图案片标签，src是图片的位置；alt图片加载失败后显示alt的文案，
title鼠标悬浮在图片上显示的文字-->
<!--<img src="dsx.jpg" alt="测试" title="孩子和狗">-->
<!--列表标签。形式的标签-->
<!--<ul>-->
    <!--<li>123</li>-->
    <!--<li>123</li>-->
<!--</ul>-->
<!--列表标签数字形式的标签-->
<!--<ol>-->
    <!--<li>abc</li>-->
    <!--<li>abc</li>-->
<!--</ol>-->
<!--分层列表dl ,其中dt外层，dd内层-->
<!--<dl>-->
    <!--<dt>山东</dt>-->
    <!--<dd>青岛</dd>-->
    <!--<dd>日照</dd>-->
    <!--<dt>北京</dt>-->
    <!--<dd>怀柔</dd>-->
    <!--<dd>顺义</dd>-->
<!--</dl>-->

<！--table 表格标签 thead：表头 th：表头行 tbody：内容 tr：行 td：列 boder：表格的边框 coslpan：td占几列 rowspan：tr占几列-->
<table border="1">
    <thead>
         <tr>
             <th>ID</th>
             <th>课程</th>
             <th>姓名</th>
             <th>年龄</th>
             <th colspan="2">操作</th>
         </tr>
    </thead>
     <tbody>
           <tr>
                <td>1</td>
                <td rowspan="3">计算机</td>
                <td>阿霞</td>
                <td rowspan="3">18</td>
                <td>编辑</td>
                <td>删除</td>
           </tr>
            <tr>
                 <td>2</td>
                 <td>阿磊</td>
                 <td>编辑</td>
                 <td>删除</td>
            </tr>
             <tr>
                  <td>3</td>
                  <td>阿西</td>
                  <td>编辑</td>
                  <td>删除</td>
             </tr>

     </tbody>
</table>
</body>
</html>

HTM基础之HTML标签的更多相关文章

  1. iOS系列 基础篇 06 标签和按钮 (Label & Button)

    iOS系列 基础篇 06 标签和按钮 (Label & Button) 目录: 标签控件 按钮控件 小结 标签和按钮是两个常用的控件,下面咱们逐一学习. 1. 标签控件 使用Single Vi ...

  2. Bootstrap<基础二十> 标签

    Bootstrap 标签.标签可用于计数.提示或页面上其他的标记显示.使用 class .label 来显示标签,如下面的实例所示: <!DOCTYPE html> <html> ...

  3. HTML基础及一般标签

    HTML        内容 Hyper Text Markup Language  超文本标记语言(包含文本.表格.图片.声音.视频等,同时也是文档) HTML 元素指的是从开始标签(start t ...

  4. HTML基础：<a>标签 编写个人收藏夹

    编写个人收藏夹 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  5. htm基础知识，css的链入以及标签分类。

    <!DocTYPE>  DOC--Document 文档  TYPE  类型  文档类型 告诉浏览器这是什么文件 单标签: meta  设置   charset  设置编码 双标签: 开始 ...

  6. 前端基础：HTML标签(上)

    前端基础:THML HTML初始 1.web服务本质 import socket sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) so ...

  7. JavaScript基础插曲—获取标签，插入元素，操作样式

    Js基础 1:document.write() 这个是动态创建元素内容,利用js.这个可以利用js来创建元素,文本,标签等,document.write()与document.writeln()的区别 ...

  8. HTML----网页基础和基本标签

    网页分类: 1.静态网页:所有内容全写死,都写在源代码中,若修改必须修改源代码,后缀为.html或htm 2.动态网页:内容大部分来自于数据库,可以修改,后缀为.aspx(c#).jsp(java). ...

  9. 49、html基础认识&常用标签（1）

    从今天期我们进入前端的学习,先学习html,没有任何需要逻辑需要烧脑,只需要记忆.练习.练习.练习. 一.HTML初识 1.web服务本质 import socket def main(): sock ...

随机推荐

  1. Spring Boot自动配置总结

    Spring Boot项目启动的时候加载主配置类,并开启了自动配置功能.(Spring Boot的自动配置功能是Spring Boot的一大重要且突出的特性) 那么我们需要了解下它: 如何加载主配置类 ...

  2. laravel-admin利用ModelTree实现对分类信息的管理

    根据laravel的基本操作步骤依次完成如下操作:主要是参考laravel-admin内置的Menu菜单管理的功能,利用ModelTree实现业务中的Tree数据管理. 1. 创建模型 php art ...

  3. Qualcomm_Mobile_OpenCL.pdf 翻译-8-kernel性能优化

    这章将会说明一些kernel优化的小技巧. 8.1 kernel合并或者拆分 一个复杂的应用程序可能包含很多步骤.对于OpenCL的移植性和优化,可能会问需要开发有多少个kernel.这个问题很难回答 ...

  4. 【转】在Linux下写一个简单的驱动程序

    转自:https://www.cnblogs.com/amanlikethis/p/4914510.html 本文首先描述了一个可以实际测试运行的驱动实例,然后由此去讨论Linux下驱动模板的要素,以 ...

  5. web渗透系列--信息收集

    信息收集对于渗透测试前期来说是非常重要的,因为只有我们掌握了目标网站或目标主机足够多的信息之后,我们才能更好地对其进行漏洞检测.正所谓,知己知彼百战百胜! 信息收集的方式可以分为两种:主动和被动. 主 ...

  6. spring事务配置，声明式事务管理和基于@Transactional注解的使用（转载）

    原文地址:http://blog.csdn.net/bao19901210/article/details/41724355 事务管理对于企业应用来说是至关重要的,好使出现异常情况,它也可以保证数据的 ...

  7. javaIO--File类

    IO:File类 位于java.io包下,用于表示与平台无关的文件和目录File类可以用来操作文件和目录,但是不能用来访问文件的内容. 1.构造方法 File(String pathName)通过将给 ...

  8. eclipse修改代码后都需要clean的解决办法

    问题描述: 用STS(类似于Eclipse)正在开发一个JavaWeb项目,但不知怎么的有一天,修改完Java代码,点击运行Tomcat,发现根本没有修改.刚刚开始的时候,因为一开始没找到原因而且工期 ...

  9. HDU-1083-Courses（最大匹配）

    链接: https://vjudge.net/problem/HDU-1083#author=HUCM201732 题意: 题目大意: 一共有N个学生跟P门课程,一个学生可以任意选一 门或多门课,问是 ...

  10. 深入理解vue 修饰符sync

    [ vue sync修饰符示例] 在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 ...