WEB前端入门-HTML5基础概述

来源:Eternal_tyq 发布时间:2018-11-22 15:27:43 阅读量:980

HTML简介

HTML的全称是:Hypertext Marked Language,即超文本标记语言,是目前在网络上应用最广泛的语言,也是构成网页文档的主要语言,主要用来控制网页的结构。它是由其标签组成的描述性文本。使用HTML语言描述的文件,需要通过WEB浏览器显示出效果。


HTML的结构

HTML文档的基本结构由三个标签组成:

1

<html><!--开始-->

    <head>

        <!--头部信息,如<title>定义标题-->

    </head>

    <body>

        <!--主体信息,包含网页显示的内容-->

    </body>

</html><!--结束-->

1

2

3

4

5

6

7

8

HTML标签

文档结构标签

<html>...</html>:标识文档的开始和结束

<head>...</head>:标识文档头部区域

<body>...</body>:标识文档主体

eg.

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>测试</title>

</head>

<body>

这是我的第一个网页

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

测试结果:


2.文本格式标签


<hi>...</hi>:标识标题文本标签,i可以为1-6,分别表示1-6级标题,字体大小依次缩小

<p>...</p>:标识段落文本

<br>:换行符

<pre>...</pre>标识预定义文本,即在此标签中的输入的空格、回车均有效

1

2

3

4

3.文字效果标签


<b>...</b>             定义粗体文字

<em>...</em>           定义着重文字

<i>...</i>             定义斜体文字

<small>...</small>     定义小号字

<strong>...</strong>   定义加重语气

<sub>...</sub>         定义下标字

<sup>...</sup>         定义上标字

<ins>...</ins>         定义插入字

<del>...</del>         定义删除字

<span>...</span>       定义普通字

<><>

1

2

3

4

5

6

7

8

9

10

11

eg.


<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>测试</title>

</head>

<body>

<b>网页</b>

<em>网页</em>

<i>网页</i>

<small>网页</small>

<strong>网页</strong>

<sub>网页</sub>

<sup>网页</sup>

<ins>网页</ins>

<del>网页</del>

<span>网页</span>

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

测试结果: 

4.超链接标签


<a>...</a>超链接识别标签

eg.

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>测试</title>

</head>

<body>

<a href="http://www.baidu.com">百度</a>

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

测试结果: 

5.表单标签


<form action="提交目标地址" method="get/post"></form>

表单元素:

<input type="text"/>单行文本框  

<textarea></textarea>多行文本域  

<input type="password"/>密码框

<input type="radio" name="">单选按钮 

注:name值相同表示单选按钮组

<input type="checkbox"/>复选框

<input type="file"/>文件域

<input type="submit"/>提交按钮

<input type="reset"/>重置按钮

<input type="button">普通按钮

<button></button>按钮


下拉菜单:

<select>

 <option value="" selected></option>

</select>



下拉列表

<select multiple>

 <option value="" selected></option>

</select>

eg.

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>测试</title>

</head>

<body>

<form>

    <p>姓名:<input type="text"/></p>

    <p>密码:<input type="password"/></p>

    <p>性别:<input type="radio" name="性别"/>男<input type="radio" name="性别"/>女</p>

    <p>地址:<select>

        <option value="陕西省"selectd>陕西省</option>

        <option value="湖南省">湖南省</option>

        <option value="河北省">河北省</option>

        <option value="沈阳省">沈阳省</option>

    </select>

    </p>


    <p><input type="submit"/><input type="reset"/></p>

    <p><a href="http://www.baidu.com">忘记密码</a></p>

</form>

    </p>

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

测试结果:

--------------------- 



标签: PHP
分享:
评论:
你还没有登录,请先