HTML标签练习

2023-02-01 07:46:30

<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> #鼠标知道出现，例子

引用：长引用：<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>

垂直：

</frameset>

其它框架：链接

内联框架：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">

码农公寓

相关文章