HTML笔记
来源:互联网 发布:网页抢红包软件 编辑:程序博客网 时间:2024/06/08 22:50
一、一个简单的html页面:
<?xml version = "1.0" encording = "UTF-8"?> <!-- 表明网页时xml文档,版本为1.0,字符编码类型为UTF-8 --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/1999/xhtml11/DTD/xhtml.dtd"> <!-- 指出该文档为XNTML1.1文档,允许网页浏览器检查文档,保证代码满足XHTML1.1的要求 --> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <!-- 这个没说 --> <head> <title>My First Page</title> </head> <body> <p>Hello World!</p> </body></html>
一个网页的有的标签:<html>,<head>,<title>,<body>。可以用标题标签突出文本,如<h1>,<h2>,<h3>等。下面一些总结:
1.链接
链接到另一个页面:
<a href = "url">click here!</a>
这里的下划线是以带下划线的蓝色字体显示,单击之后变为红色。可用CSS修改这些属性:
a:link{/*链接尚未访问过*/ color:#19619A; /*淡蓝色*/ font-weight:bold; /*将链接的字体设置为粗体*/ text-decoration:none; /*删除下划线*/}a:hover{/*鼠标指向链接*/ background-color:gold; font-weight:bold; text-decoration:none;}a:active{/*链接被激活,如用鼠标单击*/ color:red; text-decoration:none;}a:visited{/*链接已访问*/ color:red; font-weight:bold; text-decoration:none;}
可用相对地址链接到另一个文件夹的网页,如:
<a href = "another.html"> click here!</a>
<p><!-- <span style="font-family:宋体;">链接到同一个文件夹的网页 </span><span style="font-family:Times New Roman;">--></span></p><p><a href = "document/another.html">click here!</a></p><p> <!-- <span style="font-family:宋体;">链接到另一个文件夹的网页 </span><span style="font-family:Times New Roman;">--></span></p><p><a href = "../another.html">click here!</a></p><p> <!-- <span style="font-family:宋体;">链接到父文件夹下的网页 </span><span style="font-family:Times New Roman;">--></span></p>
二、在新浏览器窗口中打开链接:
<a href = "url", target = "_blank">click here!</a> <!-- W3C在XHTML中删除了target = "_blank" --><head><title>My Page</title><script type = "text/javascript" src = "external.js"></script></head><!-- 用Javascript来实现 -->链接到网页内部:<a href = "#anchor"> click here!</a><p id = "anchor">I am here</p><a href = "another.html#anchor">click here!</a><!-- 链接到另一个网页的特定位置 -->在网页中链接Email地址:<a href = "mailto:example@example.com?subject = Question$amp;body = May I ask you a qusetion?">send message to me </a><!-- subject表示邮件的主题,body表示邮件的内容。这两个属性邮件地址之间用“?"隔开,属性之间用"&"隔开--><a href = "mailto:example@exaple.com">send message to me</a><!-- 可用ASCII码代替字符"a",可以减少垃圾邮件 -->
三、文本对齐和列表
文本对齐:
<p style = "text-align:center">text</p><!--text-align样式规则的默认值为left,可选值有left,center,right--><div style = "text-align:center">block</div><!-- 可为块设置对齐方式 -->列表:<ol><!-- 有序列表,自动添加编号,自动缩进和分行--> <li>order one</li> <li>order two</li> <li>order three</li></ol><ul><!-- 无序列表,自动添加项目符号,自动缩进和分行--> <li>item</li> <li>item</li> <li>item</li></ul><dl><!--自动缩进和分行--> <dt>term</dt> <dd>defination</dd></dl>
另外,可在<ul>,<ol>,<li>标签中使用"list-style-type"指定项目符号类型。
<pre>可将文本格式化为等宽字体,并且在<pre>中使用的空格和分行将被保留。
三、图像
将图像放到网页中:
<img src = "myimage.gif" alt = "My Image" title = "My Image" />
<!-- "src"标识图像的位置; "alt"指定图像的描述性文本,当图像不可见时,可看到该属性指定的文本;
"title"提供在图像可见时对图像的描述;图像可以是GIF,PNG,JPEG格式的图像文件-->
对齐图像:
<img src = "MyImage.gif" alt = "My Image" style = "float:left"/>
<!--文本与图像的水平对齐,left表示图像左对齐,文本围绕在图像的右边;right与之相反,没有center对齐-->
<img src = "MyImage.gif" alt = "My Image" style = "vertical-align:text-top"/>
<!-- 文本与图像的垂直对齐:
"text-top"表示图像的顶部与同一行中最高的图像或文本的顶部对齐,"middle"图像的中心与同一行中其他内容的中心对齐;
"text-bottom"表示图像的底部与文本的底部对齐;"baseline"表示图像的底部与文本的基线对齐-->
将图像变为链接:
<a href = "MyImage.gif"><img src = "MyImage.gif" alt = "My image" style = "My image" style = "border-style:none"/></a><!--通常,网页浏览器会在图片链接的周围绘制一个彩色矩形,如果不希望显示之隔边框,可在<img>中包含style = "borde-style:none"-->
图像映射:
<map id = "MyImage"><area shape = "rect" coords = "0,0,100,100" href = "MyImage_1.gif" alt = "MyImage_1" /><!--"rect"表示该区域是矩形,"0,0,100,100"表示左上角的坐标和右下角的坐标--><area shape = "cricle" coords = "10,10,5" href = "MyImage_1.gif" alt = "MyImage_2" /><!--"circle"表示该区域为圆形,"10,10,5"表示圆心坐标和半径--><area shape = "poly" coords = "0,0,100,100,234,234,123,123,245,245" href = "MyImage_1.gif" alt = "MyImage_3" /><!--"poly"表示多边形,"0,0,100,100,234,234,123,123,245,245"表示所有顶点的坐标--></map><img src = "MyImage.gif" alt = "My image" title = "My image" usemap = "#MyImage" style = "border-style:none"/><!--usemap属性的值为<map>标签id的值-->
四、自定义背景和颜色
背景颜色和文本颜色:
<body style = "background-color:green;color:#FF0000">
<!--将背景设置为绿色,文本颜色设定为红色。<body>中的颜色应用于网页中所有的文本,但可以在<span>修改color样式属性,改变特定单词或段落的颜色-->
背景图像:
<body style = "background-image:url(backimage.jpg)">
<!--若要使用透明图像,由于JPEG不支持透明,GIF支持一种透明色,PNG可以指定范围,所以最好用PNG格式的图像-->
五、表格
<table width="50%" border="1"><tr> <td> </td> <td colspan="2"> </td> </tr> <tr> <td rowspan="2"> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr></table>
效果图:
总结:rowspan跨行:垂直方向
Colspan:跨列:水平方向
六、框架:
(实现左边点击,右边显示内容),franeset要放在body外面
主页面main.html:
<frameset rows="100,*"><frame src="top.html" name="top"/> <frameset cols="200,*"> <frame src="left.html" name="left"/> <frame src="right.html" name="right"/> </frameset></frameset>
left页面(left.html):
<body>left页面<br /><a href="http://www.baidu.com" target="right">百度</a><br /><a href="http://www.sina.com" target="right">新浪</a></body>
效果图:
总结:关键部分是在定义框架时,给每一个框架增加了name属性,在left页面中的超链接中的target中制定属性
Iframe框架:
<iframe src="http://www.baidu.com" width="100" height="100"></iframe>
七、表单:
<form>用户:<input type="text" name="user" /><br />密码:<input type="password" name="pass" /><br />确认密码:<input type="password" name="repass" /><br />性别:<input type="radio" name="sex" checked="checked" />男 <input type="radio" name="sex" value="nv"/>女<br />爱好:<input type="checkbox" name="java" />Java <input type="checkbox" name="CSS" />CSS <input type="checkbox" name="python" />Python<br />国家:<select multiple="multiple" size="3"><option>--请选择国家--</option> <option>中国</option> <option>美国</option> <option>日本</option></select><br /><input type="submit" value="提交" /> <input type="reset" value="默认" /><br /><input type="image" src="1.jpg" width="100" height="50"/></form>
效果图:
- HTML笔记-HTML基础
- 【HTML】HTML学习笔记
- html笔记
- html笔记
- html笔记
- HTML笔记
- html笔记
- html笔记
- HTML笔记
- HTML 笔记
- html笔记
- HTML笔记
- html笔记
- HTML笔记
- HTML 笔记
- HTML笔记
- html笔记
- HTML 笔记
- OpenCv Tracking Object
- zoj3201 Tree of Tree
- 导入时报ORA-39095错误
- android .9.png图片制作、平台下使用点九PNG技术
- HDU 4667 Building Fence 解题报告
- HTML笔记
- 配置 ext direct spring Spring XML
- Java基础<二>--->关键字、数据类型、运算
- 原始套接字
- 博客奠基
- windows上创建定时任务SCHTASKS
- JDBC连接orcal,sql server ,mysql 数据库字符串
- getting start with storm 翻译 第四章 part-2
- 二分图相关拓展(抽象模型,最小顶点覆盖,边的最小覆盖,最大独立集,最大团)