前端开发基础课分享3-教你学会使用HTML中的属性，丰富你的网页

TML 属性

属性是 HTML 元素提供的附加信息。

HTML 属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

实例

<a href="http://www.toutiao.com">这是一个链接</a>

HTML 属性常用引用属性值

属性值应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。

提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'

HTML 提示：使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

HTML 属性参考

下面列出了适用于大多数 HTML 元素的属性：

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 meta 标记代码

我们把JavaScript代码放置在body结束标签</body>之前且在页面所有内容之后。下面介绍把代码放在这个位置，而不是以前的<head></head>两个标签之间的原因。

通常，浏览器是自上而下加载和渲染内容的。如果JavaScript代码放置在head部分里，会导致JavaScript代码已加载完，而文档内容可能还没有加载完的情况出现。事实上，如果浏览器在页面中间加载JavaScript代码，就会中断正在进行的渲染和加载。这就是尽可能把JavaScript代码放到页面底部的原因。通过这种方式，可以提升加载内容的性能。

在写这本书的时候，jQuery的最新版本是1.4.4。这就是代码示例中的jQuery文件叫jquery-1.4.4.min.js的原因。这个版本号可能会不同，但是用法上应该是一样的，除非jQuery在向后兼容性上发生重大的改变。

在线咨询

上一篇：html拨打电话和发送短信功能的实现方法
下一篇：CSS背景属性实战，灵活使用background属性，原来如此简单

您的项目需求

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

整合营销服务商