HTML-Introduction_html/css_WEB-ITnose-HTML Tutorial-php.cn

What is HTML?

HTML is a language used to describe web pages

HTML is Hyper Text Markup Language (Hyper Text Markup Language)

HTML is not a language, it is a markup Language

New HTML features

Canvas tag for painting

Video and audio elements for media playback

Yes Local offline storage better supports

New special content elements

Such as: article, footer, header, nav, section

New form space

Such as: calendar, date, time, email, url, search

Browser support

Safari, Chrome, Firefox and Opera including IE9 basically support HTML5

HTML Basics

Statement:

HTML also has many different versions. Only by fully understanding the exact HTML version used in the page will the browser be completely correct. The HTML page is displayed. That's what is for.

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

Copy after login

HTML basic tags:

html---all tags will be included in the html tag, usually using angle brackets "" represents an element, and elements are one-to-one, with a beginning and an end. Use "" to represent the end of an element. The beginning of the element and the middle of the end of the element are the content of the element.

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

Copy after login

head---information used to define the "head", such as: encoding format

This encoding format still exists It is necessary to define it. If it is not defined, garbled characters will appear in the preview.

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

Copy after login

After defining the encoding UTF-8, the text can be displayed normally. .

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

Copy after login

body---is used to represent the body, generally displays the content of the page, and everything in basic web page encoding is It's done inside the body. In addition to the title tag, there are some special tags

title--- used to represent the title

h--- used to represent the title, including h1, h2, h3, and h4. , h5, h6 to represent different text sizes

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

Copy after login

You can see the effect after setting

p---is used to represent a paragraph

In fact, the p tag has the same display effect as writing directly in the body, but the p tag represents a paragraph. If you write text directly in the body, , there is no way to wrap the line

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

Copy after login

HTML attributes

Tags can have attributes to provide more information for the element, and the attributes are keyed / appears in the form of a value, for example: href = "www.baidu.com"

Common tag attributes:

Common attributes:

class

style

General attributes define a name for the label. You can later call it with CSS using this name, and then modify the style

-- -To its properties

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

Copy after login

---background color

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

Copy after login

---The attribute of the hyperlink, you can fill in the URL

---target is the opening method after clicking the hyperlink. The default is self. If it is set to _banlk, it can be opened in a new tab.

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

Copy after login

After clicking, a new tab page will pop up

HTML Formatting

subscript is the use of formatting

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

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

Copy after login

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>

Copy after login

css代码

h1{    color: red;}

Copy after login

内部样式表

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

Copy after login

内联样式表

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

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

Copy after login

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" width="250" height="200">        </a>    </body></html>

Copy after login

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

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