Heim  >  Artikel  >  Web-Frontend  >  HTML-简介_html/css_WEB-ITnose

HTML-简介_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:51:061032Durchsuche

什么是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基础

声明:

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

<!-- 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这个标签当中,一般用尖括号””表示元素,而元素是一对一对的,有开始就有结束,用””表示元素结束。元素开始喝元素结束中间,就是元素的内容啦。

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

 

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

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

<html> <!-- en代表英文,zh代表中文 -->    <head lang = "zh">    </head>    <body>        我就是要在body里面直接写文字。哼哼。    </body></html>

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

<html> <!-- en代表英文,zh代表中文 -->    <head lang = "zh">         <!-- 编码格式“UTF-8” -->        <meta charset = "UTF-8">    </head>    <body>        我就是要在body里面直接写文字。哼哼。    </body></html>

 

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>

可以看到,设置后的效果

 

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>

HTML属性

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

常用标签属性:

通用属性:

class

id

style

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

 

---对其属性

<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>

---背景颜色

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

 

---超链接的属性,可以填URL

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

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

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

 

HTML格式化

下标就是格式化的使用

标签 描述
定义粗体文本
定义大号文字
定义着重文字
定义斜体文字
定义小号文字
定义加重语气
定义下标文字
定义上标文字
定义插入文字
定义删除文字

<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>

 

HTML样式

外部样式表

使用link可以用来调用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;}

内部样式表

就是将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>

 

内联样式表

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

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

 

HTML的链接

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

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

<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"    style="max-width:90%"  style="max-width:90%">        </a>    </body></html>

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

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn