常用符号:空格:&nbsp   大于号:&gt   小于号: &lt

块级标签:H标签(加大加粗),P标签(段落间有间距),DIV(白板)

行内标签:SPAN标签(白板)

 <!--标题标签-->
<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>
<!--白板标签:没有任何css样式-->
<!--内联标签真白板标签:有多大占多大-->
<span>这是span标签</span>
<span>这是span标签</span> <!--div标签:块级伪白板标签:无论多大占一行-->
<div>这是div标签</div>
<!--段落标签p:实现字与字之间的换行-->
<!--换行标签br:实现换行-->
 <!--input标签:输入框-->

 <!--name和value,是向后台以{key:value}向后台传递数据,name的值为key,value的值为value;-->
<input type="text" name="username" value="" placeholder="请输入用户名"> <!--密码框 type="password"-->
<input type="password" name="passwd"> <!--多选框 type="checkbox",checked 默认勾选-->
<input type="checkbox" name="" checked="checked"> <!--单选框 type="radio",name必须相同才会互斥,实现单选-->
<div>
<span>男</span><input type="radio" name="sex">
</div>
<div>
<span>女</span><input type="radio" name="sex">
</div> <!--form表单标签,表单提交会刷新页面,ajax不会刷新页面-->
<!--action请求路径,method请求方式-->
<form action="s.html" method="post">
<input type="text" value="uuytr">
<!--没有任何外加操作-->
<input type="button" value="增加">
<!--submit与form表单连用,会提交form表单中的数据-->
<input type="submit" value="提交">
<!--必须与from表单连用才能有重置的功能-->
<input type="reset">
</form> <!--label标签与input连用,通过for属性 映射到input的id属性,这样点击用户名,就可以获取输入框的焦点-->
<label for="i1">用户名:</label>
<!--id属性是选择器-->
<input id="i1" placeholder="请输入用户名" name="username" type="text">
 <!--多行文本-->
<textarea name="content">这是textarea的内容</textarea> <!--select 下拉框标签,在option上增加 selected 为默认选择-->
<!--要实现按住ctrl 可以多选的效果,需要使用multiple-->
<select name="city" size="1" multiple="multiple">
<option value="1">黑龙江</option>
selected="selected" 默认选中第二个
<option value="2" selected="selected">河北</option>
<option value="3">河南</option>
</select> <!--选黑龙江后,再选第二级-->
<select size="7" multiple="multiple">
<optgroup label="黑龙江">
<option>牡丹江</option>
<option>哈尔滨</option>
<option>鸡西</option>
</optgroup>
<optgroup label="河北">
<option>石家庄</option>
<option>保定</option>
<option>涞水</option>
</optgroup>
</select>
 <!--a标签:超链接-->
<a href="https://www.baidu.com/" target="_blank" style="text-decoration:none">百度一下</a> <!--image标签:-->
<!--alt属性:当图片加载失败时所展示的文案-->
<img src="logo.jpg" alt="这是logo" title="logo">
 <!--列表标签-->
<ul>
<li>用例名称</li>
<li>用例方法</li>
<li>返回参数</li>
</ul> <!--数字列表-->
<ol>
<li>用例名称</li>
<li>用例方法</li>
<li>返回参数</li>
</ol> <!--分层列表-->
<dl>
<dt>黑龙江</dt>
<dd>牡丹江</dd>
</dl>
<dl>
<dt>河北</dt>
<dd>保定</dd>
</dl>
 <!--表格标签-->
<!--thead:表头 th:表头行 tbody:内容 tr:行 td:列 boder:表格的边框
coslpan:td占几列 rowspan:tr占几列-->
<table border="1">
<thead>
<tr>
<th>id</th>
<th>caseName</th>
<th>method</th>
<th colspan="2">操作</th> <!--列合并-->
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="3">抽奖</td> <!--行合并-->
<td rowspan="3">post</td>
<td>编辑</td>
<td>删除</td>
</tr>
<tr>
<td>2</td>
<td>编辑</td>
<td>删除</td>
</tr>
<tr>
<td>3</td>
<td>编辑</td>
<td>删除</td>
</tr>
</tbody>
</table>

HTML_body标签的更多相关文章

  1. [19/05/17-星期五] HTML_body标签(内嵌标签)和框架标签

    一.内嵌标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!- ...

  2. [19/05/16-星期四] HTML_body标签(表格标签)

    一.概念 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  3. [19/05/15-星期三] HTML_body标签(超链接标签和锚点)

    一.超链接标签 <html> <head> <meta charset="UTF-8"> <title>04 body超链接标签学习 ...

  4. [19/05/14-星期二] HTML_body标签(列表标签和图片标签)

    一.列表标签 <!-- 快捷键 1.<meta charset="UTF-8"/> 用m6可直接写出 2.复制当前1行到下一行 ctrl+shift+R --&g ...

  5. HTML_body中常用的标签部分

    meta: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t ...

  6. a标签点击跳转失效--IE6、7的奇葩bug

    一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...

  7. IE6、7下html标签间存在空白符,导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  8. 百度MIP页规范详解 —— canonical标签

    百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...

  9. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

随机推荐

  1. 2. Oracle体系结构

    一. Oracle体系结构图 体系结构图如下: 体系结构图看似简单:其中很有玄机.它对Oracle来讲:相当于武功中的心法.配合体系结构来学Oracle:能起到事半功倍的效果.我们平时遇到Oracle ...

  2. QT之 Hello World

    下载……   我下载的Qt creater 版本为4.2.1,Qt版本为5.8.0 打开QT Creater 1. 新建项目 New Project -> Application -> Q ...

  3. C++空类

    class Empty { public: Empty(); // 缺省构造函数 Empty( const Empty& ); // 拷贝构造函数 ~Empty(); // 析构函数 Empt ...

  4. 【大数据系列】FileSystem Shell官方文档翻译

    appendToFile cat checksum chgrp chmod chown copyFromLocal copyToLocal count cp createSnapshot delete ...

  5. 如何修改 VIM 制表符的空格数?

     想修改一下编辑器vi里的制表符(Tab)的空格数.因为它默认的太长(默认是8个空格).  在网上搜到了这篇文章http://my.oschina.net/captaintheron/blog/515 ...

  6. SharpGL学习笔记(五) 视口变换

    视口变换主是将视景体内投影的物体显示到二维的视口平面上. 在计算机图形学中,它的定义是将经过几何变换, 投影变换和裁剪变换后的物体显示于屏幕指定区域内. 前面我们讨论过的透视投影, 正射投影, 它们都 ...

  7. C# 程序自动重启的解决方法

    很多时候,我们有这样的场景,需要让程序自动重启,有很多种方法,比如用微软自带提供的方法,或者自己开辟新的线程重新调用.下面简单介绍两种方法. 方法一. 使用方法Application.Restart( ...

  8. tcp连接的状态变迁以及如何调整tcp连接中处于time_wait的时间

    一.状态变迁图 二.time_wait状态 针对time_wait和close_wait有个简单的描述帮助理解: Due to the way TCP/IP works, connections ca ...

  9. 如何启动、关闭和设置ubuntu防火墙

    如何启动.关闭和设置ubuntu防火墙 引自:http://www.cnblogs.com/jiangyao/archive/2010/05/19/1738909.html 就这句话就够了,下面的可以 ...

  10. Telnet是什么意思又是什么协议 Telnet有什么作用及功能

    Telnet是teletype network的缩写,专业的说,Telnet是Internet上远程登录的一种程序:它可以让您的电脑通过网络登录到网络另一端的电脑上,甚至还可以存取那台电脑上的文件. ...