HTML网页制作常用标签及说明-前端开发入门

篇文章我们介绍了怎么创建一个最基本的网页，这篇我们介绍一下经常被使用的标签及用途。

显示在浏览器中的内容都要添加在基本模板中的body标签的中间，这点一定要记住！！

下面的body标签中各个标签，我做了解释说明，大概了解各个标签长什么样子，能记住就更好了。

下面的HTML代码可以直接复制到你的网页中（创建HTML文件的方法上篇文章有介绍）

<!DOCTYPE html>

<head>

<title>这里是网页的标题，你看到在哪里显示的了吗？——橙先生</title>

</head>

<body>

<div>div标签可以理解为是个空盒子，什么都能装下</div>

这是一张图片，注意这里的img标签形式，这是个单标签

<a href="需要跳转到的网址或是文件，如" target="_blank">这个是文字的链接，也可以在其他内容上添加（比如图片）</a>

<p>在这里填入文字</p>

<span>在这里添加你想要的内容</span><span>!!!!!!这里是另外一段内容</span>

<br>

<ul>

<li>这里是无序列表1</li>

<li>这里是无序列表2</li>

<li>这里是无序列表3</li>

</ul>

<ol>

<li>这里是有序列表1</li>

<li>这里是有序列表2</li>

</ol>

<table>

<tr>

<td>表格中第一行的第1列</td>

<td>表格中第一行的第2列</td>

</tr>

<tr>

<td>表格中第二行的第1列</td>

<td>表格中第二行的第2列</td>

<td>表格中第二行的第3列</td>

</tr>

</table>

</body>

</html>

上面的内容已经大致了解了吧？下一篇我们将介绍各种常用到的样式，让各个标签更加的美观。记得关注一下哦！

示：点击上方"WEB网页设计自学平台"↑ 可以订阅噢！

摘要 51RGB官方微信在学习CSS制作知识之前，我们必须需要认识的HTML什么基础知识。

一、必知HTML基础-CSS教程系列

搞清浏览器作用
搞清什么是HTML
html作用
html我们涉及哪些基础知识
常见html单词及单词功能作用有哪些
html结构
html与CSS关系

1、搞清浏览器作用

浏览器主要作用是浏览网页作用，在DIV+CSS制作开发时候仍然是浏览我们制作开发重构网页作用。浏览器可测试我们开发的CSS网页兼容性、网页效果、因开发疏忽导致错误等作用。

在CSS测试（CSS工具）里常用浏览器包括IE6、IE7、IE8、火狐（FF）、谷歌（chrome）、苹果Safari、Opera主流浏览器。至于傲游、360浏览器因为他们使用你系统自带的IE内核，所以不必考虑，只要支持你浏览器版本即支持类似这2款浏览器

需要兼容浏览器有哪些？http://www.51rgb.com/css-tool/t86.shtml

2、搞清什么是HTML

html是hypertext markup language的缩写，即超文本标记语言。可以这样理解，HTML文件是一定规则规律以html\htm等命名后缀名的文本文件。

3、html作用

HTML作用，通过一定html自身语法结构（html结构），显示文字、图片、动画（flash）、视频或音频音乐。而CSS则是配合html实现漂亮的各式各样的页面内容。

4、html我们涉及哪些基础知识

Html扩展名、html源代码、DOCTYPE、html结构、head标签、charset

5、常见html单词及单词功能作用有哪些

a、B(strong)：加粗

b、P：换行实例：<p>我是第一段内容</p><p>我是第二段内容</p>

c、Br：提行实例：我是第一排<br />我是第二排内容

d、px：像素、长度宽度单位

实例：width:30px; 宽度30像素

e、ul、ol、li列表标签实例：

<ul> 
<li>列表一</li> 
<li>列表二</li> 
<li>列表三</li> 
</ul> 
<ol> 
<li>列表一</li> 
<li>列表二</li> 
<li>列表三</li> 
</ol>

f、div与span：都是html标签

实例：<div>我占一行</div><span>我多长占多长位置</span>

两者区别：DIV占用1整排，而SPAN所占位置是内容多少占用多长长度

g、img：图片引用标签

<img src="/css-images/css-logo.gif" />图片标签

h、dl dt dd：CSS的另类表格组合

实例：

<dl>

</dl>

j、title：标题标签

实例：<title>标题</title>

特点，在一个网页内只能使用一次（只能出现一次）

6、html结构 - TOP

这里Html结构可用于每次新建制作网页模板使用。

旧html结构：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>DIVCSS5标题</title>

</head>

<body>

具体网页呈现内容

</body>

</html>

经过CSS教程网的DIVCSS5优化后的HTML结构（可用于每次新建HTML模板）：

<!DOCTYPE html>

<html>

内容www.divcss5.com提供

7、html与CSS关系 - TOP

搞清楚html与CSS关系很重要，也是认识CSS基础。html与CSS关系解释：HTML内放置显示网页要显示的具体内容（图片、文字、动画等）而CSS是控制HTML内这些具体内容的怎么显示、怎么排版、颜色、大小、宽度、高度、左右布局等显示样式。

以上7点是学习CSS的html基础，可能还不完善，但是在以后运用的时候DIVCSS5会给大家详细、本简单CSS教程分为15节，此节DIV CSS教程以文字内容为主，以后会穿插更多实例和图例、跟我做的内容希望对大家能有帮助。

在前面：java作为一门世界级编程语言金字塔顶尖的语言。需要大量的练习、练习、练习来巩固自己所获得的知识。冰冻三尺非一日之寒，希望大家在学习java的日子里一定一定要坚持不懈，严格要求。多练，多问，多百度。祝大家早日成为一名优秀的软件工程师！

文章摘要：此篇文章会带领大家创建一个html最简单的页面，以及在页面中增加一些简单的内容。

我先给大家放2张我以前教学的时候，开课前给学生画的图：

这2张图应该已经比较清晰明了的告诉你，学习java前端需要具备的一些主观和客观方面的东西，我就不多做解释了，以后我的文章中，会以代码图片及展现效果居多，尽量减少文字的占比。让大家对所学的知识有一个更直观的感受。

言归正传，想要编写html代码，首先需要一个后缀为.html的文件，这个文件怎么创建呢？最简单的方式，建一个txt，然后把后缀改为.html，用编辑器打开，就可以编写代码了。

当然，txt界面太丑，笔者这里选用sublime,该编辑器也可以直接加载一个html模板，选择菜单→新建文件(模板)→html,当然，前提要先设置好这个模板，具体设置方法这里就不做详细介绍了，百度上一大堆。新建完成后，产生一个代码如下的页面：

然后在<body></body>标签体之间打入一行代码

用浏览器打开该文件，显示如下图，说明这个html文件已经创建成功了，能够正常的编写代码。

零基础的同学一定对刚才的代码比较疑惑，虽然照着写能实现功能，但是这些代码各自又都是什么意义呢？我用注释的方式上图来告诉大家：

首先，html 的标签分为自闭和标签和闭合标签

自闭和标签：就是没有结束标签，比如上图的<meta>标签，该标签是没有结束标签相呼应的。

闭合标签：有开始和结束标签，比如上图的<html><body><h1>标签，他们都有一个</html></body></h1>相呼应

在上图中，我用过了比较多的 < !-- -- >标签，这是html里的注释标签，在编写代码的过程中，勤加注释是一个非常非常好的习惯，不仅方便了他人也方便了以后自己代码的维护。所以说，不加注释的代码都是在耍流氓。

我们80%的页面标签代码都会写在<body></body>标签里面,什么是标签，至少包含< > 和标签元素，比如<div><a><p><input>等，标签还有标签属性和属性值，标签属性和属性值在第一个标签内容中，如果是多个标签则以空格符号分割，如图：

Div 是整个html中最常用的一个标签元素，<div></div>类似于一个盒子，里面可以承载各种各样的元素标签，大家看到的所有的网站都是靠着div一个个的盒子规划开来，最后拼接在一起的，形成了一个完整的页面。

那么如何去建立一个div呢？首先，我们在html的<body></body>标签中加入一个<div></div>标签，但是单纯的加入标签并不会在页面中产生肉眼可见的东西，因为我们还要定义这个div的宽，高，背景色，边框等等，详见如下代码：

这样的一行代码，最后展现出来的效果是：

我们来一点点的剖析这一行代码：

Style:style 是元素标签里的一个标签属性，他的作用是可以定义该标签的样式。里面的样式格式是xxx:xxx; 每一组样式都是这样的定义，冒号用来隔开样式属性和样式属性值，最后以分号结尾.

width:定义该元素的宽

height:定义该元素的高

background:定义该元素的背景颜色(也可使用red,yellow等颜色定义)

border:定义该元素的边框

4px 代表边框粗细，

solid 代表边框样式, 边框样式又分为solid(实框)、dotted(虚框)

red代表边框颜色,边框颜色也可用#ccc,#112233这种形式表现

Div里可以放入文字、图片、标签元素等各式各样的东西。下面我演示一下如何放入照片：

首先，放入照片要使用到<img>标签，这是一个自闭和标签，所有没有结束标签。

Src代表图片的路径，width,height 代表图片的宽度和高度 ,alt是图片的描述

这个路径可以是相对路径，也可以是绝对路径。

相对路径：就是相对于这个网页的路径，比如图片和网页在同一个文件夹下，那么src处就直接填图片的文件名字就可以，若建了一个文件夹images，图片放在该文件夹中，同时这个文件夹和网页在同一个位置，那么src所填的就是images/图片名字.jpg

绝对路径：即从头开始写路径，如src = “C:/xxx/xxx/xxx/xxx.jpg”

假设我现在的图片位置和网页位置同处一处

最后的效果：

我这里改大了DIV的宽度和高度，若图片所设的宽高大于DIV的宽度高度，那么将会发生溢出的情况，同学们可以自己去试一下，这种溢出的情况也有对应的标签可以做调整，这个我们后面再讲。

这边特别提醒一点，如果div没有设定宽度width,则默认为等同浏览器宽度的宽度，若div没有设定高度，则该div根据div中内容进行高度的伸缩，div中的内容有多高，div就有多高，如图，我把width和height全部去掉：

上图width和height全部去掉，所以，width默认跟浏览器宽度等宽，高度为图片的高度。

文字的话就比较简单了，代码贴上：

最后结果：

第二句文字才是div创建出来的文字，我解释一下style里面的样式：

Font-size:文字大小，px为单位(像素)

Font-family:文字样式，分为很多，这个可以去word文档里找找

Font-weight：文字加粗，bold是一种默认加粗的大小。

End.

来源：公众号“java编程”

运行人员：中国统计网小编（微信号：itongjilove）

微博ID：中国统计网

中国统计网，是国内最早的大数据学习网站，公众号：中国统计网

http://www.itongji.cn

在线咨询

上一篇：CSS盒模型及应用（重点）
下一篇：浅谈题库试题录入之Word自动识别

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。