HTML学习教程之进阶学习

HTML学习教程之进阶学习

标题

HTML标题(Heading)是通过 <h1> - <h6> 标签进行定义的。<h1> 定义最大的标题。 <h6> 定义最小的标题。一般来说用到4级标题就差不多了。
实例如下:

<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>

注意:请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。

HTML 水平线
<hr> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。
实例

<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>

HTML 注释
可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
实例

<!-- 这是一个注释 -->

注释: 开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要,合理地使用注释可以对未来的代码编辑工作产生帮助。

段落

HTML 段落是通过 <p> 标签定义的。如下实例:

<p>这是一个段落 </p>
<p>这是另一个段落</p>

注意:浏览器会自动地在段落的前后添加空行。(</p> 是块级元素),不要忘记结束标签,即使忘了使用结束标签,大多数浏览器也会正确地将 HTML 显示出来:
实例

<p>这是一个段落
<p>这是另一个段落

上面的例子在大多数浏览器中都没问题,但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误,在未来的 HTML 版本中,不允许省略结束标签。

HTML 折行
如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br> 标签,实例:

<p>这个<br>段落<br>演示了分行的效果</p>

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。

格式化标签

HTML 格式化标签
HTML 使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式, 如:粗体 or 斜体,这些HTML标签被称为格式化标签。通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。

然而,这些标签的含义是不同的:
<b><i> 定义粗体或斜体文本。<strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过,未来浏览器可能会支持更好的渲染效果。

HTML 文本格式化标签
标签	        描述
<b>	    定义粗体文本
<em>	定义着重文字
<i>	      定义斜体字
<small>	  定义小号字
<strong>定义加重语气
<sub>	  定义下标字
<sup>	  定义上标字
<ins>	  定义插入字
<del>	  定义删除字
HTML "计算机输出" 标签
标签	       描述
<code>	定义计算机代码
<kbd>	定义键盘码
<samp>	定义计算机代码样本
<var>	定义变量
<pre>	定义预格式文本
HTML 引文, 引用, 及标签定义
标签	             描述
<abbr>	       定义缩写
<address>	   定义地址
<bdo>	      定义文字方向
<blockquote>  定义长的引用
<q>	         定义短的引用语
<cite>	     定义引用、引证
<dfn>	     定义一个定义项目

链接

HTML 链接的 HTML 代码很简单。它类似这样:

<a href="url">链接文本</a>

href 属性描述了链接的目标。.

<a href="https://www.csdn.net/">访问csdn</a>

上面这行代码显示为:访问csdn
点击这个超链接会把用户带到csdn首页。注意: “链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 链接 - target 属性
使用 target 属性,你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档

<a href="https://www.csdn.net/" target="_blank" rel="noopener noreferrer">访问csdn!</a>

HTML 链接- id 属性
id属性可用于创建在一个HTML文档书签标记。书签是不以任何特殊的方式显示,在HTML文档中是不显示的,所以对于读者来说是隐藏的。
在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id=“tips”)":

<a href="#tips">访问有用的提示部分</a>

或者,从另一个页面创建一个链接到"有用的提示部分(id=“tips”)":

<a href="https://www.csdn.net/">访问有用的提示部分</a>

头部

HTML <head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
HTML <title> 元素标签定义了不同文档的标题。在 HTML/XHTML 文档中是必须的,也定义了浏览器工具栏的标题,当网页添加到收藏夹时,显示在收藏夹中的标题,显示在搜索引擎结果页面的标题
一个简单的 HTML 文档实例:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>

HTML <base> 元素描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.csdn.net/images/" target="_blank">
</head>

HTML <link> 元素定义了文档与外部资源之间的关系。通常用于链接到样式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML 元素描述了一些基本的元数据。元数据也不显示在页面上,但会被浏览器解析。META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
<meta> 一般放置于 <head> 区域, 使用实例:
为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="论坛 Web & 博客 教程">

定义网页作者:

<meta name="author" content="csdn">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

HTML <script> 元素用于加载脚本文件,如: JavaScript。

HTML head 元素
标签	         描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

样式表

HTML 样式- CSS(Cascading Style Sheets) 用于渲染HTML元素标签的样式。CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的,CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性。
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS。
外部引用 - 使用外部 CSS 文件。
最好的方式是通过外部引用CSS文件.
内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距:

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

HTML样式实例 - 背景颜色
背景色属性(background-color)定义一个元素的背景颜色:

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

HTML 样式实例 - 字体, 字体颜色 ,字体大小
可以使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义字体的样式:

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

现在通常使用font-family(字体),color(颜色),和font-size(字体大小)属性来定义文本样式,而不是使用<font>标签。

HTML 样式实例 - 文本对齐方式
使用 text-align(文字对齐)属性指定文本的水平与垂直对齐方式:

<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>

内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML 样式标签
标签	      描述
<style>	定义文本样式
<link>	定义资源引用地址
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值