WEB前端入门-HTML5基础概述

最新推荐文章于 2024-09-06 19:40:02 发布

Eternal_tyq

最新推荐文章于 2024-09-06 19:40:02 发布

阅读量2.3k

点赞数 5

分类专栏： html5 文章标签： html web前端

本文链接：https://blog.csdn.net/Eternal_tyq/article/details/78430932

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML简介

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

HTML的结构

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

<html><!--开始-->
    <head>
        <!--头部信息，如<title>定义标题-->
    </head>
    <body>
        <!--主体信息，包含网页显示的内容-->
    </body>
</html><！--结束-->

HTML标签

文档结构标签

<html>...</html>:标识文档的开始和结束
<head>...</head>:标识文档头部区域
<body>...</body>:标识文档主体
eg.
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
这是我的第一个网页
</body>
</html>

测试结果：这里写图片描述

2.文本格式标签

<hi>...</hi>:标识标题文本标签，i可以为1-6，分别表示1-6级标题，字体大小依次缩小
<p>...</p>：标识段落文本
<br>:换行符
<pre>...</pre>标识预定义文本，即在此标签中的输入的空格、回车均有效

3.文字效果标签

<b>...</b>             定义粗体文字
<em>...</em>           定义着重文字
<i>...</i>             定义斜体文字
<small>...</small>     定义小号字
<strong>...</strong>   定义加重语气
<sub>...</sub>         定义下标字
<sup>...</sup>         定义上标字
<ins>...</ins>         定义插入字
<del>...</del>         定义删除字
<span>...</span>       定义普通字
<><>

eg.

<!DOCTYPE html>
<html>
<head lang="en">
    <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>

测试结果：这里写图片描述
4.超链接标签

<a>...</a>超链接识别标签
eg.
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>

测试结果：这里写图片描述
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 lang="en">
    <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>