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. JS实现hasClass addClass removeClass

    // 判断class有无 function hasClass(ele, cls) { if (ele) { cls = cls || '' if (cls.replace(/\s/g, '').len ...

  2. 【leetcode】 463. Island Perimeter

    题目: 以二维数组形式表示坐标岛屿,求边长. 例子: [[0,1,0,0], [1,1,1,0], [0,1,0,0], [1,1,0,0]] Answer: 16 Explanation: The ...

  3. shiro细节、默认的过滤器、匹配模式和顺序

    部分细节 [urls] 部分的配置,其格式是:“url=拦截器[参数],拦截器[参数]”: 如果当前请求的url匹配[urls] 部分的某个url模式,将会执行其配置的拦截器. anon(anonym ...

  4. 一道有关#define的题

    题目是:查看以下代码,问结果是什么? 结果是打印出“array:16345678910”吗? #include "stdafx.h" #include <iostream&g ...

  5. Ubuntu换阿里云源

    sudo -s cd /etc/apt gedit source.list deb http://mirrors.aliyun.com/ubuntu/ bionic main restricted u ...

  6. 将.py文件转换成.exe文件

    1.安装pyinstaller模块 pip install pyinstaller 2.打开python目录下的scripts文件夹 cmd下,使用pyinstaller -F test.py,运行后 ...

  7. Java 11必掌握的8大特性，完美代码信手拈来

    [MyEclipse CI 2019.4.0安装包下载] 美国时间 09 月 25 日,Oralce正式发布了Java 11,这是据Java 8以后支持的首个长期版本.从官方发布的支持路线图表看出,J ...

  8. C++ 遍历循环表达示 auto, auto&, auto&&

    for(auto x : range) 创建拷贝,无法修改range中的元素 for(auto& x : range) 可以修改range中的元素,但一般用以下这种 for(auto& ...

  9. c和java中各种数据类型所占字节

      c java char 1 2 short 2 int 4 long 4 8 float 4 double 8

  10. Elasticsearch：aggregation介绍

    聚合(aggregation)功能集是整个Elasticsearch产品中最令人兴奋和有益的功能之一,主要是因为它提供了一个非常有吸引力对之前的facets的替代. 在本教程中,我们将解释Elasti ...