HTML 学习+实践

来源：互联网发布：峨眉山知乎编辑：程序博客网时间：2024/06/03 18:15

**HTML 学习+实践**

**1、文本标签(命令)**

<pre></pre> 创建预格式化文本

<h1></h1> 创建最大的标题

<h6></h6> 创建最小的标题

创建黑体字

创建斜体字

<tt></tt> 创建打字机风格的字体

<cite></cite> 创建一个引用,通常是斜体

加重一个单词（通常是斜体加黑体）

加重一个单词（通常是斜体加黑体）

设置字体大小，从 1 到 7

设置字体的颜色,使用名字或十六进制值

**2、图形(命令)**

<img src="name"> 添加一个图像

<img src="name" align=?> 排列对齐一个图像:左中右或上中下

<img src="name" border=?> 设置围绕一个图像的边框的大小

<hr> 加入一条水平线

<hr size=?> 设置水平线的大小（高度）

<hr width=?> 设置水平线的宽度（百分比或绝对像素点）

<hr noshade> 创建一个没有阴影的水平线

**3、链接(命令)**

<a href="URL"></a> 创建一个超链接

<a href="mailto:EMAIL"></a> 创建一个自动发送电子邮件的链接

<a name="NAME"></a> 创建一个位于文档内部的靶位

<a href="#NAME"></a> 创建一个指向位于文档内部靶位的链接

**4、格式排版(命令)**

创建一个新的段落

将段落按左、中、右对齐

插入一个回车换行符

<blockquote></blockquote> 从两边缩进文本

<dl></dl> 创建一个定义列表

<dt> 放在每个定义术语词之前

<dd> 放在每个定义之前

<ol></ol> 创建一个标有数字的列表

<li> 放在每个数字列表项之前，并加上一个数字

<ul></ul> 创建一个标有圆点的列表

<li> 放在每个圆点列表项之前，并加上一个圆点

<div align=?> 一个用来排版大块HTML 段落的标签，也用于格式化表

**二、HTML基本语法**

<!--文件格式<html></html>(文件的开头与结尾)

主题<title></title>(放在文件的开头)

文头区段<head></head>(描述文件的信息)

内文区段<body></body>(放此文件的内容)-->

标题<h?></h>(?=1~6,改变标题字的大小)

标题对齐<h align=right,left,center></h>

字加大<big></big>

字变小

粗体字

斜体字

底线字

上标字

下标字

居中<center></center>

居左<left> </left>

居右<right> </right>

基本字体大小<basefont size>(取值范围从1到7，默认值为3)

改变字体大小(?=1~7)

字体颜色(RGB色码)

指定字型(?=宋体，楷体等)

网址链结<a href="URL"></a>

设定锚点<a name="?"></a>(?以容易记为原则)

链结到锚点<a href="#?"></a>(同一份文件)

<a href="URL#?"></A>(锚点不同文件)

显示图形<img src="URL"></a>

图形位置<img src="URL"align=top,bottom,middle,left,right>(分别为上、下、中、左、右的位置)

图形取代文字<img src="URL"alt=?>(无法显示图形时用)

图形尺寸<img src="URL" width=? height=?>(?以像素为单位)

连结图形边线<img src="URL"border=?>(?以像素为单位)

图形四周留白<img src="URL"hspace=? vspace=?>(?以像素为单位)

段落

断行

横线<hr>

横线厚度<hr size=?>(?以像素为单位)

横线长度<hr width=?>(?以像素为单位)

横线长度<hr width=?%>(?与页宽相比较)

实横线<hr noshade>(无立体效果)

背景图案<body background=图形文件名>(图形文件格式为gif和jpg)

背景颜色<body bgcolor=#rrggbb>(RGB色码)

背景文字颜色<body text=#rrggbb>(RGB色码)

未链结点颜色<body link=#rrggbb>(RGB色码)

已链结点颜色<body vlink=#rrggbb>(RGB色码)

正在链结点颜色<body alink=#rrggbb(RGB色码)>

三、具体在做html文件前,我们还有哪些需要做的：

1、网页图象一般有什么要求？

受网络传输速度制约，图象要尽量小。一般每幅最大不要20K。

图象格式一般为gif和jpg两种。通常单调的可以考虑使用gif压缩。用jpg处理照片比较合适，因为里面包含许多色彩的缓和变化。不管是哪种，做好后都应压缩以给图片减肥，但不要压得太多而失真。压缩可用JPEG Optimizer或Image Optimizer两种工具，若用photoshop5.5做的图象，保存时直接用Save For Web可进行压缩。另外，Gif格式可作成动画。

2、选择图片的网络存储空间

建议各位卖家们事先可以找一个稳定的空间来存放你的图片，以确保你的买家随时可以看到精美漂亮的商品。注意：不要把图片存放在免费相册里，因为这些相册的路径一般都是虚拟的，每一次浏览的URL都会改变，这对我们卖家来说是非常不好的。

另外要注意的一点是：有一些买家反映看到的卖家商品的图片是小叉叉，这是因为一些卖家在用HTML粘贴图片的时候把自己电脑中C盘或者D盘(也就是本地路径)的图片的路径直接直接复制在命令中，这样就会造成卖家自己可以看到这些图片而你的买家们看到的则是叉叉！所以卖家们在用HTML制作图片的时候一定要注意不要用本地路径直接粘贴图片！

四、练习的例子：（红色字体部分即可修改成你自己的自定义）

第一：用HTML来插入一个图片，

<imgsrc="http://www.cyberhome.cn/images/girl/PLMM_A.jpg">

Key:第二：用HTML来插入一个URL，

<ahref="http://www.cyberhome.cn/images/girl/PLMM_F.jpg">点击我进入</a>

Key:点击我进入第三：插入url的同时，插入图片，点击图片就可以进入这个url，如做一个插入网园淘艺坊的图片链接代码： <ahref="http://taobao.cyberhome.cn/"><imgsrc="http://www.cyberhome.cn/images/girl/PLMM_C.jpg"></a>

Key:第四：插入一段音乐

高山流水：<embedsrc="http://www.cyberhome.cn/images/hill-water.mid"width="72" height="25" autostart="false"loop="1" align="absmiddle"controls="smallconsole/playbutton/pausebutton/stopbutton"></embed>

Key:何日君再来：<ahref="http://202.108.23.172/m?ct=134217728&tn=baidumt, 何日君再来 &word=mp3,http://lib.jiutai.org/longresdemo/fWJjZGVmZ2hhYmVlbWhpbjE$.mp3,,[%BA%CE%C8%D5%BE%FD%D4%D9%C0%B4]&si = %BA%CE%C8%D5%BE%FD%D4%D9%C0%B4;;%B5%CB%C0%F6%BE%FD&lm = 16777216">何日君再来</a>

阅读全文

0 0