Html基础

类

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。

为相同的类设置相同的样式，或者为不同的类设置不同的样式。

* 分类块级元素：

它能够用作其他 HTML 元素的容器,设置<div>元素的类，使我们能够为相同的<div>元素设置相同的类。

<div  class="cities">

<h1>China</h1>

<p>中国有许多省份</p>

</div>

样式：

<head>

<style>

.cities{

color:red;

padding:20px;

}

</style></head>


* 分类行元素：

行内元素，能够用作文本的容器。设置<span>元素的类，能够为相同的<span>元素设置相同的样式。

<p>呵呵，<span class="red">Important</span>这边是一般的文本信息</p>

样式：

<style>

span.red{

color:green;

margin:50px;

}

</style>


布局

<div>元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

* 使用 HTML5 的网站布局：

    header：定义文档或节的页眉；

    nav: 定义导航链接的内容；

    section: 定义文档中的节；

    article: 定义独立的自包含文章；

    aside: 定义内容之外的内容（比如侧栏）；

    footer: 定义文档或节的页脚；

    details: 定义额外的细节；

    summery: 定义 details 元素的标题；

* 使用表格的Html布局：

<table>的作用是显示表格化的数据；

使用<table>元素能取得布局效果，因为能够通过 CSS 设置表格元素的样式；


Html响应式web设计（多看多写）

什么是响应式 Web 设计？

· RWD 指的是响应式 Web 设计（Responsive Web Design）

· RWD 能够以可变尺寸传递网页

· RWD 对于平板和移动设备是必需的

    * 创建您自己的响应式设计：创建响应式设计的一个方法，是自己来创建它

    * 使用 Bootstrap：另一个创建响应式设计的方法，是使用现成的 CSS 框架；Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。

Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机:

<head>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<head>

Html框架（使用框架，一个浏览器页面可以放置多个Html页面）

通过使用一个框架，你可以在同一个浏览器窗口中显示不止同一个页面。每份Html文档成为一个框架，并且每一个都独立于其他的框架。

使用框架的坏处：

    *  开发人员必须同时跟踪更多的HTML文档

    *  很难打印整张页面

框架结构标签：<frameset>

  *  框架结构标签（<frameset>）定义如何将窗口分割为框架；

  * 每个 frameset 定义了一系列行或列；

  * rows/columns 的值规定了每行或每列占据屏幕的面积

编者注：frameset 标签也被某些文章和书籍译为框架集。

框架标签（Frame）：

Frame 标签定义了放置在每个框架中的 HTML 文档。

在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：

<frameset cols="25%,75%" >

<frame src="frame_a.htm">

<frame src="frame_b.htm">

</frameset>

备注：假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame>标签中加入：noresize="noresize"。

为不支持框架的浏览器添加<noframes>标签；

重要提示：不能将<body></body>与<frameset></frameset>标签同时使用，不过，假如你添加包含一段文本的<noframes>标签，就必须将这段文字嵌套于<body></body>标签内；

eg:

<frameset  cols="25%,75%">

<frame src="frame_a.htm">

<frame src="frame_b.htm">

<noframes>

<body>这里浏览器不支持框架</body>

</noframes>

<frameset>


内联框架（即内框架）

iframe运用在网页内显示网页

* 添加iframe语法：

<iframe src="URL"></iframe>

URL指向隔离页面的位置；

Iframe - 设置高度和宽度：height 和 width 属性用于规定 iframe 的高度和宽度。

属性值的默认单位为像素；但也可以用百分比来设定（比如80%）。

eg：

<iframe src="demo.iframe.htm"  height="200"  width="200"> </iframe>

* Iframe -删除边框

frameborder属性规定是否显示iframe周围的边框，设置属性frame border数值为0则可以移除边框；

<iframe src="demo.iframe.htm"  frameborder="0"></iframe>

* 使用iframe作为链接的标准

iframe可用作链接的目标（target）

链接的target属性必须引用iframe的name属性：

<iframe  src="iframe.htm"  name="iframe_a"></iframe>

<p><a  href="http://www.w3school.com.c"  target="iframe_a"></a></p>


Html背景

* 背景（Backgrounds）

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

背景颜色（Bgcolor）

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

<body bgcolor="#000000"></body>

<body bgcolor="rgb(0,0,0)"></body>

<body bgcolor="black"></body>

eg:

添加图片为背景：

<body  background="/i/eg_bg_06.gif"></body>

使用颜色设置背景和文字颜色

<body  bgcolor="#ffffff"  text="yellow"></body>

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

背景（Background）

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制；

<body  background="clouds.gif"></body>

<body background="http://www.w3school.com.cn/clouds.gif"></body>

URL可以是相对地址，如第一行代码，也可以使用绝对地址，如第二行代码，

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

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

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

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

* 图像在页面中平铺后，看上去还可以吗？

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


Html脚本(即javascript)

JavaScript 使 HTML 页面具有更强的动态和交互性。

插入一段脚本：

<body>

<script  type="text/javascript">

document.write(" <h1> Hello world!</h1>")

</script>

</body>

如何应用不支持脚本或禁用脚本的浏览器：

<body>

<script>

document.write("hello world")

</script>

<noscript> Sorry, your browser does not support JavaScript! </noscript>      //在浏览器不支持客户端脚本时候显示此段文字

</body>

* HTML script 元素

<script>标签用于定义客户端脚本，比如javascript

script元素既可以包含脚本语句，也可通过src属性指向外部脚本文件；

必需的 type 属性规定脚本的 MIME 类型。JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出“Hello World!”：

<script>

document.write(" hello world!")

</script>

 *<noscript>标签

<noscript>标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时.

* noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

* 只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：

如何应付老式的浏览器

注意：如果浏览器压根没法识别<script>标签，那么<script>标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别<script>标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。

javascript：

<script type="text/javascript">

<!--

document.write("Hello World!")

//-->

</script>


Html头部

文档的标题

* <title>标题定义文档的标题

eg: 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

<meta http-equiv="Content-Language" content="zh-cn"/>

<title>标题不会显示在文档区</title>

</head>

* 如何使用 base 标签使页面中的所有标签在新窗口中打开

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<mata http-equiv="Content-Language" content="zh-cn">

<base target="_blank"></head>

<body >

<p>

<a href="http://www.w3school.com.cn" target="_blank">这个连接</a>将在新窗口中加载，因为 target 属性被设置为 "_blank"</a>

</p>

<p>

<a href="http://www.w3school.com.cn"> 这个链接将在新窗口中加载，及时没有target属性</a></p>

</body>

* 使用<meta>元素来描述文档

*使用<meta>元素来定义文档的关键词

* 如何把用户重订到新的网址


HTML<Head>元素

<head> 元素是所有头部元素的容器,<head>内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到 head 部分，<title>,<link>,<base>,<meta>,<script>,<style>

Html <title>元素

<title>标签定义文档的标题，title 元素在所有 HTML/XHTML 文档中都是必需的，

title 元素能够：

 *  定义浏览器工具栏中的标题

 *  提供页面被添加到收藏夹时显示的标题

 *  显示在搜索引擎结果中的页面标题

一个简化的 HTML 文档：

<!DOCTYPE html>

<html>

<head>

<title> 这是文章的标题 </title>

</head>

<body>

The content of document ......

</body>

</html>


Html <base>元素

<base>元素为页面上所有的链接规定默认地址或者是默认目标；

<head>

<base target="_blank" />

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

</head >


Html<link>元素

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

<link>标签最常用作样式表

eg:<head>

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

</head>


Html<style>元素

<style>标签用于为 HTML 文档定义样式信息。

您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式:

<head>

<style>

body {

background-color:yellow

}

p {

color:blue

}

</style>

</head>


Html<meta>元素

元数据（metadata）是关于数据的信息

<meta>标签提供关于 HTML 文档的元数据,元数据不会显示在页面上，但是对于机器是可读的，典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

<meta>标签始终位于 head 元素中。

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

针对搜索引擎的关键词：

一些搜索引擎会利用meta元素的name和content属性来索引你的页面；

meta元素定义页面的描述：

<meta  name="description  content=" Free Web tutorials on HTML, CSS, XML"/>

meta元素定义页面的关键词：

<meta name="keywords"  content="HTML CSS  XML">

备注：name和content的属性的作用来描述页面的内容；


Html<script>元素

<script>标签

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,547评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,399评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,428评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,599评论 1赞 274
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,612评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,577评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,941评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,603评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,852评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,375评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,955评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2赞 342

推荐阅读更多精彩内容