html骨架标记

原创
2013/03/01 10:02
阅读数 107

第一讲

调出文件的扩展名:工具--文件夹选项--查看--去掉隐藏已知文件夹类型的扩展名

HTML是超文本标记语言,作用是控制网页内容,描述内容。

第二讲

Meta标记用于定义文件信息

1、meta标记用于定义文件信息,对网页文件进行说明,便于搜索引擎查找。放置于<head><head/>之间

2、设置关键字:

3、<meta name=keywords content=value>多个关键字内容之间可以用,分隔

4、设置描述:<meta name=description content=value>

5、设置作者:<meta name=author content=作者名>

6、设置字符集:<meta http-equiv=content-type content=text/html;charset=gb2312>

7、设置页面定时跳转:<meta http-equiv=refresh content=2;URL=http://www.itcast.cn/>

第三讲

1、editplus快捷键,复制一行:ctrl+j

2、网页主体标记body:注释<!---->body属性:<body bgcolor=背景颜色 background=背景图像 text=文本颜色 link=链接文本颜色 vlink=访问过的文本颜色 alink=激活的链接文本颜色 leftmargin=左边界 rightmargin=右边界 topmargin=上边界 bottommargin=下边界>

3、<font>标记:<font color=文本颜色 size=字号 face=字体>文本</font>

注:网页中的文本字体、字号一般通过CSS修饰

颜色

英文名称

十六位进制

颜色

英文名称

十六位进制

白色

white

#FFFFFF

黑色

black

#000000

红色

red

#FF0000

绿色

green

#00FF00

蓝色

blue

#0000FF

灰色

gray

#999999

4、html代码时的流程:先写我们的控制内容的标记,内容比较重要,可以在语义上加强<strong>关键字</strong>;文章网页的主题--推荐使用<h1>文章标题</h1>

5、字符格式

功能

标记

加粗

<b>文本</b>

斜体

<i>文本</i>

加强语气(加粗)

<strong>文本</strong>

加强语气(斜体)

<em>文本</em>

下划线

<u>文本</u>

删除线

<s>文本</s>

上标

<sup>文本</sup>

下标

<sub>文本</sub>

6、段落标记:

格式:<p align=对齐方式>文本内容</p>

属性名称

属性值

说明

align

left

左对齐(默认)

center

居中

right

右对齐

段落标题:<hx align=对齐方式>文本内容</hx>

说明:x取值[1--6]hx内的文本会自动加粗显示。

Hx针对的对象是段落,而font针对的对象是任意文本。

换行(换行不换段):<br/>

7、水平直线<hr/>

属性名称

属性值

说明

size

像素(绝对设置)

以数字表示,属性值越大,线越粗

百分比(相对设置)

%表示,属性值越大,线越粗

width

像素(绝对设置)

长度不会随着视窗的改变而改变

百分比(相对设置)

长度会随着视窗的改变而改变

xhtml中,所有的标签都必须要用属性值,如果没有,使用属性名,例如:noshade=noshade实体线

8、特殊标记

定义一个快引用:使文本缩进

格式:<blockquote cite=被引用的url地址>文本内容</blockquote>

预格式化:<pre></pre>;显示已经格式化好的文字,不加此标记的话,HTML浏览器会忽略所有空格和制表符。

9、HTML文档中使用特殊字符

特殊字符

转义码

空格

 

版权号

©

注册商标

®

"

&

&

<

<

>

>

10、列表标记用途:

1)无序列表:<ul type=项目符号类型>

               <li type=项目符号类型>内容1</li>

               <li>内容2</li>

               ...

               </ul>

参数值(必须小写字母)

描述

disc

circle

square

2)有序列表:<ol start=列表起点 type=项目符号类型>

               <li>内容1</li>

               <li>内容2</li>

               ...

              </ol>

属性名称

属性值

说明

type

1

表示以1,2,3,4来表示

a

表示以a,b,c,d来表示

A

表示以A,B,C,D来表示

i

表示以i,ii,iii来表示

I

表示以I,II,III来表示

(3)定义列表:

<dl>

<dt>标题1</dt>

<dd>内容1</dd>

<dd>内容2</dd>

<dt>标题1</dt>

<dd>内容1</dd>

<dd>内容2</dd>

</dl>

属性

说明

<dl></dl>

定义列表

<dt></dt>

表示一个项目

<dd></dd>

表示一个项目下的更详细的内容的解释

11、Web上支持的图片格式

(1)GIF(图形交换格式):GIF格式文件最多只能保存256种颜色。该格式支持透明色,支持动画效果。

(2)JPEG(联合图像专家组):该格式不支持透明色及动画,颜色可达1670万种。

(3)PNG(网络可移植格式):该格式支持透明色,不支持动画,颜色从几种到1670万种。

12、图片标记:<img src=图片的路径/>

路径:绝对路径:提供目标文档的完整主机名称、路径信息、及文档全称

      根相对路径:从站点根目录开始的路径,以/开头

      相对路径:从当前文档开始的路径

图片与网页在同一个文件夹内:<img src=01.png/>

图片所在的文件夹与网页在同一个文件夹内:<img src=pic/01.png/>

图片所在的文件夹与网页所在的文件夹在同一个文件夹内(../表示向上一级)<img src=../01.png/>

13、图片属性

属性名称

属性值

说明

src

URL

图片的路径

alt

文本

规定图片的替代文本[图片无法显示时]

title

文本

鼠标悬停时显示的内容

width

像素/百分比

设置图片宽

height

像素/百分比

设置图片高

border

数字

设置图象边框

align

left

图片靠左,文字靠右

right

图片靠右,文字靠左

top

文字垂直居上靠

middle

文字垂直居中

bottom

文字垂直居下(默认)

vspace

像素

定义图像顶部和底部的空白(垂直边距)

hspace

像素

定义图像左侧和右侧的空白(水平边距)

展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部