<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">

HTML标签练习的更多相关文章

  1. a标签点击跳转失效--IE6、7的奇葩bug

    一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...

  2. IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  3. 百度MIP页规范详解 —— canonical标签

    百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...

  4. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  5. TODO：Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  6. 最新 去掉 Chrome 新标签页的8个缩略图

    chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

  7. css-父标签中的子标签默认位置

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. xpath提取多个标签下的text

    title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...

  9. 多个Img标签之间的间隙处理方法

    1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...

  10. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

随机推荐

  1. 『重构--改善既有代码的设计』读书笔记----Replace Temp with Query

    Replace Temp with Query,顾名思义,表示你用查询来替换临时变量本身,临时变量对于函数来说是只有当前函数可见的,如果你在同类的别的地方要用到这个变量你就必须重新写表达式来获取这个变 ...

  2. ubuntu 更新 php5.5.9 到 php 5.6

    add-apt-repository ppa:ondrej/php5-5.6 apt-get update apt-get install php5 为了使用 add-apt-repsitory 需要 ...

  3. WINFORM的DataGridView使用点滴

    1.如果有超过一屏的数据,想通过关键字查找到相关记录,然后再定位之,做法如下:遍历所有行,把某单元格的值和关键字对比,找到后清除所有选择行,然后把当前行设为选择,然后把grid的CurrentCell ...

  4. Yii2的相关学习记录，后台模板和gii（三）

    前面已经可以正常登录,但我们需要体验下最常用的增删查改的操作.这里就需要gii,通过gii可以方便的生成表单.表格的框架,不需要我们再写重复的东西. gii访问地址:http://localhost/ ...

  5. ichartjs-基于html5的图表组件

    大家可以到官网学习:ichartjs官网  带你进入官网:

  6. Aptana Studio 快捷键

    窗口 Ctrl+ Shift +L 调出快捷键提示 Ctrl+ W 关闭当前标签窗口 Ctrl+ Shift + W 关闭当前标签窗口 Ctrl+ F6 (或者是Aptana的Ctrl+Tab )下一 ...

  7. laravel框架——学习笔记

    routes.php文件创建路由参数由{}包起来,不需要$ Route::get('/stu/{as}','StuController@show'); 在相对应的Controller创建funcito ...

  8. CentOS 6用snmp配合MRTG显示系统状态

    1. 软件安装以yum的方式安装snmp/MRTG 安装SNMP(要记得安装net-snmp-utils,不然snmpwalk将不能使用)yum -y install net-snmp* 安装MRTG ...

  9. Web前端开发人员和设计师必读文章推荐

    推荐一个很好的学习资源: Web前端开发人员和设计师必读文章推荐[系列一] Web前端开发人员和设计师必读文章推荐[系列二] Web前端开发人员和设计师必读文章推荐[系列三] Web前端开发人员和设计 ...

  10. DC DC電路電感的選擇

    注:只有充分理解電感在DC/DC電路中發揮的作用,才能更優的設計DC/DC電路.本文還包括對同步DC/DC及異步DC/DC概念的解釋.   DCDC電路電感的選擇 簡介 在開關電源的設計中電感的設計為 ...