【常见的块级标签】
标题标签<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. UVA 11020 Efficient Solutions+multiset的应用

    题目链接:点击进入 首先来讲,非常easy看到我们事实上仅仅要维护优势人群的集合:假设增加一个新的人,我们首先看一下优势人群中是否有人会让这个人失去优势,假设没有,则将这个人插入集合中.但要注意到这个 ...

  2. ios开发经常使用到的第三方库

    由于iOS SDK相对照较底层,所以开发人员就得受累多做一些体力活.只是幸运的是,有非常多第三方的类库能够用来简化非常多不必要的工作.经过作者团队的谨慎讨论.他们 评选出了10款可以极大提高iOS开发 ...

  3. android自己定义圆盘时钟

    自己定义圆盘时钟的大概流程:由于圆盘时钟的圆盘是不须要动的,所以不必要加在自己定义的view里面,在view里面仅仅须要绘制秒针和分针时针并控其转动就可以. 下面就是自己定义view的主要代码: pa ...

  4. 操作指定文件格式的10个Perl CPAN模块

    在Perl开发中,非常可能会碰到一些不同格式的文件--XML.PDF.CSV及RSS文件等,和一些不同的二进制数据格式.Perl应用程序须要操作这些文件,对它们进行读写. 此时.能够求助于全面Perl ...

  5. html5播放m3u8视频,web端看直播

    https://github.com/jiqing9006/hLive <!DOCTYPE html> <html> <head> <meta charset ...

  6. IPS

    转自:http://www.ithome.com.tw/node/79293 企業中網路環境的防護,通常都是先有防火牆,再搭配IPS.但是,實際上買得起IPS防護的企業有限,這是因為IPS的價格很昂貴 ...

  7. 85.Mongoose指南 - Schema

    转自:https://www.bbsmax.com/A/pRdBnKpPdn/ 定义schema 用mongoose的第一件事情就应该是定义schema. schema是什么呢? 它类似于关系数据库的 ...

  8. 8.queue

    #include <iostream> #include <stack> #include <algorithm> #include <list> #i ...

  9. 【DNN 系列】 添加模块后不显示

    添加模块后不显示分为几个原因 1.检查.dnn文件是否填写正确,要和对应的页面文件对应上 我有一步是这这个名称地方我填上了 就不显示了.这里需要注意,VIEW 的名城是不需要写的 2.重写文件 实体操 ...

  10. POJ 1144 Network【割顶】

    学习的这一篇:https://www.byvoid.com/blog/biconnect 割顶:对于无向图G,如果删除某个点u后,连通分量数目增加,称u为图的关节点或者割顶 u为割顶的条件: (1)u ...