HTML5常用标签及特殊字符表

时间:2024-11-08 10:37:44

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标签

HTML5常用标签及特殊字符表在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; Α Β &Beta; Β Γ &Gamma; Γ
Δ &Delta; Δ Ε &Epsilon; Ε Ζ &Zeta; Ζ
Η &Eta; Η Θ &Theta; Θ Ι &Iota; Ι
Κ &Kappa; Κ Λ &Lambda; Λ Μ &Mu; Μ
Ν &Nu; Ν Ξ &Xi; Ξ Ο &Omicron; Ο
Π &Pi; Π Ρ &Rho; Ρ Σ &Sigma; Σ
Τ &Tau; Τ Υ &Upsilon; Υ Φ &Phi; Φ
Χ &Chi; Χ Ψ &Psi; Ψ Ω &Omega; Ω
α &alpha; α β &beta; β γ &gamma; γ
δ &delta; δ ε &epsilon; ε ζ &zeta; ζ
η &eta; η θ &theta; θ ι &iota; ι
κ &kappa; κ λ &lambda; λ μ &mu; μ
ν &nu; ν ξ &xi; ξ ο &omicron; ο
π &pi; π ρ &rho; ρ ς &sigmaf; ς
σ &sigma; σ τ &tau; τ υ &upsilon; υ
φ &phi; φ χ &chi; χ ψ &psi; ψ
ω &omega; ω ϑ &thetasym; ϑ ϒ &upsih; ϒ
ϖ &piv; ϖ &bull; &hellip;
&prime; &Prime; &oline;
&frasl; &weierp; &image;
&real; &trade; &alefsym;
&larr; &uarr; &rarr;
&darr; &harr; &crarr;
&lArr; &uArr; &rArr;
&dArr; &hArr; &forall;
&part; &exist; &empty;
&nabla; &isin; &notin;
&ni; &prod; &sum;
&minus; &lowast; &radic;
&prop; &infin; &ang;
&and; &or; &cap;
&cup; &int; &there4;
&sim; &cong; &asymp;
&ne; &equiv; &le;
&ge; &sub; &sup;
&nsub; &sube; &supe;
&oplus; &otimes; &perp;
&sdot; &lceil; &rceil;
&lfloor; &rfloor; &loz;
&spades; &clubs; &hearts;
&diams;   &nbsp;   ¡ &iexcl; ¡
¢ &cent; ¢ £ &pound; £ ¤ &curren; ¤
¥ &yen; ¥ ¦ &brvbar; ¦ § &sect; §
¨ &uml; ¨ © &copy; © ª &ordf; ª
« &laquo; « ¬ &not; ¬   &shy; ­
® &reg; ® ¯ &macr; ¯ ° &deg; °
± &plusmn; ± ² &sup2; ² ³ &sup3; ³
´ &acute; ´ µ &micro; &#181 " &quot; "
< &lt; < > &gt; > '   '