前端 HTML5_01

hyper text markup language超文本标记语言

用来描述网页的一种语言,不是编程语言,是超文本标记语言。

html5声明 <! DOCTYPE html>

HTML 元素语法

HTML 元素以开始标签起始

HTML 元素以结束标签终止

元素的内容是开始标签与结束标签之间的内容

某些 HTML 元素具有空内容(empty content)

空元素在开始标签中进行关闭(以开始标签的结束而结束)

大多数 HTML 元素可拥有属性


标签不区分大小写,但是最好小写,也最好有结束。标签的属性值一般用双引号引起来,但是如果属性中出现了双引号,那么就用单引号。

默认情况下,HTML会自动的在块级元素后添加一个额外空行,如段落、标题。

HTML 头部元素

可以添加到头部<head>部分的标签:<title>、<base>、<link>、<meta>、<script> 以及 <style>。

< base> 标签是自结束标签。设置其target属性可以使页面中的所有标签在新窗口中打开。href属性为页面上的所有链接规定默认地址

<base href="http://www.w3school.com.cn/i/" />

<base target="_blank" />

<meta>是自结束标签 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

文档描述:Meta 元素中的信息可以描述 HTML 文档。

文档关键字:Meta 元素中的信息可以描述文档的关键词。

定向性:在网址已经变更的情况下,将用户重定向到另外一个地址。

标题<title>

请确保将 HTML h标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引

因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。


对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。所有的空格和换行都是只有一个空格。只能用标签实现

当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

使用空的段落标记 <p></p> 去插入一个空行是个坏习惯,用 <br /> 标签代替它。如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签



基础标签

<html> <head> <title> </head> <body>

文本标签

<p>  <br/>(换行)    <hr/> (一道横线)    <pre>(保持格式)

背景属性

<body> 拥有两个配置背景的标签。背景可以是颜色(Bgcolor)或者图像(Background)

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。<body bgcolor="#000000"><body bgcolor="rgb(0,0,0)"><body bgcolor="black">都是黑色。

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。<body background="clouds.gif">、<body background="http://www.w3school.com.cn/clouds.gif">

提示:如果你打算使用背景图片,你需要紧记一下几点:

背景图像是否增加了页面的加载时间。小贴士:图像文件不应超过 10k。

背景图像是否与页面中的其他图象搭配良好。

背景图像是否与页面中的文字颜色搭配良好。

图像在页面中平铺后,看上去还可以吗?

对文字的注意力被背景图像喧宾夺主了吗?

<body> 标签中的背景颜色(bgcolor)、背景(background)和文本(text)属性在最新的 HTML 标准(HTML4 和 XHTML)中已被废弃。W3C 在他们的推荐标准中已删除这些属性。应该使用层叠样式表(CSS)来定义 HTML 元素的布局和显示属性。

style标签

<html>

<body style="background-color:PowderBlue;">

<h1 style="text-align:center">This is a heading</h1>

<h2 style="background-color:red">This is a heading</h2>

<p style="font-family:verdana;color:red">

This text is in Verdana and red</p>

<p style="font-size:30px">This text is 30 pixels high</p>

</body>

</html>

style标签中的 background-color、 text-align、font-family、color 以及 font-size 属性分别定义元素背景颜色、中文本的位置、字体系列、颜色和字体尺寸。替换掉了原来的align、bgcolor、color等标签


格式化

<q> 用于短的引用,浏览器通常会为 元素包围引号

<blockquote>用于长引用,浏览器通常会对元素进行缩进处理。

 <abbr>  缩写或首字母缩略语。对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

<dfn> 元素定义项目或缩写的定义

<address> 元素定义文档或文章的联系信息(作者/拥有者)。 此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行

<cite>定义元素的著作题目,一般斜体

<bdo> 元素定义双流向覆盖,<bdo dir="rtl">:文字从右向左显示

<code>定义计算机代码文本。通常HTML 使用可调整的字母尺寸以及字母间距。在显示计算机代码示例时,并不需要如此。因此<kbd><samp>, 以及 <code> 元素全都支持固定的字母尺寸和间距。

<kbd>定义键盘文本

<samp>定义计算机代码示例

<var>定义变量

<pre>定义预格式化文本,以上的标签对空格和换行只做一个空格处理,只有该标签能够是内容按格式输出。

(格式化代码见geshihua.html文件)

HTML5实体

标签语句想要显示必须加入实体。就像java的转义字符

如你想要网页显示<html>不能直接输入,而是要&lt;<html>&gt;  这个样子才能显示出html

  &nbsp;空格    &quot;双引号     &apos;单引号      &amp;&符号     &lt;小于号    &gt大于号

其他实体可以用到时去网上查

HTML5不需要结束的标签

br  、hr、 img、link 、meta 、area   、input 、base   、col、command、 embed、keygen、param 、source 、track 、wbr、frameset(不建议用)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,164评论 0 0
  • 学习HTML的最佳网站没有之一http://www.w3school.com.cn/html/ 关于HTML/HT...
    Amyyy_阅读 2,138评论 0 16
  • 概述: 1.加载优化 2.CSS优化 3.JS优化 4.动画优化 加载优化 加载过程是最为耗时的过程,可能会占到总...
    太阳mob阅读 413评论 0 6
  • 公司最近人手极度空缺,领导一声令下,让我和另一个 Android 小伙去支援 Java 组开发。秉承着“一块砖”的...
    GinkWang阅读 777评论 0 15
  • 今天读了一个新闻,讲的内容是一架中国飞往美国的飞机上,一个中国熊孩子不断打扰旁边座位哥哥,他建议父母管管孩子,...
    o姜佳欣o阅读 214评论 0 0