HTML---简介

什么是HTML?

HTML是用来描述网页的一种语言

HTML是超文本标记语言(Hyper Text Markup Language)

HTML不是变成语言,是一种标记语言

 

HTML新特性

用于绘画的canvas标签

用于媒介回放的video和audio元素

对本地离线存储更好支持

新的特殊内容元素

        如:article、footer、header、nav、section

新的表单空间

        如:calendar、date、time、email、url、search

浏览器的支持

        Safari、Chrome、Firefox以及Opera包括IE9基本支持了HTML5

 

HTML基础

声明:<!DOCTYPE>

HTML也有多个不同的版本,只有完全明白页面中使用的确切HTML版本,浏览器才会完全正确的显示出HTML页面。这就是<!DOCTYPE>的用处。

<!-- HTML 5: -->
<!DOCTYPE html>

<!-- HTML 4.01: -->
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”>

<!-- XHTML 1.0: -->
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

 

HTML基础标签:

html---所有的标签都会包含在html这个标签当中,一般用尖括号”<html>”表示元素,而元素是一对一对的,有开始就有结束,用”</html>”表示元素结束。元素开始喝元素结束中间,就是元素的内容啦。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

 

head---用来定义“头部”的信息,比如:编码格式

这个编码格式还是有必要定义的,如果不定义就会在预览的时候出现乱码

<html>
 <!-- en代表英文,zh代表中文 -->
    <head lang = "zh">

    </head>

    <body>
        我就是要在body里面直接写文字。哼哼。
    </body>

</html>

image

定义编码UTF-8之后,文字就可以正常显示出来了。

<html>
 <!-- en代表英文,zh代表中文 -->
    <head lang = "zh">
         <!-- 编码格式“UTF-8” -->
        <meta charset = "UTF-8">
    </head>

    <body>
        我就是要在body里面直接写文字。哼哼。
    </body>

</html>

image

 

body---用来表示正文,一般显示页面的内容,基本网页编码的一切,都是在body里面进行的。出了title标题标签还有一些特殊的标签

title---用来表示标题的

h---用来表示标题,分别有h1、h2、h3、h4、h5、h6来表示文字不同的大小

<html>

 <!-- en代表英文,zh代表中文 -->
    <head lang = "zh">
         <!-- 编码格式“UTF-8” -->
        <meta charset = "UTF-8">
        <!--  标题 “Hello HTML” -->
        <title>我是title,我就是浏览器的标题,O(∩_∩)O</title>
        
    </head>

    <!-- 用来显示正文 -->
    <body>
        我是body,你看到我了吗?
         <h1>我是h1,我是最大的,O(∩_∩)O</h1>
        <h2>我是h2,我是还算比较大了啦~</h2>
        <h3>我是h3,我还算正常吧。</h3>
        <h4>我是h4,我不是太大</h4>
        <h5>我是h5,我怎么这么小??</h5>
        <h6>我是h6,我是最小的,T_T</h6>
    </body>

</html>

可以看到,设置后的效果

image

 

p---用来表示段落

其实p标签和直接在body里面写,显示出来的效果是一样的,但是p标签表示的是一个段落,如果在body里面直接写文字的话,就没法换行了

<html>

 <!-- en代表英文,zh代表中文 -->
    <head lang = "zh">
         <!-- 编码格式“UTF-8” -->
        <meta charset = "UTF-8">
        <!--  标题 “Hello HTML” -->
        <title>我是title,我就是浏览器的标题,O(∩_∩)O</title>
        
    </head>

    <!-- 用来显示正文 -->
    <body>
       我就是要在body里面直接写文字。哼哼。
        我是第二行。
        我是第三行。

         <p>我还是老老实实呆着小p里面吧~</p>
        <p>我是第二行。</p>
        <p>我是第三行。</p>
    </body>

</html>

image

HTML属性

标签可以拥有属性为元素提供更多的信息,属性以键/值的形式出现,比如:href = “www.baidu.com”

常用标签属性:

<h1 align>

<body bgcolor>

<a href="" target="">

通用属性:

class

id

style

通用属性都是给标签定义一个名字,后面可以通过这个名字用CSS来调用,然后修改样式

 

<h1 align="">---对其属性

<html>
    <head lang = "zh">
        <meta charset = "UTF-8">
    </head>
    <body>
        <h3 align="center">我是标题3,我是center居中的属性</h1>
        <h3 align="left">我也是标题3,我是left左对齐的属性</h1>
        <h3 align="right">我还是标题3,我是rigth右对齐的属性</h1>
    </body>
</html>

image

<body bgcolor="">---背景颜色

<html>
    <head lang = "zh">
        <meta charset = "UTF-8">
    </head>
    <body bgcolor="#000">
    </body>
</html>

image

 

<a href="">---超链接的属性,可以填URL

<a href="" target="">---target是点击超链接后的打开方式,默认是self,如果设置成_banlk就可以在新标签页中打开了。

<html>
    <head lang = "zh">
        <meta charset = "UTF-8">
    </head>
    <body>
        <a href="http://www.baidu.com" target="_banlk">点我就能上百度</a>
    </body>
</html>

image

点击之后,就会跳出新的标签页

image[43]

 

HTML格式化

下标就是格式化的使用

标签 描述
<b> 定义粗体文本
<big> 定义大号文字
<em> 定义着重文字
<i> 定义斜体文字
<small> 定义小号文字
<strong> 定义加重语气
<sub> 定义下标文字
<sup> 定义上标文字
<ins> 定义插入文字
<del> 定义删除文字
<html>
    <head lang = "zh">
        <meta charset = "UTF-8">
    </head>
    <body>
        <b>我是b标签格式,我是加粗的</b>
        <br /><br />
        <big>我是big,我是显示大字体</big>
        <br /><br />
        <em>我是em,我代表着重语气</em>
        <br    /><br />
        <i>我是i,我定义斜体的文字</i>
        <br /><br />
        <small>我是small,我定义小号字体</small>
        <br /><br />
        <strong>我是strong,我定义加重语气</strong>
        <br /><br />
        我的出现是为了体现出sub是下标的<sub>我是sub,我是下标文字</sub>
        <br /><br />
        我也是出了让sup体现上标的<sup>我是sup,我是下标文字</sup>
        <br /><br />
        <ins>我是ins,我是插入文字,我有一条下横线</ins>
        <br /><br />
        <del>我是del,我是删除文字,我中间有条横线代表我已经被删除了。</del>
    </body>
</html>

image

 

HTML样式

外部样式表

使用link可以用来调用css更改标签样式

<link rel="stylesheet" type="text/css" href="[css的路径]">

这个link要写在头文件里面,也就是head标签里面,一般样式都会写在head里面。写在头文件里面比较方便,而且后期如果想要更改,也可以很快的找到link

html代码

<html>
    <head lang = "zh">
        <meta charset = "UTF-8">
        <link rel="stylesheet" type="text/css" href="hello_css.css">
    </head>
    <body>
        <h1>我是标题1,我会被hello_css.css给引用成红色的</h1>
    </body>
</html>

css代码

h1{
    color: red;
}

image

内部样式表

就是将css样式直接写进style标签里面

<html>
    <head lang = "zh">
        <meta charset = "UTF-8">
        <link rel="stylesheet" type="text/css" href="hello_css.css">
        <style type="text/css">
            h2{
                color: green;
            }
        </style>
    </head>
    <body>
        <h1>我是标题1,我被css样式引用成红色的</h1>
        <h2>我是标题2,我被style改成绿色的</h2>
    </body>
</html>

image

 

内联样式表

就是直接在标签里面写style,当然,这种方法后期修改就得一个一个的改了。非常麻烦

<html>
    <head lang = "zh">
        <meta charset = "UTF-8">
        </style>
    </head>
    <body>
        <p style="color: blue">我是小p</p>
    </body>
</html>

image

 

HTML的链接

可以在<a>标签中实现链接,当然,也可以加入图片

比如我有一种皮卡丘的图片,在与html文件同目录的img文件夹下,下图是目录结构

image

<html>
    <head lang = "zh">
        <meta charset = "UTF-8">
        </style>
    </head>
    <body>
        <!-- 文字链接 -->
        <a href="http://www.baidu.com">点我进百度</a>
        <br />
        
        <!-- 图片链接 -->
        <a name="pika" href="http://www.baidu.com">
            <img src="img/pika.png" alt="pika" width="250" height="200">
        </a>
    </body>
</html>

image

点击皮卡丘后,进入百度首页

image

好吧,今天就写到这里。其实HTML还是蛮简单的,学习之后,对于测试、开发、网页游戏都会有一定的帮助。

posted @ 2015-01-06 18:38  ﹏猴子请来的救兵  阅读(1274)  评论(0编辑  收藏