前端 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(不建议用)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,723评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,003评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,512评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,825评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,874评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,841评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,812评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,582评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,033评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,309评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,450评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,158评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,789评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,409评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,609评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,440评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,357评论 2 352

推荐阅读更多精彩内容

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