分享

HTML 基础知识

 bleach尸魂界 2014-06-15
本资源引自:
HTML基础知识 - cheney521的专栏 - 博客频道 - CSDN.NET
http://blog.csdn.net/cheney521/article/details/8690168
------------------------------------------------------------------------------------------------------------------
HTML(Hyper Text Mark-up Language 超文本标记语言)的缩写,
标记:就是用来描述网页内容的一些特定符号。
HTML不是编程语言,而是一种描述性的标记语言,用于描述网页中内容的显示方式,
比如文字以什么颜色、大小来显示,这些都是利用html标记来实现。
lHtml文档的创建方式:用html语言创建的文档
1、手工直接编写(例如记事本)。
2、通过图形化的HTML开发软件 Dreamweaver。
3、由Web服务器上的动态网页程序生成。
HTML 标记的类型:单标记与双标记
一、单标记
(1).<标记名称 >
  单一型 , 无属性值。
如: <br/>
(2).<标记名称属性 = ” 属性值 ” >
单一型,有属性值。
如: <hrwidth= ” 80% ” / >
二、双标记
(3).<标记名称 >… </ 标记名称 >
  没有属性值。
如: <title>… </title>
(4).<标记名称属性 = ” 属性值 ” >… </ 标记名称 >
  有属性值。
如: <bodybgcolor= ”red ” > … </body>
<fontsize= ” 7 ” > … </font>
1、双标记:<开始标记>内容</结束标记>                                       
2、 单标记:<标记 />
3、标记的属性: <标记 属性1=参数1   属性2=参数2…> 内容 </标记>
说明:
A、标记与属性、属性与属性之间以空格分隔
B、属性不区分先后顺序;且属性不是必需的
重点强调:
虽然在HTML中标记不区别大小写,但在XHTML中所有标记都必须小写!!!!!!!
所以建议从现在开始,所有标记都采用小写 。
1、文档结构
所有的网页文件,通常由四对标记来构成,文档的骨架,它们是:
<html>
  <head>
  <title>  标题  </title>
  </head>
  <body>
  正文
  </body>
</html>
l<html>……</html>标识网页文件的开始与结束,所有的html元素都要放在这对标记中
l<head>……</head>标识网页文件的头部信息,如标题、搜索引擎关键字等
l<title>……</title>标识网页文件的标题
l<body>……</body>标识网页文件的主体部分
Meta标记:
用于定义文件信息, 对网页文件进行说明,便于搜索引擎查找。放置于<head></head>之间 。
设置关键字:<meta name=”keywords” content=”value”>多个关键字内容之间可以用“,”分隔 。
设置描述:<meta name=”description” content=”value”>
设置作者:<meta name=”author” content=”作者名”>
设置字符集:<meta http-equiv=”content-type” content=”text/html;charset=gb2312”>
设置页面定时跳转:<meta http-equiv="Refresh" content="2;URL=http://www." />
网页主体标记body
(1)注释
<!--注释内容-->
(2)body属性
<body bgcolor=“背景颜色” 
background=“背景图像” 
text=“文本颜色” 
link=“链接文本颜色” 
vlink=“访问过的文本颜色” 
alink=“激活的链接文本颜色” 
leftmargin=“左边界” 
rightmargin=“右边界”
topmargin=“上边界” 
bottommargin=“下边界”>
字体修饰 
(1)<font>标记
语法:
<font color="文本颜色" size="字号" face="字体">文本</font>
注:网页中的文本字体、字号一般通过CSS修饰
(2)字符格式
加粗
倾斜
加强语气(加粗)
加强语气(倾斜)
下划线
删除线
上标
下标
(3)段落标记:
格式: <p align= ” 对齐方式 “ > … </p>
属性名称 属性值 说明
align   left     左对齐(默认)
                center    居中
                right     右对齐
(4)段落标题
<hx align= ” 对齐方式 “ > … </hx>:段落标题
说明:
X取值[1~6]  hx内的文本会自动加粗显示。
hx 针对的对象是段落,而 font 针对的对象的任意文本。
(5)<br />:换行(换行不换段)
(6).水平直线 <hr />
属性名称  属性值  说明
size  像素 绝对设置,以数字表示, 属性值越大,线越粗
百分比 相对设置,以 % 表示, 属性值越大,线越粗
width  像素 绝对设置, 长度不会应视窗的改变而改变
百分比 相对设置, 长度会随着视窗宽度而改变
   noshade      ="noshade"      实体线, 
  在 HTML 4.01 中,不赞成使用 noshade 属性; 
  在 XHTML 1.0 Strict DTD 中,不支持 noshade 属性。
  请使用 CSS 代替。 
(7) 定义一个块引用:使用文本缩进
格式: <blockquote>...</blockquote>优化有点用
属性名称  属性值  说明
cite url  被引用的地址
(8) 居中标记 <center>内容</center>(被废弃的标签,请使用 CSS 代替)
(9) 预格式化 <pre></pre>
显示已经格式化好的文字。不加此标记的话,HTML浏览器会忽略所有空格和制表符。
因此, pre 标签很适合显示计算机代码 ,如 java 代码 !!!
常配合<code></code>使用。
(10) 在HTML文档中使用特殊字符:
空格 
版权号  ?&copy;
注册商标  ?&reg;
“"
&&
<<
>>
1、列表标记用途:
[1]、无序列表 <ul>…</ul>
[2]、有序列表 <ol>…</ol>
[3]、定义列表 <dl>…</dl>

无序列表语法:
<ul type=“项目符号类型”>
<li type=“项目符号类型”>内容1</li>
<li> 内容2</li>
</ul>
<li></li> 表示一个项目
有序列表语法:
<ol start=“列表起点” type=“项目符号类型”> 
<li >内容1</li>
<li >内容2</li>
</ol> 
定义列表语法:
<dl> 
<dt>标题1</dt> 
<dd>内容1.1</dd>
<dd>内容1.2</dd>
<dt>标题2</dt>
 <dd>内容2.1</dd>
<dd>内容2.2</dd> 
</dl> 

<dl></dl>定义列表
<dt></dt>表示一个项目
<dd></dd>表示一个项目下的更详细的内容的解释

图片Web上支持的图片格式
GIF(图形交换格式):
GIF格式文件最多只能保存256种颜色。该格式支持透明色,支持动画效果。
JPEG(联合图像专家组):
该格式不支持透明色及动画,颜色可达1670万种
PNG(网络可移植格式):
该格式支持透明色,但不支持动画,颜色从几种至1670万种。
图片标记 
<img src=“图片的路径” />
路径
绝对路径:提供目标文档的完整主机名称、路径信息、及文档全称
相对路径:从当前文档开始的路径
如果当前文档和目标文档位置平行,则直接书写目标文档全称
如果当前文档和目标文档所在文件夹位置平行,则书写为 文件夹名称/目标文档全称
如果当前文档所在文件夹和目标文档位置平行,则书写为 ../目标文档全称 
根相对路径:从站点根目录开始的路径,以"/"开头
属性:
src 图片的路径
alt 规定图片的替代文本[图片无法显示时]
title 鼠标悬停时显示的内容
width 设置图片宽
height 设置图片高
border 不推荐使用。设置图象边框。
align  不推荐使用,即将弃用,请用 CSS 代之。
vspace 不推荐使用。定义图像顶部和底部的空白(垂直边距)
hspace 不推荐使用。定义图像左侧和右侧的空白(水平边距)。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多