HTML学习总结

　　　　作为一个web开发人员，html是必须要掌握的。而自己以前也看过一点相关的资料，但从来没有好好总结过。所以，总是觉得没掌握好(当然事实也是如此)老感觉有点不踏实，其实有些东西一直觉得难或者麻烦，而逃避去彻底或深入的学习它，导致一直有这种感觉，其实是很愚蠢的。一句话：“有些东西会了，一辈子都会了。逃避，一辈子都要逃避，一辈子都不会”。希望通过这次的总结，让自己能彻底掌握html，也希望对大家有些帮助。

定义：

　　超文本标记语言。何谓超文本？首先它是一种文本，但功能上比普通文本(如.txt)要强大的多，它有许多标签，并且每种标签又有很多属性可以用来调配其显示效果。是为网页数据的显示创建的一种标记语言。

组成：

　　一个标准的html可以分为两大部分组成：1.文档声明及命名空间 2.html体。其中html体又可以分为两大部分<head>部分及<body>部分，而且文档声明部分也不是必须的。下面是一个标准的html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html总结</title>
</head>
<body>
I am body.
</body>
</html>

常用标签：　　

　　作为一个标记语言，我觉得我们只要把常用的标签掌握好了，基本上就可以说学好了它。

1.字体标签　　

color属性可用颜色单词，也可用“#FFFFFF”：#号加十六进制数据表示，红绿蓝

2.标题标签

3.水平线标签

size属性指定水平线粗细

4.列表标签

a.默认数字样式可用type修改：a A I i 1

Start属性指定起始号码

b.默认样式空心圆circle

disc实心圆 square黑方块

可用CSS自定义符号

　a.无序列表：
　　<ul>
　　 <li> dog </li>
　　<li> cat </li>
　　<li> pig </li>
　　</ul>
　b.有序列表：
　　<ol type="A" start="2">
　　 <li> dog </li>
　　 <li> cat </li>
　　 <li> pig </li>
　　</ol>
c.自定义列表：
　　<dl>
　　 <dt>name</dt>
　　<dd>zhangsan</dd>
　　 <dt>score</dt>
　　 <dd>100</dd>
　　</dl>

5.注释标签

6.图片标签

alt属性中的说明文字在鼠标悬停和图片加载失败时显示

7.表格标签

<table border=”边框粗细” bordercolor cellpadding=”单元格中数据与单元格边框间距” cellspacing=”单元格与单元格间距 0两线并为一线” width=’固定像素值或相对页面百分比’>cellspacing=0两线并成一线但显示出来粗，用CSS中border-collapse两线重叠看起来就是一条线

<table>标签内<caption></caption>给表格加标题，是表格的一部分

a.table1<br/>
<table width="40%" bordercolor="#993333" border="1" cellpadding="5" cellspacing="0">
<caption>
I am a table
</caption>
<tbody>
    <tr>
      <th>name </th>
      <th>sex </th>
      <th>age </th>
    </tr>
</tbody>
<tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
</tr>
<tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
</tr>
</table>
b.table2<br/>
<table bordercolor="#000000" width="50%" border="2" cellspacing="0">
<caption>
I am table too
</caption>
<tr>
    <td rowspan="2" width="40%">统计</td>
    <td align="center"><font color="#0000FF">男</font></td>
</tr>
<tr>
    <td align="center"><b>女</b></td>
</tr>
</table>

8.超链接标签

点击一个超链接做了什么？首先启动相应的协议解析引擎，访问本机hosts文件，查找对应主机IP，未找到再请求网络DNS服务器获取对应IP，用IP访问指定主机。

href属性，可以指定协议，mailto:abc@qq.com?subject=”邮件主题”&cc=”抄送地址”

mailto，thunder…… 不指定协议默认启动文件协议解析

href=www.baidu.com默认使用file协议打开的是一个本地文件并不是主机地址

超链接实现页面内跳转：定位标记、锚

<a name=”top”>顶部位置</a> 用a标签的name属性为当前位置指定一个名字，不使用href属性,在适当位置用a标签链接到指定名字的位置用#标示当前页面<a href=”#top”>回到顶部位置</a>

target属性指定页面打开方式，默认在当前页面内打开，_blank新窗口打开

title属性：当鼠标悬停在文字上时显示的文字内容

　　a.http超链接<br/>
　　<a href="http://byirain.cnblogs.com" target="_blank">http超链接</a><br/>
　　b.迅雷超链接<br/>
　　 <a href="thunder://www.owfjajofa.com/jowjf/afjoa/music.mp3">thunder下载链接</a><br/>
　　c.邮件超链接<br/>
　　 <a href="mailto://xxx@qq.com">mail超链接</a><br/>
　　d.锚点超链接<br/>
　　 <a href="#top">go to the top</a><br/>

9.表单标签

用于与服务端交互,action指定表单提交地址，method表示提交方式，默认为get方式

10.文本域标签

<textarea cols="60" rows="10">I am textarea</textarea>

11.Label标签

用于定义快捷键

12.特殊字符

有些字符，在 HTML 中有特殊的含义，因此不能在文本中使用，需要用到字
符实体，比如说“< ”字符。

一个字符实体拥有三个部分：一个 and 符号（& ），一个实体名或者一个实体
号，最后是一个分号（; ），如小于号，我们可以这样写：<或者<

13.头标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<base target="_blank"> <!--给所有连接添加一个目标 -->
<bgsound src="http://zhangmenshiting.baidu.com/data2/music/64547304/4381224293600128.mp3?xcode=cb320edda5d79acb6048fd65ddd02a32eda7e042ac78aa4f" loop="-1"><!--背景音乐 -->
</head>
<body>
<p> <a href="http://www.w3schools.com" 
target="_blank">This link</a> will load in a new window because the target attribute is set to "_blank". </p>
<p> <a href="http://www.w3schools.com"> This link</a> will also load in a new window even without a target attribute. </p>
</body>
</html>

View Code

14.html脚本

html中可以嵌入javascript脚本

<html> 
<body> 
<script type="text/javascript"> 
document.write("<h1>Hello World!</h1>") 
</script>  
</body> 
</html>

检测浏览器是否支持脚本

<html> 
<body> 
<script type="text/javascript"> 
<!-- 
document.write("If this is displaye d, your browser supports scripting!") 
//--> 
</script> 
 
<noscript>No JavaScript support!</noscript> 
<p> 
A browser that does not support JavaScript will show the text in the noscript element. 
</p>  
</body> 
</html>

补充：

1.段落标签

　　<p> This is a paragraph.</p>

2.换行标签

　　<br/>

3.strong标签

4.big，small标签

<strong> strong</strong><br/>
<big> big</big><br/>
<small> small</small><br/>

5.sub，sup标签

<sub> sub </sub> <sup> sup</sup>

6.del标签

7.ins标签

<del>twenty</del> <ins>twelve</ins>

8.pre标签

<pre>
This is preformatted text. 
It preserves      both spaces  
and line breaks. </pre>
<p>The pre tag is good for displaying computer code:</p>
<pre> 
for i = 1 to 10 
     print i 
next i 
</pre>
<hr/>

示例下载

PS:本文经自己收集整理加上自己的总结而成，不妥之处请多指教。

posted @ 2013-07-28 13:59 g.hui 阅读(777) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

byGhui

Sharing,Improving.

HTML学习总结

定义：

组成：

常用标签：

公告