search

Qingquan-Li / blog

My Blog
https://Qingquan-Li.github.io/blog/
132 stars 16 forks source link

HTML_1 HTML基础 #17

Open Qingquan-Li opened 7 years ago

Qingquan-Li commented 7 years ago

HTML：Hyper Text Markup Language （超文本标记语言），超文本包括：文字、图片、音频、视频、动画等。

本博客主要介绍 HTML 的基础知识及相关标签的使用。

HTML发布的正式历史版本

  1. HTML2.0（1995年11月）
  2. HTML3.2（1997年1月）
  3. HTML4.0（1997年12月）
  4. HTML4.01（1999年12月）
  5. XHTML1.0（2000年1月）
  6. XHTML1.1（2001年5月）
  7. XHTML2.0 中途放弃，未完成
  8. HTML5（2014年10月28日）

在 HTML 4.01 之后，W3C提出了 XHTML 1.0 。XHTML 1.0 与 HTML 4.01 其实是一样的。主要不同之处，就是 XHTML 1.0 要求使用 XML 语法：

W3C 标准

W3C：World W ide Web Consortium （万维网联盟） 成立于1994年，Web 技术领域最权威和具影响力的国际中立性技术标准机构 http://www.w3.org/ 和 http://www.chinaw3c.org/

W3C 标准包括:

HTML 基本结构

head 和 body：

网页头部 head（用于设置网页的一些属性） 主体部分 body（网页内容编辑区）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>网页标题</title>  
</head>  

<body>  
    网页内容  
</body>  
</html>

页面规范声明：

上面“DOCTYPE”文档类型的声明 （以 XHTML1.0 为例），它约束 HTML 文档结构，检验是否符合相关 Web 标准，同时告诉浏览器，使用哪种规范来解释这个文档中的代码。DOCTYPE 声明须写在第一行。

XHTML 1.0 规定了 3种级别的声明：Strict（严格类型）；Transitional（过渡类型）也称松散（loose）声明，最常用；Frameset（框架类型），Strict 声明中不允许使用框架，当页面中需要使用框架时，则使用该声明（H5 不再支持 frame框架：frameset、frame、noframes元素，但支持 iframe 内联框架）。

另外，HTML 5 的 DOCTYPE 声明和头部 head 更加简洁：

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>网页标题</title>  
</head>  

<body>  
    网页内容  
</body>  
</html>

网页编码设置：

<meta> 标签，提供有关网页的元信息（meta-information）。

使用该标签描述网页更具体的摘要信息，包括文档内容类型、字符编码信息（不设置可能导致乱码）、搜索关键字、网站提供的功能和服务的详细描述等。 可用于 SEO 优化：

[html] view plain copy
<meta charset="utf-8">  
<meta name="Keywords" content="FatliTalk，IT博客" />  
<meta name="Description" content="FatliTalk by Fatli，关注人文与科技，讨论关于技术、关于世界。" />

注意：


网页基本标签元素

标签 说明
<h1>~<h6> 标题标签（head）
<p> 段落标签（paragraph）
<br /> 换行标签（break row）
<hr /> 水平线标签（horizontal row ）
<em> 斜体标签 ​（emphasized）
<strong> 加粗标签（​stronger emphasis）

注释和特殊符号


<!-- HTML注释内容 -->


特殊符号 字符实体 示例
空格 &nbsp; （non-breaking space） <a href="#">百度</a>&nbsp;&nbsp;<a href="#">Google</a> 百度  Google
大于号(>) &gt; （greater than） 如果时间&gt;晚上6点，就坐高铁去深圳
如果时间>晚上6点，就坐高铁去深圳
小于号(<) &lt; （less than） 如果时间&lt;早上7点，就开飞机去上学
如果时间<早上7点，就开飞机去上学
引号(") &quot; （quot） W3C 规范中，HTML 的属性值必须用成对的 &quot; 引起来
版权符号© &copy; &copy;2016-2017 FatliTalk 版权所有
©2016-2017 FatliTalk 版权所有

图像标签

常见的图像格式：

图像类型 优点 缺点
*.jpg 体积小，较清晰.适合色彩丰富的图像 有损压缩，画面失真
*.gif 体积小、支持动画图片，较为常用的网页图片类型 支持有限的透明度,效果不如其他PNG图片
*.bmp 支持24位颜色深度，兼容性好 不支持压缩，容量大
*.png 最新的图片格式，兼有GIF和JPG的优势 部分浏览器（IE.6）不支持透明

<img> 标签：

语法：

<img src="path" alt="text" title="text" width="x" height="y" />

超链接标签

语法

<a href="path" target="目标窗口位置"> 链接文本或图像 </a>

示例：

<a href="studio.html" target="_blank">叁月壹科技工作室</a>  
<a href="studio.html" target="_blank"><img src="image/marchOne.jpg" alt="叁月壹科技工作室 " title="叁月壹科技工作室 " /></a>

根据链接的地址指向站外文件还是站内文件，链接地址又分为绝对路径和相对路径。

URL（Uniform Resource Locator）： 统一资源定位符，唯一能识别 Internet 上具体的计算机、目录或文件夹位置的命名约定。

示例：http://www.example.com/news/201701/newslist.jsp?page=3 协议部分+主机地址+目标资源地址+传递的参数


注意： 当超链接 href 链接路径为“#”时，表示空链接，如 <a href="#">首页</a>

锚链接：

创建步骤（甲→指向→乙）：


同一页面锚链接跳转示例：

<a href="#register">用户注册帮助</a>  
<a name="register">用户注册帮助文档</a>

A页面到B页面锚链接跳转示例：

<a href="help.html#register">用户注册帮助</a>  
<a name="register">用户注册帮助文档</a>



附 常用HTML标签的英文全称及简单功能描述

MDN HTML（全部）元素参考： https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

HTML 标签 英文全称 简单功能描述
<a> anchor 定义锚
<abbr> abbreviation 定义缩写
<acronym>   定义只取消首字母的缩写
<address>   定义地址元素
<area>   定义图像映射内部的区域
<b> bold 定义粗体字
<base>   定义页面当中的所有链接的基准链接
<bdo> bidirectional override 定义文字的显示方向
<big>   定义大号字
<blockquote>   定义长的引用
<body>   定义 body 元素
<br ／> break 插入一个回车
<button>   定义按钮
<caption>   定义表格标题（ 通常这个标题会被居中于表格之上）
<cite> citation 定义引用
<code> computer code 定义计算机代码文本
<col> column 定义用于表格列的属性
<colgroup> column group 定义表格的列组
<dd> definition description 定义描述列表中的术语/名称（定义内容）。
<del> delete 定义被删除的文本
<div> division 定义文档中的节
<dfn> defining instance 定义定义的项目（实例）
<dl> definition list 定义一个描述列表【 <dl> <dt> <dd> 】
<dt> definition term 定义描述列表的定义术语/名称（定义列表项）。
<em> emphasized 定义强调文本
<fieldset>   定义域结构
<form>   定义表单
<frame>   定义框架的子窗口
<frameset>   定义框架集
<h1>~<h6> heading 定义标题1到标题6
<head>   定义关于文档的信息
<hr ／> horizontal 定义水平线
<html> hypertext markup language 定义html文档
<i> italic 定义斜体字
<iframe> inline frame 定义内联框架
<img> image 定义图像
<input>   定义输入域
<ins> inserted 定义被插入的文本
<kbd> keyboard 定义键盘文本
<label>   定义针对表单控件的标签,将焦点转到和标签相关的表单控件上
<legend>   定义框架集的标题
<li> list item 定义列表的项目
<link>   定义资源引用
<map>   定义图像映射
<meta>   定义元信息
<noframe>   定义无框架的节
<noscript>   定义无脚本的节
<object>   定义内嵌对象
<ol> ordered list 定义有序列表
<optgroup> option group 定义选项组
<option>   定义下拉列表的选项
<p> paragraph 定义段落
<param>   定义对象的参数
<pre> preformatted 定义预格式文本。<pre> 标签的一个常见应用就是用来表示计算机的源代码。
<q> quotation 定义短的引用
<samp> sample 定义计算机代码样本
<script>   定义脚本
<select>   定义选择列表
<small>   定义小字体文本
<span>   定义文档中的节
<strong> stronger emphasis 定义强调文本
<style>   定义样式的定义
<sub> subscript 定义下标文本（下标）
<sup> superscript 定义上标文本（上标 ）
<table>   定义表格
<tbody> table body 定义表格的主体部分（用于表单语义化）
<td> table data cell 定义表格单元
<textarea>   定义文本区域
<tfoot> table foot 定义表格的脚注
<th> table header cell 定义表格的表头单元格（类似 <td> 用于表单语义化）
<thead> table head 定义表格的标题 ( <title> 定义文档的标题)（用于表单语义化）
<tr> table row 定义表格的行
<tt> teletype 定义打字机文本（等宽字体(打印机字体)）
<ul> unordered list 定义无序列表
<var> variable 定义变量



注意：部分标签元素的用法

元素 注意
head 头信息
title 标题
<br /> 换行
<hr /> 水平分界线
分隔线的粗细 ＜hr size=点数 /＞
分隔线的宽度 ＜hr size=点数或百分比 /＞
分隔线对齐方向 ＜hr align="#" /＞ ， # 号可为 left：表向左对齐（预设值）； center：表向中对齐； right：表向右对齐
分隔线的颜色 ＜hr color=#rrggbb /＞
实心分隔线 ＜hr noshade /＞
<sup> 上标
<sub> 下标
<b> 粗体
<i> 斜体
<strong> 强调(粗体)
<em> 强调(斜体)
<strong> 和 <em> 是表达要素，表示强调的文本
<b> 和 <i> 是视觉要素，仅表示这里应该用粗体 or 斜体显示
<u> 下划线
<tt> 等宽字体(打印机字体)
<ol>
     <li> </li>
    <li> </li>
</ol>		 有序列表
<ul>
     <li> </li>
    <li> </li>
</ul>		 无序列表
<dl>
    <dt>
         <dd> </dd>
         <dd> </dd>
    </dt>
</dl>		 定义列表
<dl> definition list 定义一个列表
<dt> definition term 定义列表项
<dd> definition description 定义内容
表格 表格
<table> 定义表格
<tr> table row 定义表格的行
<td> table data cell 定义表格单元


<caption> 定义表格标题。通常这个标题会被居中于表格之上。
<thead> table head 定义表格的标题 （ <title> 定义文档的标题）
<th> table header cell 定义表格的表头单元格
<tbody> table body 定义表格的主体部分
<a href=#> 超链接 Hypertext Reference，超文本引用
<img src=#> 图片链接
form 交互式表单
input 输入表单控件


——END