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标签, 标签,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>
这里贴上一些觉得灰常不错的参考资料:
文本格式:
字体:<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>
锚:#本页链接到相应位置,源地址
1
用图像作为链接:<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>
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>
背景:
设置颜色:
<bodybgcolor="#000000"
>
<bodybgcolor="rgb(0,0,0)"
>
<bodybgcolor="black"
>
设置图片:
<bodybackground="clouds.gif"
>
<bodybackground="http://www.w3school.com.cn/clouds.gif"
>
HTML标签练习的更多相关文章
- a标签点击跳转失效--IE6、7的奇葩bug
一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...
- IE6、7下html标签间存在空白符,导致渲染后占用多余空白位置的原因及解决方法
直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...
- 百度MIP页规范详解 —— canonical标签
百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...
- 【CSS进阶】伪元素的妙用--单标签之美
最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...
- TODO:Laravel 使用blade标签布局页面
TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...
- 最新 去掉 Chrome 新标签页的8个缩略图
chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...
- css-父标签中的子标签默认位置
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- xpath提取多个标签下的text
title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...
- 多个Img标签之间的间隙处理方法
1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...
- html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...
随机推荐
- Java中的继承与组合
本文主要说明Java中继承与组合的概念,以及它们之间的联系与区别.首先文章会给出一小段代码示例,用于展示到底什么是继承.然后演示如何通过“组合”来改进这种继承的设计机制.最后总结这两者的应用场景,即到 ...
- Python django admin 替换表单控件
测试版本: Python 2.7 Django 1.6.2 models.py from django.db import models class Article(models.Model): ti ...
- 用批处理来重启IIS的应用程序池
批处理很简单,先Stop再Start就行,代码如下(apppoolName是应用程序池的实例名):c:\windows\system32\inetsrv\AppCmd.exe stop apppool ...
- mysql hash索引优化
创建表 CREATE TABLE `t1` ( `id` int(11) NOT NULL AUTO_INCREMENT, `msg` varchar(20) NOT NULL DEFAULT ' ...
- $_GLOBALS超全局数组和global定义的全局变量区别?
全局变量:主程序中定义的变量(函数外部),只能在主程序中使用,在函数内部不能调用 背景:解决在函数内部调用全局变量的问题 解决方法: 1.在函数内部声名全局变量 <?php public $va ...
- matplotlib curve.py
import matplotlib.pyplot as plt import numpy as np x = np.linspace(0, 2*np.pi, 100) sinX = np.sin(x) ...
- HTML 表格、区块、其他常用控件
1. HTML 表格 主要关键字: table:表格: table border 属性:定义边框 -- <table border="1">: caption:表名: ...
- c语言里用结构体和指针函数实现面向对象思想
一.基础研究 观察如下两个程序a.c和b.c: A.c: B.c: 这两个程序都是要实现在屏幕上第10行40列打印一个绿色的字符c: 这两个程序的数据组织方式是一样的,都是使用结构体,而且对共性和个性 ...
- angular-utils-pagination 使用案例
angular-utils-pagination是基于angular,bootstrap,jquery的一个分页插件,详细介绍以及使用方法参照: Git:https://github.com/mich ...
- 【Oracle】Windows 7下完全卸载Oracle 11g数据库
闲来无事,想把Oracle 11g重装一下,记录如下: (1)首先在服务中停止所有的Oracle服务: (2)开始 -> 程序 -> Oracle-OraDb11g_home1 - ...