HTML基础 整理

HTML:超文本传输协议 (Hyper Markup Language) 

CSS:网页美化 (Cascading Style Sheets) 

JS:java-scipt 脚本语言

 

Dreamweaver的HTML编辑界面:

 

1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 详解:

<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。
此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
声明了文档的根元素是 html,它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 Transitional//EN" 的 DTD 中进行了定义。
这句<html xmlns="http://www.w3.org/1999/xhtml">,是在文档中的<html> 标签中使用 xmlns 属性,以指定整个文档所使用的主要命名空间。

2.<html xmlns="http://www.w3.org/1999/xhtml">
详解:

xmlns 是用来定义xml namespace属性的;
xmlns 属性在 XHTML 中是必需的。不过即使你的 XHTML 文档没有使用此属性,W3C 的验证器也不会报错。

 

3.<head></head>

详解:

head在英文中是头的意思,在html文本中是表头的意思,必须是成对出现,不可单独出现.

 

4.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

详解:

meta是html中的元标签,其中包含了对应html的相关信息,客户端浏览器或服务器端的程序会根据这些信息进行处理。HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容。

content:内容类型 这个网页的格式是文本的,网页模式

charset:内容编码 这个网页的编码是utf-8,中文编码,需要注意的是这个是网页内容的编码,而不是文件本身的,其他类型的编码中文可能会出现乱码。


5.<title>无标题文档</title>
详解:

这是页面标题标签,每个网页名都是由这个标签起的.

6.<body></body>
详解:
这是网页内容编辑标签.所有的网页信息在这个标签内部编辑生成!

boay的属性:
bgcolor:页面背景色 整张网页的背景色.
text:网页所有文字的颜色
topmargin:上页边距 距离页面正上方的距离 单位为像素(FX)
leftmargin:左页边距 距离页面左方的距离
rightmargin:右页边距 距离页面右方的距离
bottomargin:底页边距(下页边距) 距离页面下方的距离

一键回到顶头(锚点):
<a name="top"></a>
<a href="#top">返回最顶端</a>

格式控制标签: [必须成对出现才会有效果]
<font size="45" color="#FF0000"></font> 字体大小和字体颜色功能
<br><br/> 网页编辑时的回车功能;如果直接按enter键回车是无效的.
<center></center> 居中功能.
<em></em> 字体倾斜功能
<strong></strong> 字体加粗功能
<u></u> 下划线功能
<i></i> 第二种字体倾斜功能
<b></b> 第二种字体加粗功能
&nbsp; 这是空格功能 在键盘上按shift键和空格键就可以实现这一功能.

内容容器标签:[必须成对出现才会实现效果]
<h1></h1> 第一标题
<h2></h2> 第二标题
<h3></h3> 第三标题
<h4></h4> 第四标题
<h5></h5> 第五标题
<h6></h6> 第六标题
此六个标题是标题格式控制标签 他们会默认换行 重要性依次递减 而且会默认与上一行标题标签之间空一行

段落标签:
<p></p> 段落标签
<div></div> 层标签 会占据一行的位置
<span></span> 层标签 会以占了多大空间为基础
<ol></ol> 有序列表标签 会产生123的序列号

<ul></ul> 无序列表标签 会产生为·的项目标点符号

 

常用标签:

超链接标签:<a href="http://www.QQ.com" target="_blank">腾讯</a>

图片标签:<img src="d://45.jpg" alt="2333">

 

表格代码:

<table>表格代码</table>

<tr></tr>

width:表格宽度

heigth:表格高度

border:边框粗度 数值为0时没有边框.

cellpaddimg:表格内容与单元格边框的边距

cellspacing:单元格之间的间距.

align:对齐方式 center:居中 justify:两端对齐 left:左对齐 right:右对齐

bacolor:表格背景颜色

background:表格背景图片

colspan:合并同一行单元格 水平方向的单元格

但是要去掉水平方向合并的单元格的代码

rowspan:合并同一列单元格 垂直方向的单元格

但是要去掉垂直方向合并的单元格的代码

 

个人简历代码:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>个人简历</title>
 6 </head>
 7 <body leftmargin="100" rightmargin="100">
 8 <a name="top"></a>
 9 
10 <table wigth="200" height="90" border="1" cellpadding="0" cellspacing="0">
11 <tr align="center">
12 <td width="110" height="50">姓名</td>
13 <td width="155" headers=50">XX</td>
14 <td width="110" headers="50">年龄</td>
15 <td width="122" headers="50">22</td>
16 <td width="145" rowspan="5"><p>二寸</p>
17   <p>免冠照片</p></td>
18 </tr>
19 
20 <tr align="center">
21 <td width="110" height="50">性别</td>
22 <td width="155" height="50"></td>
23 <td width="110" height="50">政治面貌</td>
24 <td width="122" height="50">团员</td>
25 </tr>
26 
27 <tr align="center">
28 <td width="110" height="50">民族</td>
29 <td width="155" height="50">汉族</td>
30 <td width="110" height="50">籍贯</td>
31 <td width="122" height="50">淄博张店</td>
32 </tr>
33 
34 <tr align="center">
35 <td width="110" height="50">学历</td>
36 <td width="155" height="50">大专</td>
37 <td width="110" height="50">毕业院校</td>
38 <td width="122" height="50">淄博市技师学院</td>
39 </tr>
40 
41 <tr align="center">
42 <td width="110" height="50">专业</td>
43 <td width="155" height="50">计算机网络与信息管理</td>
44 <td width="110" height="50">毕业时间</td>
45 <td width="122" height="50">2013年</td>
46 </tr>
47 
48 <tr align="center">
49 <td width="110" height="120">教育经历</td>
50 <td colspan="5"><p>2006年,入马尚镇第二中学学习三年.</p>
51   <p>2009年,入淄博市技师学院学习四年毕业</p></td>
52 </tr>
53 
54 <tr align="center">
55 <td width="110" height="120">工作经历</td>
56 <td colspan="5">2013年至2016年,在开发区中航三林工业园工作3年</td>
57 </tr>
58 
59 <tr align="center">
60 <td width="110" height="120">兴趣爱好</td>
61 <td colspan="5"><p>喜欢天文地理 爱历史 </p></td>
62 </tr>
63 
64 <tr align="center">
65 <td width="110" height="120">联系方式</td>
66 <td colspan="5">15264388510</td>
67 </tr>
68 
69 </table>
70 </body>
71 </html>
posted @ 2016-03-19 20:24  宫崎天川  阅读(393)  评论(0编辑  收藏  举报