HTML介绍

HTML 简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jerry</title>
</head>
<body>
    <h1>标题</h1>
    <p>段落</p>

</body>
</html>

实例解析

  • DOCTYPE 声明了文档类型
  • 位于标签 <html> 与 </html> 描述了文档类型
  • 位于标签 <body> 与 </body> 为可视化网页内容
  • 位于标签 <h1> 与 </h1> 作为一个标题使用
  • 位于标签 <p> 与 </p> 作为一个段落显示

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
<html></html>
<body></body>

HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.

<h1> 定义最大的标题。 <h6> 定义最小的标题。

<hr> 标签在 HTML 页面中创建水平线。

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

HTML 段落

HTML 段落是通过标签 <p> 来定义的.

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

HTML 链接

HTML 链接是通过标签 <a> 来定义的.

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

HTML 图像- 图像标签（ <img>）和源属性（Src）

在 HTML 中，图像由<img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" alt="some_text">

URL 指存储图像的位置。

HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML 属性参考手册

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

属性 描述
class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式（inline style）
title 描述了元素的额外信息 (作为工具条使用)

HTML 注释

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

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

HTML <head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML <title> 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必须的。

<title> 元素:

  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时，显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>

<body>
文档内容......
</body>

</html>

HTML <base> 元素

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

<head>
<base href="http://www.baidu.com/images/" target="_blank">
</head>

HTML <link> 元素

<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表:

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

HTML <style> 元素

<style> 标签定义了HTML文档的样式文件引用地址.

在<style> 元素中你需要指定样式文件来渲染HTML文档:

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

HTML <meta> 元素

meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<meta>一般放置于 <head>区域

<meta> 标签- 使用实例

为搜索引擎定义关键词:

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

为网页定义描述内容:

<meta name="description" content="Free Web tutorials on HTML and CSS">

每30秒中刷新当前页面:

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

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格实例

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML <div> 和<span>


HTML 可以通过 <div> 和 <span>将元素组合起来。

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 与元素

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

时间： 2024-10-10 05:40:25

HTML介绍的相关文章

数据库介绍与分类

目录 数据库介绍与分类... 1 1.1 数据库介绍... 2 1.1.1什么是数据库... 2 1.2数据库的种类... 2 1.2.1关系型数据库介绍... 2 1.2.2非关系型数据库介绍... 3 1.3 常用关系型数据库产品介绍... 4 1.3.1 Oracle数据库... 4 1.3.2 MySQL数据库... 5 1.3.3 MariaDB数据库... 5 1.3.4 SqlServer数据库... 6 1.3.5 Access数据库... 6 1.3.6 其他不常用数据库...

基于位置信息的聚类算法介绍及模型选择

百度百科 聚类:将物理或抽象对象的集合分成由类似的对象组成的多个类的过程被称为聚类.由聚类所生成的簇是一组数据对象的集合,这些对象与同一个簇中的对象彼此相似,与其他簇中的对象相异."物以类聚,人以群分",在自然科学和社会科学中,存在着大量的分类问题.聚类分析又称群分析,它是研究(样品或指标)分类问题的一种统计分析方法.聚类分析起源于分类学,但是聚类不等于分类.聚类与分类的不同在于,聚类所要求划分的类是未知的. 分类和聚类算法一直以来都是数据挖掘,机器学习领域的热门课题,因此产生了众多的

Centos 7.3下 Linux For SQL Server安装及配置介绍

Centos 7.3下Linux For SQL Server安装及配置介绍 说到SQL Server服务,我们大家都知道是Microsoft公司的数据库服务,当然说到数据库,现在主要分为三大商:1:Oracle.2:Msql Server.3:Mysql:三种数据库在当下环境受到不了不同程度的关注:比如oracle主要应用到大型的商业比较多,比如银行:SQL Server主要在常见的互联网公司使用:mysql主要应用于小型的企业或者服务商使用:当然从费用上来说,Oracle是最贵的,也是最为稳

苹果高管斯洛基介绍A11仿生芯片背后的秘密!

9月13日凌晨,苹果在秋季发布会上正式推出了全新一代iPhone智能手机:iPhone 8.iPhone 8 Plus和iPhone X(发音为iPhone 10).这三款新设备的都搭载了全新的移动芯片,苹果称之为A11仿生(不是"Fusion"),并表示这是iPhone上有史以来最强大.最智能的芯片. 通过发布会介绍的A11仿生芯片细节,不难发现苹果自主定制芯片野心非常大,可谓雄心勃勃.并且随着时间的推移,针对半导体芯片的定制设计越来越多,A11达到了前所未有的高度.苹果在发布会中的

10.23 linux任务计划cron10.24chkconfig工具10.25 systemd管理服务10.26 unit介绍 10.27 target介绍

- 10.23 linux任务计划cron - 10.24 chkconfig工具 - 10.25 systemd管理服务 - 10.26 unit介绍 - 10.27 target介绍 - 扩展 1. anacron http://blog.csdn.net/strikers1982/article/details/4787226  2. xinetd服(默认机器没有安装这个服务,需要yum install xinetd安装) http://blog.sina.com.cn/s/blog_46

20.1 Shell脚本介绍；20.2 Shell脚本结构和执行；20.3 date命令用法；20.4 Shell脚本中的变量

20.1 Shell脚本介绍 1. shell是一种脚本语言 aming_linux blog.lishiming.net 2. 可以使用逻辑判断.循环等语法 3. 可以自定义函数 4. shell是系统命令的集合 5. shell脚本可以实现自动化运维,能大大增加我们的运维效率 20.2 Shell脚本结构和执行 1. 开头(首行)需要加: #!/bin/bash 2. 以#开头的行作为解释说明: 3. 脚本的名字以.sh结尾,用于区分这是一个shell脚本 4. 执行.sh脚本方法有两种:

微信小程序管理后台介绍

微信小程序的管理后台,每次进入都需要扫码,还是特别不爽,现在微信小程序还没正式发布,很多人都还没看到管理后台,这里抢先发布出来 ------------------------------------------------------------ http://www.cnblogs.com/likwo/p/6057258.html 好推小程序统计:https://weixin.hotapp.cn关键指标分析推广效果,一行代码接入微信登录 ---------------------------

HTML5介绍

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权:凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记. HTML5没有那么难,他是一个非常简单的标记. 三个知识点:THML5/JS/CSS3. 之后是网页框架 C/S 客户端/服务器 B/S 浏览器/服务器 C/S构架的优缺点: C/S架构的模型: C/S架构一旦发生更新,那么成千上万个客户机都要进行更新,如果更新内容比较多,客户机不更新完毕,就无法运行. B/S架构工作原理: B/S架构优缺点: 移动公司都是

-Java基础-Java介绍

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权:凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记. java的介绍 1.1java简介 Java是一种可以撰写跨平台应用程序的面向对象的程序设计语言. 它最初被命名为Oak,目标设定在家用电器等小型系统的编程语言,来解决诸如电视机.电话.闹钟.烤面包机等家用电器的控制和通讯问题.由于这些智能化家电的市场需求没有预期的高,Sun放弃了该项计划.就在Oak几近失败之时,随着互联网的发展,Sun看到了Oak在计算机

linux入门基础知识及简单命令介绍

linux入门基础知识介绍 1.计算机硬件组成介绍 计算机主要由cpu(运算器.控制器),内存,I/O,外部存储等构成. cpu主要是用来对二进制数据进行运算操作,它从内存中取出数据,然后进行相应的运算操作.不能从硬盘中直接取数据. 内存从外部存储中取出数据供cpu运存.内存的最小单位是字节(byte) 备注:由于32的cpu逻辑寻址能力最大为32内存单元.因此32位cpu可以访问的最大内存空间为:4GB,算法如下: 2^32=2^10*2^10*2^10*2^2 =1024*1024*1024