Home >Web Front-end >HTML Tutorial >HTML-Introduction_html/css_WEB-ITnose
HTML-Introduction_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:061049browse
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: 1a309583e26acea4f04ca31122d8c535
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 1a309583e26acea4f04ca31122d8c535 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”>
HTML basic tags:
html---all tags will be included in the html tag, usually using angle brackets "100db36a723c770d327fc0aef2ce13b1" represents an element, and elements are one-to-one, with a beginning and an end. Use "73a6ac4ed44ffec12cee46588e518a5e" 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>
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>
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>
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>
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>
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:
040a8a15d8ad23cbb829774910e71a9d
f800d4160a1380b3ed3c4d7d1cc32100
0d035abfc44c7545796b08b57fb26447
Common attributes:
class
id
style
General attributes define a name for the label. You can later call it with CSS using this name, and then modify the style
813fe488962c2061ba9d3a2004d2287f-- -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>
b06b333258e05196653f3ffaf90a4a03---background color
<html> <head lang = "zh"> <meta charset = "UTF-8"> </head> <body bgcolor="#000"> </body></html>
8aa2918506a11e8a886e85949f1eb079---The attribute of the hyperlink, you can fill in the URL
66d61e71f4b83c949faadc3f8c86c3d9---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>
After clicking, a new tab page will pop up
HTML Formatting
subscript is the use of formatting
| 标签 | 描述 |
| a4b561c25d9afb9ac8dc4d70affff419 | 定义粗体文本 |
| 3d49bde0e0b2e042578ad34140b6c48e | 定义大号文字 |
| 907fae80ddef53131f3292ee4f81644b | 定义着重文字 |
| 5a8028ccc7a7e27417bff9f05adf5932 | 定义斜体文字 |
| d015d241ae6d34c34210679b5204fe85 | 定义小号文字 |
| 8e99a69fbe029cd4e2b854e244eab143 | 定义加重语气 |
| b96cac025db4031319c29e1eb68f19d6 | 定义下标文字 |
| 2cdea26b4c3988e37d674b56660962a7 | 定义上标文字 |
| 426be984ffbbb815d7d88e3543a85d91 | 定义插入文字 |
| 823db3943044a0a9a620ada8d4b1d965 | 定义删除文字 |
<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更改标签样式
e2dc2971d9340b3653455e3cdf6523af
这个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的链接
可以在3499910bf9dac5ae3c52d5ede7383485标签中实现链接，当然，也可以加入图片
比如我有一种皮卡丘的图片，在与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>
点击皮卡丘后，进入百度首页
好吧，今天就写到这里。其实HTML还是蛮简单的，学习之后，对于测试、开发、网页游戏都会有一定的帮助。