HTML-简介_html/css_WEB-ITnose-html tutorial-php.cn

什么是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”>

Salin selepas log masuk

HTML基础标签：

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

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

Salin selepas log masuk

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

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

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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>

Salin selepas log masuk

可以看到，设置后的效果

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>

Salin selepas log masuk

HTML属性

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

常用标签属性：

通用属性：

class

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>

Salin selepas log masuk

---背景颜色

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

Salin selepas log masuk

---超链接的属性，可以填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>

Salin selepas log masuk

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

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>

Salin selepas log masuk

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>

Salin selepas log masuk

css代码

h1{    color: red;}

Salin selepas log masuk

内部样式表

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

Salin selepas log masuk

内联样式表

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

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

Salin selepas log masuk

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>