【常见的块级标签】
标题标签<h1></h1>...<h6></h6>
水平线<hr/>
段落<p></p>
换行<br/>
引用<blockquote</blockquote>
预格式<pre></pre>
 
引用标签<blockquote></blockquote>
表明标签中的文字,为引用的内容,浏览器显示为等宽字体,并缩进。
cite属性,表明引用的来源,一般为引用的网址URL
<blockquote cite="http://www.yt4561761.com">
hahahahahahah
</blockquote>
 
预格式标签<pre></pre>
浏览器解析时,会按照等宽字体显示,并保留标签内的空格和回车。
常用于保留代码格式。
<pre>yt4561761
yt4561761
yt4561761
</pre>
 
【有序列表ol order list】
<ol>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
</ol>
 
【无序列表ul unorder list】
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
 
【定义描述列表】
<dl>
<dt>标题</dt>
<dd>描述项</dd>
</dl>
一般情况下,标题dt只有一项。描述项dd可以有多项。
浏览器显示时,标题顶格显示,dd缩进显示。
<dl>
<dt>这是dl列表的标题</dt>
<dd>描述项1</dd>
<dd>描述项2</dd>
<dd>描述项3</dd>
</dl>
 
【图片组合标签figure】
1-<figure></figure>标签有两个子标签:
<img src="">:一幅图片,src表示图片的路径。
<figcaption></figcaption>:图片的标题
2-浏览器显示为:图片与标题上下排列,且整体向后缩进一个单位。
<figure>
<img src="img/icon.png" />
<figcaption>洪浩光伏
</figcaption>
</figure>
 
【分区标签div】
常配合CSS使用,为网页中最常用的分区标签,常用于网页布局使用
<div style="width:100%; height:100px; ">
这是div里面的文字
<h1>div里面的标题</h1>
</div>
 
【常见的行级标签】
span 文本
img 图片
em 强调
strong 强调
q 短引用
a 超链接
i 倾斜
b 加粗
small 缩小字体
u 下划线
 
span(文本):用于包裹一部分文字,进行特定样式的修改。
虞涛真<span style="color:red; font-size:36px;">酷</span>!!
 
em(强调):浏览器显示为倾斜。
strong(强调):浏览器显示为加粗。
 
【strong/em/i/b 标签的区别】
1-em和strong都表示强调,strong>em,strong和em标签均可多层嵌套,表示强调程度的递增。
2-em和i都能倾斜,Strong和b都能加粗。但是Strong和em多了一层强调的语义。可以帮助搜索 引擎快速抓取网站重点。且html5要求开发者尽可能实现代码的语义化。
<em>我真帅!!</em><br />
<strong>我真踏马帅!!</strong><br />
<i>我被i标签弄斜了</i><br />
<b>我被b标签弄粗了</b><br />
 
【q(短引用)】常用于一句话的引用,cite属性表示引用来源,浏览器解析时,会在内容的前后插入双引号。
<q cite="www.yt4561761.com">那你很棒哦</q>
 
small(缩小字体):small标签可多层嵌套,表示比默认字体小一号,直到小到最小号为止。
 
big(放大字体):亦可多层嵌套,直到最大。
但在最新规范中,small和big标签不提倡使用。提倡使用style="font-size:11px;"CSS样式替代。
<p>那你很<big><big><big><big><big>棒</big></big></big></big></big>哦!</p>
 
 
 
【table】
<table></table>表格框
<tr></tr>表格行
<td></td>表格列
<th></th> 表格标题列(将tr中的td替换为th),th默认加粗且在单元格居中显示。
 
【table的常用属性】
1-border:表格边框属性;当使用border="1"设置边框时,会在所有td以及table上嵌套边框,当border加大时,只有table框会加粗。
2-cellspacing:单元格与单元格之间的间隙。当cellspacing="0"时,单元格之间的间隙为0,但边框线并不会合并。
☆☆合并边框的写法style="border-collapse:collapse;" 使用边框合并时,无需设置cellspacing。
3-cellpadding:单元格内边距,单元格中文字与单元格边框之间的距离。
4-width/height:表格的宽高
5-align:设置表格在父容器中的对齐方式 ,left/居左 center/居中 right/居右
☆☆当表格使用align属性时,相当于使表格浮动,可能会导致表格后面的元素受表格浮动影响,导致布局错乱。
6-bgcolor:背景色
7-background:背景图,后接相对路径。背景图和背景色同时生效时,图会覆盖背景色
8-bordercolor:设置边框颜色
 
【<tr><td>标签的属性】
当表格属性与行列属性冲突时,以行列属性为优先,属性设置优先级td>tr>table。
1-width,height:给单个的行列设置宽高
2-bgcolor:背景色
3-align:设置单元格中的文字,在单元格中的水平对齐方式 left/center/right
4-valign:设置单元格中文字在格中的垂直对齐方式 top/center/bottom
5-nowrap:nowrap="nowrap"设置单元格文字行末不断行
 
【表格的跨行与跨列】
1-跨列:colspan,某单元格跨N列,则该单元格右边的N-1个td就不需要了。
2-跨行:rowspan,某单元格跨N行,则该单元格下边的N-1个td就不需要了。

HTML中常用的部分标签(一)的更多相关文章

  1. 齐博x1模板中常用的TP标签数据处理

    上图是比较常用的, 而下图是比较特殊的场合,比如幻灯片可能会用到 下图使用了TP的循环标签. 上图只使用了条件判断标签 上图不存在 val="xxx" 这个参数,所以会自动循环输出 ...

  2. struts框架中常用到的标签

    2.<constant name="struts.i18n.encoding" value="UTF-8" />     指定Web应用的默认编码集 ...

  3. HTML中常用的列表标签

  4. maven的pom.xml配置文件中常用的配置标签解析(2018-03-13)

    来自:https://www.cnblogs.com/Nick-Hu/p/7288198.html 拿过来记录下 <project xmlns="http://maven.apache ...

  5. Struts2页面开发中常用标签使用说明

    1. Struts2页面开发中常用标签使用说明 1.1.往action里传值的使用方式: <input name="userName" type="text&quo ...

  6. html中的一些常用的样式标签

    html中的一些常用的样式标签 <p>这里是文本,<mark>高亮</mark></p> <strong>加粗,加重语气</stron ...

  7. 04. H5标签有哪些?行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素和块级元素有什么区别?你工作中常用标签有什么?

    4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...

  8. HTML_body中常用的标签部分

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

  9. J2EE项目开发中常用到的公共方法

    在项目IDCM中涉及到多种工单,包括有:服务器|网络设备上下架工单.服务器|网络设备重启工单.服务器光纤网线更换工单.网络设备撤线布线工单.服务器|网络设备替换工单.服务器|网络设备RMA工单.通用原 ...

随机推荐

  1. windos环境python3.5安装 paramiko

    一.执行命令pip install paramiko,情况如下: C:\Users\ZFH>pip install paramikoCollecting paramiko  Downloadin ...

  2. Redit集群搭建-Sentinel模式搭建

    Redit集群搭建 学习了: Windows:http://blog.csdn.net/mrxiagc/article/details/52799081 Linux:https://www.cnblo ...

  3. Android 解决TextVIew载入自己定义字体慢的问题

    网上非常多自己定义字体样式的代码.都是告诉应该这样做: 在自己定义控件里写,可是这样写有问题,会随着界面里自己定义控件越多.Activity载入速度越慢,太多了easy造成内存泄露问题,由于你没创建一 ...

  4. [MST] Loading Data from the Server using lifecycle hook

    Let's stop hardcoding our initial state and fetch it from the server instead. In this lesson you wil ...

  5. google在线測试练习题3

    Problem The Latin alphabet contains 26 characters and telephones only have ten digits on the keypad. ...

  6. UItableView中的一些方法

    有关UITableView的知识点相对照较简单,一些简单的经常使用的方法有时间在写上: 以下的几个方法假设仅仅是展示UITableView是用不到的,须要对对应的区段进行操作的时候才会用到. 方法例如 ...

  7. CheckException和RuntimeException

    java文档中对RuntimeException的定义是: RuntimeException 是那些可能在 Java 虚拟机正常运行期间抛出的异常的超类. 可能在执行方法期间抛出但未被捕获的 Runt ...

  8. BZOJ 3639: Query on a tree VII LCT_set维护子树信息

    用 set 维护子树信息,细节较多. Code: #include <cstring> #include <cstdio> #include <algorithm> ...

  9. 除了 Microsoft Office我们还可以选择哪些软件?

    不同的人有不同爱好,不同的人有着不同的人生追求,软件公司也是如此.尽管 Microsoft Office 比之前要便宜得多了,但其按时间累计的完整的安装版本的价格仍然很高,基于对普通用户亦或手头比较紧 ...

  10. Linux学习-Ubuntu 18.04-安装图文教程

    Ubuntu(友帮拓.优般图.乌班图)是一个以桌面应用为主的开源GNU/Linux操作系统,Ubuntu 是基于Debian GNU/Linux,支持x86.amd64(即x64)和ppc架构,由全球 ...