文章目录
1.1 HTML基本介绍
学习HTML，主要学习的就是HTML的标签、属性以及HTML结构，先来认识HTML文档的构成要素。
1.标签
一个页面的HTML部分是由各个标签组成的，一个典型的和HTML页面标签结构如下：
<html>
<head></head>
<body>
<h1>我是标题</h1>
<p>我是段落</p>
</body>
</html>
标签在HTML中成对的出现，起始标签是由一堆尖括号和英文字母组成的，如<p>,结果标签在起始标签的英文字母前面加一个/，如</p>。这样的一对标签内填写的内容就是这对标签包含的内容。<html>标签是跟标签，所有页面中的其他内容都要放置在<html>标签中，放置的是页面要显示的主要内容；<head>标签中放置一些配置信息，例如引用CSS、JavaScript外部脚本等。
2.属性
每个HTML标签都可以指定属性，为标签指定属性的示例如下：
<p class="wsb" id="wzy">段落内容<p>
上面代码中，为p标签指定了两个属性，分别是class属性和id属性，并且为这两个属性设定了属性值。不同的标签可以设定的属性不同，但是所有标签都可以设定class属性和id属性，这两个属性和css关系紧密，是最常用的属性，将在后面进行介绍。
3.结构
HTML是一个web前端页面的骨架，因此HTML的结构很重要。HTML主要通过标签的嵌套实现结构的搭建。例如，上面的例子就构成了一个最基本的结构，body标签中嵌套了标题和一个段落文字内容。复杂的HTML结构原理也一样，在制作web页面之前，先画好设计图，然后根据页面各个元素的嵌套关系进行梳理，就可以快速搭建起web页面的框架。
1.2 HTML常用标签
1.标签
HTML中内置了一些可以用来设置标题的标签，从<h1>一直到<h6>,这些标签内放置的文字都有预选定义好的玩文字样式。它们内部的文字字号比较大，并且已经进行了加粗。h1的标题最明显，h6的标题最小。
虽然标题标签已经预先设定好了样式，但是仍能然可以通过css等手段进行自定义的样式修改。在HTML中，有很多和标题标签类似的标签，中心标签都有自己预先设定好的样式，但它们不是固定的，都可以借助css等手段进行修改。
<html>
<head>
</head>
<body>
<h1>点击下方链接跳转至百度</h1>
<a href="www.baidu.com">跳转至百度</a>
</body>
</html>
在上面的例子中，单击“跳转至百度”，页面就会跳转至href属性指定的页面。
和标题标签一样，超链接标签也有预先定义好的样式，例如鼠标滑过超链接会出现下划线，单击后超链接颜色会发生变化。这些也都是可以通过css代码进行修改的。
2.超链接
超链接标签是使用横幅的标签，用<a></a>表示。超链接的起始和终止标签之间放置要显示的内容。超链接的最主要目的是跳转到链接的页面，这就选哟设定超链接标签的核心属性href。href属性设定为一个网站链接时，当单击页面上这个标签的元素后，就会跳转到对应的链接。
3.块元素
HTML中最常用的是<div>元素。页面中的每一个部分都可以看成是一个div。一般的页面都是用一系列的div标签构建起来的，通过div标签搭建页面结构。下面是使用<div>标签构建页面的简单例子。
<html>
<head>
</head>
<body>
<div>
<p>我是第一部分</p>
<div></div>
</div>
<div>
<p>我是第二部分</p>
</div>
</body>
</html>
在上面的代码中，通过div元素的嵌套，将页面分成了两部分，每个部分又可以使用div元素继续划分。
4.图像标签
在一个页面上引入图像的方法也很简单，只需要借助<img>标签就可以。img标签有一个属性是src，这个属性用来指定要显示的图像路径，这样就可以在页面中显示对应的图像了。
1.3HTML表单
表单是HTML中很重要的一部分。表单对应的标签是form元素，内部放置多个可输入的标签input以及提交按钮。下面是一个form表单的实例。
<body>
<form>
姓名：<input type="text" /><p></p>
电话：<input type="text" /><p></p>
<input type="submit" value="提交"/>
</form>
</body>
上面的代码定义了一个最基本的表单，下面将对这个表单的各个元素逐一介绍。
1.form标签
form标签是表单的容器元素，内部通过一些输入标签组建一个HTML表单。form表单有一些重要的可设置属性。首先是method属性，它定义了当表单提交时的提交方式，包括GET,POST等方法。其次是action属性，action属性指定表单提交到哪个地址，也就是后台提供的对应接口。
2.input标签
input标签是表单内主要的内容元素。一个input标签对于一个输入框，用户可以在其中输入内容。input标签的type属性定义了这个输入框的类型，当像上面的代码一样将type设置为password时，表示这个输入框要输入的是密码，当用户在这种input标签中输入内容时，网页会自动将用户单击这个按钮时，用户会自动提交这个表单到action指定的链接。
在HTML5新规范中，为input标签的type属性添加了很多其他功能丰富的属性值，可以用来建立表单中各种各样的输入框。后面详讲。
另一个关于input很重要的属性是name属性，这个属性是前端和后端交互的关键。input标签设定的name值是什么，服务器获取到的输入标签的代号就是什么。因此在为input元素设定name属性时，一定要注意和后台同学正确对接。
1.4 HTML和CSS的简单交互
HTML的样式需要CSS来进行设置，二者关系非常紧密。如何使用CSS进行web页面丰富的样式设定在后面详讲，先的简单介绍HTML和CSS交互的基本方法。
HTML的大部分标签都可以设定两个属性，一个时class属性，另一个时id属性。通过这两个属性，就可以在CSS中为这些元素设定样式。可以为多个标签设定相同的class属性，然后在CSS 中，使用特点的CSS语法可以获取这些HTML元素，并为其设定样式。id属性的道理和class属性类似，只是原则上一个id值只能出现一次。
HTML是搭建wed页面所需的最基本的知识，也是一个web页面的骨架。HTML的学习很简单，只要经常使用就能非常熟练。
560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
