html基础教程博客,小编Mageo和您一起学习html基础教程

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

今天小编mageo给大家带来的是HTML基础教程之html最基本的代码含义和书写方式。

一、HTML标签

1、无语义标签：

、 。

2、语义标签(有含义的)：h1-h6、p、img、embed、a、ul、ol、table.

二、html应用。

1、h标签一共有6个，分别是h1-h6,写法：

h代表标题的意思，具备加粗加重属性，从h1-h6依次减小，h1最大。正常H标签都用于文章的标题。

2、p标签，段落。写法：

这是一个段落

3、img标签，图片引入标签，注意，这个标签比较特殊，他是自闭合标签，也就是不用结束标签，写法：

我们解释一下这段代码：src后面是图片路径。alt是替文本，也就是当图片显示慢或无法显示的时候就先显示这里的文字。title就是当鼠标移

动到图片上的时候就会显示title后面的文本信息。

需要注意的是img标签属于内联元素，也即行内元素，不是块状元素，他是一个特殊的内联元素，叫做内联替换元素。

内联块状元素是可以设置宽和高的，而且自身带有几个像素的margin。所以为了设置方便，一般我们在css初始化的时候都把img用

display:block转换为块元素，再把margin设为0.

4、列表标签

A、无序列表Ul,写法：

B、有序列表ol，写法：

一般列表的默认项目符号，比如小圆点，比如1，2，3，4等这些项目符号我们都不让他显示。

在样式里把他去除，list-style:none。为的是各个浏览器能够兼容。

5、表格标签。

TD代表列，tr代表行。表格目前不怎么常用，因为用表格布局的网页会产生太多的冗余代码。

6、a标签。

也就是超级链接标签

A、写法：

每集博客

看的出来a标签也是成对出现的，a标签是行内元素标签。其中的href=后面是链接到的地址，target后面是选择在原页面打开还是在新页面打开

。title就不说了，前文学过。标签包围到中间的“每集博客”，就是被链接的文本。我们点他就可以链接到ql2015.cn网址了。

B、超链接还有一种写法：

去a3位置

这是a3的位置

这种叫做锚点链接，首先设置锚点，比如上面name=”a3〃就是锚点的名字为a3，那么href=”ql2015.cn#a3〃就是链接到当前页面注意是当前页面

的a3锚点的位置。

C、超链接的CSS伪类样式。

我们都知道我们点击一个链接的时候会出现，当你鼠标放到链接上就变颜色了，点击又变一个颜色，访问完以后又变一个颜色，这个效果就是

通过超级链接的伪类来设置的。我们只需要设置a标签的css样式就可以了。

a:link{color:black;} 原本颜色

a:viseted{color:gray;} 访问完的颜色。

a:hover{color:red;} 鼠标放上去颜色

a:active{color:orange;} 鼠标点中时颜色。

需要注意的是，这四个样式的顺序一定不要颠倒，不然不会正常显示，也就是上面的顺序书写。

7、字符代码书写。

比如我们常用的大于号，小于号，版权标注等这些符号，如果我们直接在html代码里书写是无法在前台显示的，所以他们有特殊的写法。

比如大于号：> 小于号：< 版权符号：&copy等，也就是用&+实体代码+分号。

作者:mageo，出自每集博客，尊重作者劳动，转载请注明出处：http://www.ql2015.cn，谢谢！