HTML标签练习

<html>
<> <body> <h4>一个无序列表:</h4>
<ul>
<li><a href="#"style="text-decoration:none">水水水</a><u>水</u>水</li>
<br>
<li>茶</li>
<br>
<li>牛奶</li>
</ul> </body>
</html>

比较重要的一些标签,如ul和li:普通的显示数据的时候,ul就是项目列表,li就是列表项。可以用来显示数据。

如果用于DIV+CSS布局的话,ul+li可以替换表格的作用,具体的设置,如果宽度高度、行间距、背景边框等需要配合CSS一起设置。

另外h1-h6标签,a标签,br标签,&nbsp标签,div块等,还有一些常用的css样式,width,height,border,padding,color,margin等

最后就是javascript里面对这些标签的function

<html>

<body bgcolor = "red">

<h4>一个无序列表:</h4>
<ul>
<li><a href="#"style="text-decoration:none"><b>水
</b><i>水</i><strong>水</strong></a><u>水</u><sup>水</sup></li>
<br>
<li>茶</li>
<br>
<li>牛奶</li> </ul> </body>
</html>

这里贴上一些觉得灰常不错的参考资料:

标题:<h1></h1>    # h1---h6
段落:<p></p>
换行:<br/>
水平线:<hr/>
注释:<!--这是注释-->
             
 

文本格式:

字体:<font size='3' color='blue' face='verdana'> </font>

加粗:<b></b>

倾斜:<em></em> or <i></i>

强调:<strong></strong> #默认是对字加粗

字体变大:<big></big>  字体变小:<small></small>

上标:<sup></sup> 下标:<sub></sub>

预格式文本:<pre></pre>  #保存了中间的空格和换行

文字缩写:<abbr></abbr>  or  <acronym></acronym> #鼠标知道出现,例子

<abbr titile="caokun"> CK </abbr>

引用: 长引用:<blockquote></blockquote>

短引用:<q></q>

删除字和下划线字:<del></del>   <ins></ins>

外部样式表:关联css文件

内部样式表:#嵌入html里的css代码

名字:class #classname的简称

样式:<style type="text/css"></style>

分区:<div></div>

组合行内元素:<span></span>

链接:<a href="http://www.w3school.com.cn" style="text-decoration:none">
           This is a link</a>
            #text-decoration:none:没有下划线

锚:#本页链接到相应位置,源地址 
1

链接2

用图像作为链接:<a href="/example/html/lastpage.html">

                                       <img border="0" src="/i/eg_buttonnext.gif" />

                                       </a>

在新窗口打开:target="_blank"    例如:

                                   <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

图片:< img src="C:\Documents and Settings\YukunCao\桌面\1.gif"

width="300"

height="120"

alt="Big Boat"   />

替换文本 : 在浏览器无法载入图像时,浏览器将显示这个替代性的文本而不是图像

表格:  显示格式不好,看链接

文本框:各个类型前后都要加<form></form>

用户:<input type="text" name="user">

                 密码:<input type="password" name="password">

单选框:

                <input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female

复选框:

                <input type="checkbox" name="bike" /> 
                I have a bike 
<br />
<input type="checkbox" name="car" />
I have a car

表单输入,获取值:链接底部

框架:

水平:

<frameset rows="25%,50%,25%">

<frame src="/example/html/frame_a.html">

                             <frame src="/example/html/frame_b.html">

</frameset>

垂直:

<frameset cols="25%,50%,25%">

<frame src="/example/html/frame_a.html">

                             <frame src="/example/html/frame_b.html">

</frameset>

其它框架:链接

内联框架:iframe

<iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe>

<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.</a> </p>

<p>注释:由于链接的目标匹配 iframe 的名称,所以链接会在 iframe 中打开。</p>

背景:

设置颜色:

                 <body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
设置图片:
                 <body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">
上一篇:【做题记录】[NOIP2016 普及组] 魔法阵


下一篇:java高并发系列 - 第16天:JUC中等待多线程完成的工具类CountDownLatch,必备技能