HTML基础

基本格式

这是编写HTML的基本格式，代表着文档类型，代表着文件所用语言，代表网页内容的编码是中文编码。

文字

1.标题

大标题
标题
标题
标题
标题
标题
标题

效果如下：

2.段落

这是一个长长长长长长段落
这是没有      被段落        包裹起来的句子
换行可以显示出来吗？
换行不可以显示在网页上

除非使用
标签

效果如下：

从上面可以看出来，如果只是在输入空格，那么无论输入多少个都只是显示一个，但是用 却可以显示多个空格。而且手动输入换行的效果只有一个不太明显的空格，除非我们使用
。

3.文字样式1

This text is bold 
This text is strong 
This text is big 
This text is italic
A1 
23
二十 十二

为了方便对比查看，真正html代码中的
换行被我删去了，如果想显示换行请在每一句后面添上
，后面的代码都是如此。
效果如下：

和标签用于加粗，标签用于放大字体，标签用于斜体，标签是下标，标签是上标，标签是删除线，标签是下划线。

4.文字样式2

大小
颜色
style
style
Style

效果如下：

其中的face属性是表示字体的种类，还有更多的种类可以上网查询名称。
而文字的大小是可以有单位的比如：lin表示英寸，cm表示厘米，mm表示毫米，pt表示磅或者点，em表示字体高，px表示像素。后两个是相对大小，前两个是绝对大小。

5.文字的排版
这里的文字排版用到了CSS里面的内部样式表。

    
    
    


居中的标题
上面的text-indent表示段落开头缩进2个字符，margin是表明段落的4个边缘的设置，Padding是设置段落边缘和段落文本之间的距离，默认是0。当我们要改变字体大小的时候，加入font-size:30px，然后整个网页的字体大小都会改变，又因为text-indent的取值单位是相对单位，字体大小，所以缩进仍然是两个字符不会改变。

效果如下：

6.字符间距调整

这是一段没有调整行间距，没有调整字间距的段落。

与上一行是默认行间距。

与上一行是默认行间距。

这是一段只调整行间距的段落。

与上一行是默认行间距。

与上一行是默认行间距。

这是这是一段只调整字间距的段落。这是这是一段只调整字间距的段落。这是这是一段只调整字间距的段落。

This is a paragraph that is not adjusted

This is a paragraph that is not adjusted

效果如下：

总而言之，想要改变一段的字间距，行间距，单词间距，可以在

标签里面设定风格，line-height是行间距，letter-spacing是字间距，word-spacing是单词间距。

背景

1.背景颜色
第一种方法，在标签的bgcolor属性中设置颜色

这是设置背景颜色的一个办法

效果如下：

第二种方法，#RRGGBB里面RR表示红色，GG表示绿色，BB表示蓝色，这三个颜色都用十六进制表示，取值从00～FF，可以根据自己的喜好配比出合适的背景颜色。

这是设置背景颜色的一个办法

效果如下：

背景颜色2.png

第三种方法，RGB(rrr,ggg,bbb)里面的每一个参数都是用十进制来表示，跟第二种方法有点像，这种方法在HTML里面用的较少，在编程时用的比较多。

这是设置背景颜色的一个办法

效果如下：

2.背景图片
这个要分情况讨论。
当这个网页的HTML文档和图片在同一个文件夹下面的时候

这是设置背景图片的一个办法

但是如果图片和HTML文档不在同一个文件夹里面的时候，可以用相对路径进来找到图片。
比如，有一个文件夹，里面有名字叫做tim.jpg的图片，还有一个叫example的文件夹，而我们正在编写的HTML文档在example文件夹里面。

这是设置背景图片的一个办法

如果我们编写的HTML文档在example文件夹里面，同时文件夹里面还有一个image的文件夹，而我们要用的图片在image文件夹里面的时候。

这是设置背景图片的一个办法

还有一种方法是通过绝对路径来寻找图片。至于查看一个文件的绝对路径可以通过查看文件属性来获得。

这是设置背景图片的一个办法

以上的几种方法的显示效果如下：

链接

1.文字链接

百度

效果如下：

标签定义一个链接，其中的href属性是链接的地址，之间的是显示在网页上的文字。

2.图片链接

![](image/tim.jpg)

效果如下：

然后在网页上点击图片就会跳转页面，到另一个网页。其中中的src属性填写的是图片地址，可以填写相对路径，也可以填写绝对路径。

3.重要属性
target属性有四个取值：

• _blank：代表在新窗口打开这个链接。
• _parent：代表在浏览器的父窗口打开这个链接。
• _self：代表在当前窗口打开这个链接。
• _top：在最顶层的窗口打开这个链接。
  name属性可以实现同一个网页内的跳转。
  比如：

查看 Chapter 4。

Chapter 4

效果如下：

把代码第二句插入想要跳转到的地方，比如第四章的开头，把第一句放进目录，然后在目录点击 查看Chapter4 就会跳转到第二句标签所在的地方。

---

HTML基础就暂时写道这里。有什么遗漏等我下次再补充。