HTML5常用标签及特殊字符表

 

*http://html5doctor.com/nav
*http://html5doctor.com/article
*http://html5doctor.com/section
*http://html5doctor.com/aside
http://html5doctor.com/div
http://html5doctor.com/figure
http://html5doctor.com/outline
http://html5doctor.com/semantics


 

p 和 span 的理解

p标签是指一个段落,而且默认是一个块级元素,
span是一个行内元素的代表,没有什么意思,一般可以放文字等行内元素
<p>这是一段简介内容这是一段 <span class="red">简介</span> 内容这是一段简介内容这是一</p>

 


 列表

1、无序列表(列表标签中使用最多的一种,非常重要):unordered list

制作导航条、商品列表、新闻列表等
有序列表能做的,无序列表都能完成
#1、作用:
制作导航条、商品列表、新闻列表等
#2、组合使用ul>li
<ul>
<li>秒杀</li>
<li>优惠券</li>
<li>PLUS会员</li>
<li>闪购</li>
<li>拍卖</li>
<li>京东服饰</li>
<li>京东超市</li>
<li>生鲜</li>
<li>全球购</li>
<li>京东金融</li>
</ul>
#3、ul标签的属性type(这属于列表的样式,所以了解即可)
type:列表标识的类型
disc:实心圆(默认值)
circle:空心圆
square:实心矩形
none:不显示标识
可以通过css直接去掉小圆点
<style type="text/css">
ul {
list-style: none;
}
</style>
#4、注意
ul与li是组合标签应该一起出现,并且ul的子标签只应该是li,而li的子标签则可以是任意其他标签
无序列表(列表标签中使用最多的一种,非常重要):unordered list

2、有序列表(极少使用)

 <h1>智商排名</h1>
<ol>
<li>Egon</li>
<li>刘清正</li>
<li>武佩奇</li>
<li>alex</li>
<li>元昊</li>
</ol>
<!--有序列表能干的事,完全可以用无序列表取代-->
<h1>智商排名</h1>
<ul style="list-style: none">
<li>1. Egon</li>
<li>2. 刘清正</li>
<li>3. 武佩奇</li>
<li>4. alex</li>
<li>5. 元昊</li>
</ul>
有序列表(极少使用)

3、自定义列表(也会经常使用)

#1、作用分析
选择用什么标签的唯一标准,是看文本的实际语义,而不是看长什么样子
无序列表:内容是并列的,没有先后顺序
有序列表:内容是有先后顺序的
自定义列表:对一个题目进行解释说明的时候,用自定义列表,可以做网站尾部相关信息,网易注册界面的输入框
#2、自定义列表也是一个组合标签:dl>dt dd
dl:defination list,自定义列表
dt:defination title,自定义标题
dd:defination description,自定义描述
<dl>
<dt>自定义标题1<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>
<dt>自定义标题2<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>
<dt>自定义标题3<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>
</dl>
#3、注意: 3.1 dl>dt dd应该组合出现,dl中只应该存放dt和dd,而可以在dt和dd中添加任意其他标签 3.2 一个dt可以可以没有对应的dd,也可以有多个,但建议一个dt对应一个dd
3、自定义列表(也会经常使用)

 


 

 table标签

语义:标记一段数据为表格

#1、作用
表格标签是一种数据的展现形式,当数据量非常大的时候,使用表格的形式来展示被认为是最清晰的
#2、格式
<table>
<tr>
<td></td>
</tr>
</table>
tr代表表格的一行数据
td表一行中的一个单元格
#3、注意点:
表格标签有一个边框属性,这个属性决定了边框的宽度。默认情况下这个属性的值为0,所以看不到边框 
#1、宽度和高度
可以给table和td设置width和height属性
1.1 默认情况下表格的宽高是按照内容的尺寸来调整的,也可以通过给table标签设置widht和height来手动指定表格的宽高
1.2 如果给td标签设置width和height属性,会修改当前单元格的宽度和高度,只要不超过table的宽高,则不会影响整个表格的宽度和高度
#2、水平对齐和垂直对齐
水平对齐align可以给table、tr、td标签设置
垂直对齐valign只能给tr、td标签设置
========水平对齐===========
取值
align=“left”
align=“center”
align=“right”
2.1 给table标签设置水平对齐,可以让表格在水平方向上对齐
强调:table只能设置水平方向
2.2 给tr设置水平对齐,可以控制当前行所有单元格内容都水平对齐
2.3 给td设置水平对齐,可以控制当前单元格内容水平对齐,tr与td冲突的情况下,以td为准
========垂直对齐===========
取值
valign=“top”
valign=“center”
valign=“bottom”
2.4 给tr设置垂直对齐可以让当前行所有单元格内容都垂直对齐
2.5 给td设置垂直对齐可以让当前单元格内容垂直对齐
#3、外边距和内边距
只能给table设置
3.1 外边距:单元格与单元格之间的间隔,cellspacing="3px",默认值为2px
3.2 内边距:单元格边框与文字之间的距离:cellpadding="200px"
表格属性
#1、方式一
在标签中,想通过指定外边距为0来实现细线表格是不靠谱的,其实他是将2条线合成了一条线.所以看上去很不舒服,如下实现
<table width="200px" height="200px" bgcolor="black" border="1" cellspacing="0px">
<tr bgcolor="white">
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr bgcolor="white" >
<td>Egon</td>
<td>male</td>
<td>18</td>
</tr>
<tr bgcolor="white">
<td>ALex</td>
<td>male</td>
<td>73</td>
</tr>
<tr bgcolor="white">
<td>Wxx</td>
<td>female</td>
<td>84</td>
</tr>
</table>
#2、方式二(推荐使用)
细线表格的制作方式:
1、给table标签设置bgcolor
2、给tr标签设置bgcolor
3、给table标签设置cellspacing="1px"
注意:
table、tr、td标签都支持bgcolor属性
<table width="200px" height="200px" bgcolor="black" cellspacing="1px">
<tr bgcolor="white">
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr bgcolor="white" >
<td>Egon</td>
<td>male</td>
<td>18</td>
</tr>
<tr bgcolor="white">
<td>ALex</td>
<td>male</td>
<td>73</td>
</tr>
<tr bgcolor="white">
<td>Wxx</td>
<td>female</td>
<td>84</td>
</tr>
</table>
两种方式实现细线表格
#1、水平向上的单元格colspan
可以给td标签添加一个colspan属性,来把水平方向的单元格当做多个单元格来看待
<td colspan="2"></td>
#2、垂直向上的单元格rowspan
可以给td标签设置一个rowspan属性,来把垂直方向的的单元格当成多个去看待
#注意注意注意:
1、由于把某一个单元格当作了多个单元格来看待,所以就会多出一些单元格,所以需要删掉一些单元格
2、一定要记住,单元格合并永远是向后或者向下合并,而不能向前或向上合并
单元格合并

from标签

在form内还可以添加一种标签

<fieldset>添加边框
<legend>注册页面</legend>
表单控件......
</fieldset>

补充 :

点击radio后的文字选中

<p>性别
<input type="radio" name="gender" id="ml"><label for="ml"></label>
<input type="radio" name="gender" id="fl"><label for="fl"></label>
<input type="radio" name="gender" id="bm"  checked="checked"><label for="bm">保密</label>
</p>

 

 


 

特殊字符

特殊符号命名实体十进制编码特殊符号命名实体十进制编码特殊符号命名实体十进制编码
Α&Alpha;&#913;Β&Beta;&#914;Γ&Gamma;&#915;
Δ&Delta;&#916;Ε&Epsilon;&#917;Ζ&Zeta;&#918;
Η&Eta;&#919;Θ&Theta;&#920;Ι&Iota;&#921;
Κ&Kappa;&#922;Λ&Lambda;&#923;Μ&Mu;&#924;
Ν&Nu;&#925;Ξ&Xi;&#926;Ο&Omicron;&#927;
Π&Pi;&#928;Ρ&Rho;&#929;Σ&Sigma;&#931;
Τ&Tau;&#932;Υ&Upsilon;&#933;Φ&Phi;&#934;
Χ&Chi;&#935;Ψ&Psi;&#936;Ω&Omega;&#937;
α&alpha;&#945;β&beta;&#946;γ&gamma;&#947;
δ&delta;&#948;ε&epsilon;&#949;ζ&zeta;&#950;
η&eta;&#951;θ&theta;&#952;ι&iota;&#953;
κ&kappa;&#954;λ&lambda;&#955;μ&mu;&#956;
ν&nu;&#957;ξ&xi;&#958;ο&omicron;&#959;
π&pi;&#960;ρ&rho;&#961;ς&sigmaf;&#962;
σ&sigma;&#963;τ&tau;&#964;υ&upsilon;&#965;
φ&phi;&#966;χ&chi;&#967;ψ&psi;&#968;
ω&omega;&#969;ϑ&thetasym;&#977;ϒ&upsih;&#978;
ϖ&piv;&#982;&bull;&#8226;&hellip;&#8230;
&prime;&#8242;&Prime;&#8243;&oline;&#8254;
&frasl;&#8260;&weierp;&#8472;&image;&#8465;
&real;&#8476;&trade;&#8482;&alefsym;&#8501;
&larr;&#8592;&uarr;&#8593;&rarr;&#8594;
&darr;&#8595;&harr;&#8596;&crarr;&#8629;
&lArr;&#8656;&uArr;&#8657;&rArr;&#8658;
&dArr;&#8659;&hArr;&#8660;&forall;&#8704;
&part;&#8706;&exist;&#8707;&empty;&#8709;
&nabla;&#8711;&isin;&#8712;&notin;&#8713;
&ni;&#8715;&prod;&#8719;&sum;&#8722;
&minus;&#8722;&lowast;&#8727;&radic;&#8730;
&prop;&#8733;&infin;&#8734;&ang;&#8736;
&and;&#8869;&or;&#8870;&cap;&#8745;
&cup;&#8746;&int;&#8747;&there4;&#8756;
&sim;&#8764;&cong;&#8773;&asymp;&#8773;
&ne;&#8800;&equiv;&#8801;&le;&#8804;
&ge;&#8805;&sub;&#8834;&sup;&#8835;
&nsub;&#8836;&sube;&#8838;&supe;&#8839;
&oplus;&#8853;&otimes;&#8855;&perp;&#8869;
&sdot;&#8901;&lceil;&#8968;&rceil;&#8969;
&lfloor;&#8970;&rfloor;&#8971;&loz;&#9674;
&spades;&#9824;&clubs;&#9827;&hearts;&#9829;
&diams;&#9830; &nbsp;&#160;¡&iexcl;&#161;
¢&cent;&#162;£&pound;&#163;¤&curren;&#164;
¥&yen;&#165;¦&brvbar;&#166;§&sect;&#167;
¨&uml;&#168;©&copy;&#169;ª&ordf;&#170;
«&laquo;&#171;¬&not;&#172; &shy;&#173;
®&reg;&#174;¯&macr;&#175;°&deg;&#176;
±&plusmn;&#177;²&sup2;&#178;³&sup3;&#179;
´&acute;&#180;µ&micro;&#181"&quot;&#34;
<&lt;&#60;>&gt;&#62;' &#39;

更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/363109.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【转载】使用Imaging组件加载GIF动画

Mobil手机加载GIF动态图像的方法有两种&#xff0c;一个就是使用GIF89a标准算法&#xff0c;另一个就是使用SDK自带的Imaging组件&#xff0c;这两种方法是很典型的手机图像处理技术的实践。使用Imaging组件加载GIF比使用标准算法处理高效的多&#xff0c;特别是在处理真彩GIF动…

在Java中获取素数的无限列表

一个常见的问题是确定数字的素因式分解。 蛮力方法是审判部门&#xff08; 维基百科 &#xff0c; 可汗学院 &#xff09;&#xff0c;但是如果必须考虑多个数字&#xff0c;这需要大量的浪费工作。 一种广泛使用的解决方案是Eratosthenes筛&#xff08; 维基百科 &#xff0c…

CF888G XOR-MST trie,贪心

CF888G XOR-MST 链接 CF888G 思路 trie上贪心&#xff0c;先左右两边连边&#xff0c;再用一条边的代价连起左右两颗树。因为内部的边一定比跨两棵树的边权笑&#xff0c;显然是对的。 代码自己瞎yy的。启发式合并 代码 #include <bits/stdc.h> #define ll long long usi…

【处理手记】Configuration system failed to initialize异常的另类原因

有个c#程序在某台电脑上&#xff0c;执行某个操作时&#xff0c;总是会报如图错误&#xff1a; 度娘一番&#xff0c;发现市面上常见的原因是配置文件中的特定节点的位置不对&#xff0c;或者配置文件损坏等等&#xff0c;而这个程序根本没有使用内置的配置文件方案&#xff0c…

学习《Building Applications with FME Objects》 之四 从数据集读取要素

FMEOReader可以访问任何支持格式的数据。 FMEOReader返回两类要素&#xff1a;schema&#xff08;模式&#xff09;要素和数据要素&#xff0c;模式要素用于描述数据集模型。每种支持的格式都有一个模式&#xff0c;一个模式要素是一类要素的数据模型&#xff0c;模式要素描述属…

使用Zapier将应用程序与Neo4j集成

最近&#xff0c;我被带往Zapier &#xff0c;以便在系统之间完成一些轻量级的集成&#xff0c;以快速地进行概念验证。 最初是持怀疑态度的&#xff0c;我发现它确实可以节省时间&#xff0c;并将您从未集成过的系统所有部分捆绑在一起。 而且&#xff0c;这是人们集成他们使…

手机闪屏

表示&#xff0c;本人买了一个华为手机&#xff0c;采用三四个月&#xff0c;就开始闪屏了&#xff0c;手机一划屏就闪&#xff0c;开始的时候表示不能理解&#xff0c;不是手机一般是1年才换吗&#xff1f;突然遇到我也是纠结。 于是乎&#xff0c;浏览了些百度上面的解决方式…

工程能力之C4模型

概述 刚在InfoQ上看到一篇介绍C4Model的文章,觉得这个模型设计的很赞,很有指导意义,做个简单的记录. Why,为什么需要架构图? ThoughtWorks中国 文章中有几句话我觉得很有道理,这里直接摘抄. “纸上的不是架构&#xff0c;每个人脑子里的才是” ; “那些精妙的方案之所以落不了…

[silverlight基础]仿文字连接跑马灯效果-高手绕道

运行效果如下:分析示意图&#xff1a;代码:1<Canvas x:Name"a"Background"AliceBlue"MouseEnter"a_MouseEnter"MouseLeave"a_MouseLeave"Cursor"Hand">2<Canvas.Clip>3<RectangleGeometry RadiusX"0&qu…

Hibernate脏检查的剖析

介绍 持久性上下文使实体状态转换进入队列&#xff0c;该实体状态转换在刷新后转换为数据库语句。 对于托管实体&#xff0c;Hibernate可以代表我们自动检测传入的更改并安排SQL UPDATE。 这种机制称为自动脏检查 。 默认的脏检查策略 默认情况下&#xff0c;Hibernate检查所有…

http GET 和 POST 请求的优缺点、区别以及误区

原文章&#xff1a;https://blog.csdn.net/qq_28483283/article/details/80207674 请优先参考原文章 Get和Post在面试中一般都会问到&#xff0c;一般的区别&#xff1a; &#xff08;1&#xff09;post更安全&#xff08;不会作为url的一部分&#xff0c;不会被缓存、保存在服…

软件工程第二次作业-VSTS单元测试

一、选择开发工具 开发工具选择 Visual studio 2017 社区版&#xff0c;开发语言为C 由于之前已经安装完毕&#xff0c;所以不上传安装过程&#xff0c;主界面如下&#xff1a; 二、练习自动单元测试 使用的测试工具是VSTS&#xff0c;具体步骤如下&#xff1a; 1.编写一个判断…

随便写写(8)

凌晨两点了&#xff0c;还在捣鼓虚拟机&#xff0c;教师节老师们吃不上饭&#xff0c;罪过可就大了。远程有点慢&#xff0c;还遇到个小问题&#xff0c;.netfx 3.5几次都没装上&#xff0c;看了下日志&#xff0c;好像是ghost里的.netfx 2.0有问题&#xff0c;想卸载之&#x…

React后台管理系统-登录页面

登录页面 <div className"col-md-4 col-md-offset-4"> <div className"panel panel-default login-panel"> <div className"panel-heading">欢迎登录 - MMALL管理系统</div> <div className"panel-body"&g…

识别JVM –比预期的要复杂

在Plumbr&#xff0c;我们花了最后一个月的时间来为将来的重大改进奠定基础。 此类构件之一是为JVM添加唯一标识符&#xff0c;以便将来自同一JVM的所有会话链接在一起。 虽然一开始看起来似乎很琐碎的任务&#xff0c;但是当查看JVM捆绑的jps命令的输出时&#xff0c;围绕该问…

随记3

查看本机ip&#xff1a;ifconfig | grep "inet " | grep -v 127.0.0.1去两端空格&#xff1a;rowrow.strip(\t)替换\n \r \t 为空&#xff1a;row row.replace(\r,).replace(\n,).replace(\t,’)字符串长度&#xff1a;aa ‘afebb’ print(len(aa))列表 List列表…

求一架构 : 保留历史数据

最近做一个学校管理系统&#xff0c;当中遇到一个比较麻烦的问题“保留历史数据”&#xff0c;很疑惑&#xff0c;说出来大家讨论下&#xff0c;相信很多人也遇到同样的问题。校方提出需求如下&#xff1a;1.要保留学期留历史数据比如&#xff1a;●  一年级一班2008-2009上学…

React后台管理系统-品类的增加、修改和查看

1.页面 2.品类列表展示 let listBody this.state.list.map((category, index) > { return ( <tr key{index}> <td>{category.id}</td> <td>{category.name}</td> <td> <a className"opear" onClick{(e) > this.onUpda…

hdu5111 树链剖分,主席树

hdu5111 链接 hdu 思路 先考虑序列上如何解决。 1 3 2 5 4 1 2 4 5 3 这个序列变成 1 2 3 4 5 1 3 5 5 2 是对答案没有影响的(显然)。 然后查询操作\(l,r,L,R\)就是&#xff0c; 一段连续的区间\([L,R]\)内包含几个值在\([l,r]\)的数字个数. 主席树就可以做了。\(query(rt[L-1]…

使用log4j监视和筛选应用程序日志到邮件

在今天的帖子中&#xff0c;我将向您展示如何将日志语句过滤为警告电子邮件。 这是出于监视我正在处理的一个应用程序的一些关键点的需要。 您可以使用一些工具来执行应用程序监视。 我不会详细介绍这些工具&#xff0c;但有时让应用程序发送警告电子邮件会更容易。 我主要将l…