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动…

【处理手记】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;这是人们集成他们使…

[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检查所有…

软件工程第二次作业-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…

识别JVM –比预期的要复杂

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

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…

Vue node.js商城-购物车模块

一、渲染购物车列表页面 新建src/views/Cart.vue获取cartList购物车列表数据就可以在页面中渲染出该用户的购物车列表数据 data(){ return { cartList:[] // 购物车商品列表 } }, mounted:function(){ this.init(); }, methods:{ init(){ // 初始化商品数据 axios.get(/users/…

RxJava + Java8 + Java EE 7 + Arquillian =幸福

微服务是一种体系结构样式&#xff0c;其中每个服务都实现为一个独立的系统。 他们可以使用自己的持久性系统&#xff08;尽管不是强制性的&#xff09;&#xff0c;部署&#xff0c;语言等。 由于系统由一个以上的服务组成&#xff0c;因此每个服务将与其他服务通信&#xff…

C# -- RSA加密与解密

1. RSA加密与解密 -- 使用公钥加密、私钥解密 public class RSATool{public string Encrypt(string strText, string strPublicKey){RSACryptoServiceProvider rsa new RSACryptoServiceProvider();rsa.FromXmlString(strPublicKey);byte[] byteText Encoding.UTF8.GetByt…

VMware Station NAT上网模式配置

转载于:https://www.cnblogs.com/MimiSnowing/p/10718235.html

JavaFX技巧10:自定义复合控件

用JavaFX编写自定义控件是一个简单直接的过程。 需要一个控件类来控制控件的状态&#xff08;因此命名&#xff09;。 外观需要控件的外观。 而且通常不是用于自定义外观CSS文件。 控件的常用方法是将其使用的节点隐藏在其外观类中。 例如&#xff0c; TextField控件使用javaf…

React后台管理系统-首页Home组件

1.Home组件要显示用户总数、商品总数和订单总数&#xff0c;数据请求后端的 /manage/statistic/base_count.do接口&#xff0c;返回的是 this.state { userCount : -, productCount : -, orderCount : - } //页面挂载之后请求数据componentDidMount(){ this.loadCount(); } lo…

JAX-RS 2.0的新功能– @BeanParam批注

至少可以说JAX-RS很棒&#xff0c;也是我的最爱之一&#xff01; 为什么&#xff1f; 功能丰富 直观&#xff08;因此学习曲线不那么陡峭&#xff09; 易于使用和开发 具有出色的RI – Jersey &#xff0c; RestEasy等 有足够的JAX-RS粉丝可以添加此内容&#xff01; JAX…

带有自定义模块的JBoss EAP上的骆驼

Apache Camel —最好的开源集成库 Apache Camel是一个很棒的开放源代码集成库&#xff0c;可以用作ESB的主干或在独立的应用程序中进行系统的路由&#xff0c;转换或中介&#xff08;请参阅&#xff1a;集成多个系统&#xff09;。 Camel非常通用&#xff0c;不会迫使用户部署到…

Java中的读写锁

一、读写锁 1、初识读写锁 a&#xff09;Java中的锁——Lock和synchronized中介绍的ReentrantLock和synchronized基本上都是排它锁&#xff0c;意味着这些锁在同一时刻只允许一个线程进行访问&#xff0c;而读写锁在同一时刻可以允许多个读线程访问&#xff0c;在写线程访问的时…

Flex4中的皮肤(2): Skin State

在上一篇 中&#xff0c;定义了一个最简单的SkinnableComponent并为其定义了两个Skin。 对于TransitionSkin&#xff0c;需要在enable时有不同的展现方式&#xff0c;这可以通过Skin State实现。 对自定义的SkinnableComponent的修改 首先在组件中定义isEnabled属性&#xff1a…