HTML中的元素使用方法1-零基础自学网页制作

TML元素

这一节以及以后几节我们将对HTML中<body>标签中的各种元素进行一个概述，并对一些基本元素进行练习。

HTML元素：指的是从开始标签到结束标签的所有代码。

举个例子，在《第一个HTML页面如何写？——零基础自学网页制作》这一节中，我们写了这样一个页面"第一个页面.html"。后面的练习我们都在这个文件中进行。

<!DOCTYPE HTML> 
  <html> 
  <head> 
  </head> 
  <body> 
  <h>第一个网页</h>
  <p>千里之行始于足下</p> 
  </body>
  </html>

其中"<h>第一个网页</h>"整个代码就可以看做是一个html元素，<h></h>叫做标题标签，加上"第一个网页"这段文字共同构成一个HTML元素。

HTML元素非常多，因为我们可以在页面中显示各种各样的信息，不同的信息载体对应不同的元素。

下面我们就介绍几个常用的html元素。

HTML常用元素使用练习1

NO.1:<h></h>与<hr>

<h></h>这个用来添加标题的元素大家比较熟悉了，这里要介绍一个新的用法。示例代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
  </head> 
  <body>
  <h1>第一个网页</h1>
  <h2>第一个网页</h2>
  <h3>第一个网页</h3>
  <h4>第一个网页</h4>
  <h5>第一个网页</h5>
  <h6>第一个网页</h6>
  <p>千里之行始于足下</p>
  </body> 
  </html>

页面显示效果如图：

大家通过观察可以看出h后面的编号用来控制标题字号大小，仅仅是标题有这种预设，其他元素如果要调整字号的话我们放在以后CSS里讲。

下面看<hr>,示例代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
  </head> 
  <body>
  <h1>第一个网页</h1><hr>
  <h2>第一个网页</h2><hr>
  <h3>第一个网页</h3><hr>
  <h4>第一个网页</h4><hr>
  <h5>第一个网页</h5><hr>
  <h6>第一个网页</h6><hr>
  <p>千里之行始于足下</p><hr>
  </body> 
  </html>

效果如下：

<hr>标签可以为它前面的元素添加分割线，大家注意的是分割线不是下划线，添加下划线的操作我们会在CSS样式表中详细讲解。

NO.2:与

元素是添加段落的。示例代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
  </head> 
  <body>
  <h1>第一个网页</h1><hr>
  <p>千里之行始于足下值得注意的是我们没有必要一一讲解HTML中的所有元素以及每个元素的各个属性，
因为每个元素的使用都是大同小异，我们完全可以通过几个常用案例对HTML全部元素及属性的指定形成一
个整体认识，以后可以根据需求通过查询手册来自己学习其他元素及其属性的用法。</p><hr>
</body>
</html>

效果如图所示：

通过观察发现，即使我们在代码中对段落的文字进行回车操作，但是出现在页面中是没有回车的效果的，文字按照顺序长长的排列在显示器上，非常不利于阅读，因此我们就要介绍常常和p标签连用的 换行标签。

示例代码如下：

<!DOCTYPE HTML>
  <html>
  <head>
  <title>第一个网页</title>
</head> 
<body>
  <h1>第一个网页</h1><hr>
<p>千里之行始于足下<br>
  值得注意的是我们没有必要一一讲解HTML中的所有元素以及每个元素的各个属性，<br>
  因为每个元素的使用都是大同小异，我们完全可以通过几个常用案例对HTML全部元<br>
  素及属性的指定形成一个整体认识，以后可以根据需求通过查询手册来自己学习其他<br>
  元素及其属性的用法。</p><hr>
</body>
</html>

效果如图所示：

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

、标签的分类：双标签和单标签

双标签：就是成对出现的，类似于这种 <html> </html>

单标签：就是可以单个使用的，类似于 换行标签或 <hr>水平线标签。

二、标签属性的作用：

标签的属性是用来定义文字或字符的颜色、宽高、粗细、大小、等，这个是标签属性的作用。

三、标签属性的特性：

1、每一个标签都有自己的属性，单标签和双标签都有。

2、一个标签可以有多个属性。

3、每个属性都有对应的值，值要用单或双引号引起来。

4、多个属性之间使用空格隔开。

5、属性没有顺序之分。

6、字体属性值，必须是系统可以识别的字体，一般为系统自带字体。

7、HTML5 中 font 属性已经弃用。

源代码：↓

<!DOCTYPE html>

<head>

<title>中央气象局</title>

</head>

<body>

标签属性

</body>

</html>

.CSS样式初始化

不同的浏览器对有些HTML标签属性的默认值是不同的，为消除这种差异，需要对CSS进行初始化，即通过设置样式及其属性值，替代浏览器默认的属性值。

2.京东首页CSS初始化

（1）CSS初始化样式引入方式

采用引入外部样式表的方式进行CSS初始化

（2）相关代码解读

/* 京东CSS初始化 */
/* *为通配符，表示html所有标签 */
* {
margin: 0; /* 标签外边距为0*/
padding: 0; /* 标签内边距为0*/
}
 /* em、i表示斜体标签 */
em,
i {
font-style: normal; /* 表示标签中内容不以斜体表示*/
}
/* li 表示列表标签 */
 li {
list-style: none; /* 表示去掉列表的样式，如前面圆点等*/
}
/* img 表示图片标签 */
img {
border: 0; /* 以下两句表示 图片与同级别行内元素middle对齐*/
vertical-align: middle;
}
/* button 表示按钮标签 */
button {
cursor: pointer; /* 表示鼠标样式 小手 */
}
/* a 表示超链接标签 */
a {
color: #666;
text-decoration: none; /* 表示去掉超链接下划线 */
 }
 /* a:hover 表示a标签的动态伪类选择器 */
a:hover {
color: #c81623; /* 表示当鼠标悬停在超链接上时，自体变为红色 */
}
 /* button、input表示按钮标签、表单输入标签 */
button,
 input {
/* 设置默认字体，包括unicode编码的字体 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
"\5B8B\4F53", sans-serif;
}
 /* body 表示body标签*/
body {
/* css3属性（-webkit-font-smoothing）字体抗锯齿渲染，字体更为平滑 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial,
Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666;
}
/* 表示当class属性的值包含hide、none时的样式 */
.hide,
.none {
display: none; /* 表示隐藏元素，且该元素空间可以被其他元素使用*/
}
/* 表示伪元素选择器 用来清除浮动*/
.clearfix:after {
visibility: hidden; /* 为保证兼容性 必要的固定设置*/
clear: both; /* 清除浮动 必要的固定设置*/
display: block; /* 清除浮 必要的动固定设置*/
content: "."; /* 清除浮动 必要的固定设置*/
height: 0; /* 可选的固定设置*/
}
.clearfix {
/* 这是针对于IE6/7的，因为IE6/7不支持:after伪类，
让IE6/7的元素可以清除浮动来包裹内部元素。*/
*zoom: 1;
}

3.淘宝首页CSS初始化

（1）CSS初始化样式引入方式

采用内部样式的方式进行CSS初始化

（2）相关代码解读

淘宝在进行CSS样式初始化时，并没有采用通配符*的方式设置标签的内外边距，而是将具体的标签进行并集罗列。根据网上资料，通配符*，容易书写，但是在大型网站中，会初始化所有标签，会加大网站负荷，使得网站加载变慢。当然京东应该是做了优化的，不然网站体验也会很差。

/* 淘宝CSS初始化 */
/* 设置标签的内外边距为0 */
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
input,
legend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
margin: 0;
padding: 0;
}
/* 设置字体大小、行高及默认字体 */
body,
button,
input,
select,
textarea {
font: 12px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53",sans-serif;
}
/* 字体大小同body中设置的一样 */
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
 }
/* 字体不采用斜体展示 */
address,
cite,
dfn,
em,
var {
font-style: normal;
}
/* 设置默认字体 */
code,
kbd,
pre,
samp {
font-family: courier new, courier, monospace;
}
/* 设置标签为small的字体大小 */
small {
font-size: 12px;
}
/* 去掉字体列表样式 */
ol,
ul {
list-style: none;
}
/* 去掉a标签下划线 */
a {
text-decoration: none;
}
/* 设置动态伪类选择器，鼠标悬停其上时显示下划线 */
a:hover {
text-decoration: underline;
}
/* 设置垂直对齐方式，在右上角 */
sup {
vertical-align: text-top;
}
/* 设置垂直对齐方式，在右下角 */
sub {
vertical-align: text-bottom;
}
legend {
color: #000;
}
fieldset,
img {
border: 0;
}
button,
input,
select,
textarea {
font-size: 100%;
 }
button {
border-radius: 0;
      }
 /* 设置表格相邻边框融合 */
table {
border-collapse: collapse;
border-spacing: 0;
 }