第二课

标签名定义说明

<html></html> HTML标签 页面中最大的标签,我们成为 根标签

<head></head> 文档的头部 注意在head标签中我们必须要设置的标签是title

<titile></title> 文档的标题 让页面拥有一个属于自己的网页标题

<body></body> 文档的主体

,,,,,,,,

排版标签总结

标签名定义说明

<hx></hx> 标题标签 作为标题使用,并且依据重要性递减

<p></p > 段落标签 可以把 HTML 文档分割为若干段落

<hr /> 水平线标签 没啥可说的,就是一条线

换行标签 

<div></div> div标签 用来布局的,但是现在一行只能放一个div

<span></span> span标签 用来布局的,一行上可以放好多个span

,,,,,,,,,,

HTML标签关系

1.嵌套关系

<head> 

<title> </title>

</head>

2.并列关系

<head></head>

<body></body>

,,,,,,,,,


在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。

标签 显示效果

  <b></b><strong></strong> 文字以粗体方式显示(  <i></i>和<em></em> 文字以斜体方式显示(XHTML推荐使用em)  <s></s>和<del></del> 文字以加删除线方式显示(XHTML推荐使用del)  <u></u>和<ins></ins> 文字以加下划线方式显示(XHTML不赞成使用u)   

b 只是加粗 strong 除了可以加粗还有 强调的意思, 语义更强烈。

,,,,,,,,,,,,,,,,


要想在网页中显示图像就需要使用图像标签,接下来将详细介绍图像标签<img />以及和他相关的属性。


<img src="图像URL”/>

该语法中src属性用于指定图像文件的路径和文件名,他是img标签的必需属性。

<img >标记属性

属性 属性值 描述

src        URL        图像的路径

alt        文本          图像不能显示时的替换文本

title        文本          鼠标悬停时显示的内容

width      像素        (XHTML不支持%页面百分比) 设置图像的宽度

height    像素            (XHTML不支持%页面百分比)设置图像的高度

border    数字              设置图像边框的宽度,

注意:

1.标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。

后顺序标签名与属性、属性与属性之间均以空格分开。

,,,,,,,,,,,,,,

链接标签(重点)

单词缩写: anchor的缩写['aegke(r)]。

在HTML中创建超链接非常简单,只需用标签把文字包括起来就好。

语法格式:

<a href="跳转目标”target=”目标窗口的弹出方式”>文本或图像</a>

属性 作用

href 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能

target用于指定链接页面的打开方式,其取值有self和blank两种,其中_self为默认值,_blank为在新窗口target 中打开方式。

注意:

1.外部链接 需要添加 http://www.baidu.com

2.内部链接直接链接内部页面名称即可比如<a href="index.htm!”>首页<a

3.如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。

,,,,,,,,,,,,

注释标签

在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。

简单解释: I

注释内容不会显示在浏览器窗口中,但是作为HTML文档内容的一部分,也会被下载到用户的计算机上,查看源代码时就可以看到。

语法格式:

<!--注释语句 --> 快捷键是: ctr1 + / 或者 ctrl +shift+


,,,,,,,,,,

语义化标签了解

使用语义化标签的好处是增强了代码的可阅读性,也方便了风目前 优化)。

·header 头部标签

•nav 导航标签

article 内容标签

section 块级标签

aside 侧边栏标签

footer 尾部标签


,,,,,,,,,,,,


每个HTML页面都需要<html>、<head>、<title>和<body>(并携带结束标签d 或 </html>、</head>、</title>和</body>),,,另外<!doctype html>必须出现在第一..html 行,并在<head>开始标签后输入<meta charset>。从技术上讲,<!doctype html>不的文 是一个标签,而是一个声明,所以如果您说只有5个必需的标签,那么也是正确的。

,,,,,,,,,,

为什么<meta charset>标签很重要,它应该放在HTML文档中的什么地方。

<meta charse标签定义了页面使用的字符集,它应该总是在文档中<head>开始标签后立即出现。


,,,,,,,,,

使用标签<meta charset="utf-8”>定义页面使用的字符集。这个标签定义了页面将写入的字符集utf-8。这个标签应该总是在HTML文档中<head>标签之后出现。如果没有它,您的页面可能会受到攻击。


,,,,,,

大部分HTML标签有两个部分:一个开始标签(表示一段文本的开始位置)和一个结束标签(表示一段文本的结束位置)。结束标签在<符号后紧跟一个/(正斜杠)符号。

另一种类型的标签是空标签,因为它不包括一对匹配的开始和结束标签。相反,空标签由一个以<开头的标签组成,可以以>符号之前的/结尾。虽然在HTML5中不再明确地要求结束/,但它有助于与XHTML的兼容:如果您的网站中有一堆以前的XHTML文件,则在升级过程中它们不会中断。在这些课程中,我们在空标签中将不使用/,除非有明确的需求。

以下是对这3类标签的快速总结,只是为了确保您了解每类标签所扮演的角色。

开始标签是指示HTML命令开始的HTML标签;受影响的文本显示在开始标签之

后。开始标签总是以<开头,以>结尾,如<htm1>。

结束标签是指示HTML命令结束的HTML标签;受影响的文本显示在结束标签之前。结束标签始终以</开头,以结尾,如</htm1>。

空标签是一个HTML标签,它发出一个HTML命令,而不在页面中显示任何文本。空标签总是以<开头,以>结尾,没有结束标签,如<meta>。有些设计人员向空标签添加一个结束语/,如<meta/>,但在HTML5中不需要这样

,,,,,,,

创建的每个HTML文件中使用sbody>和<title>标签对,因为每个网页都需要标题和正文文本。您还将使用<html>和<head>标签对,这是清单2.1中显示的其他两个标签。将<htm1>放在文档的最开头,表示文档是一个网页。结尾的</htm1>表示网页

,,,,,,,,,,

HTML代码中多余的空白会自动减少到一个空格。此外,当文本到达浏览器窗口的,边缘时它会自动换行,不管换行符在原始HTML文件中的位置如何。

HTML文件以网页形式打开时,

换行符和段落分隔符只出现在有<br>和<p>标签的地方

,,,,,,,,,,,


如果要控制换行符和段落分隔符的实际显示位置,则必须使用HTML标签。当文本包含在容器<p></p>标签内时,默认在结束标签后出现换行符。<br>标签在段落内强制换行。与您目前看到的其他标签不同,<br>不需要</br>结束标签;这是前面讨论过的空标签之一。

<hr>他是页面上出现一瓶水平线。插入带有<hr>标签的水平规则也会导致换行。即便没有在代码中包含<br>标签,<hr>水平规则标签是一种空标签,因此<hr>永远不会有。结束标签。

,,,,,,,,

当在Internet上浏览网页时,您会注意到许多网页的顶部都有一个标题,它比文本的其余部分显得更大、更粗。<h1>和</h1>标签之间的任何文本都将显示为大标题。此外,<h2>和<h3>依次显示第2、第3标题等,直到<h6>为止,标题逐渐变小。





,,,,,,,,,


早期的做法粗体<b>和斜体i>是标准的语义


,,,,,

最基本的语义元素——<header>元素包含介绍性信息。该信息可能采用<h1>(或其他

别)元素的形式,也可能只是包含了Logo图像或文本的<p>或<div>元素。内容的含义本

上应该是介绍性的,以保证其包含在一个<header></header>标签对中。


<header>中不能包含其他<header>元素,也不能包含<footer>元素。类似地, 标

<header>元素不能包含在<address>或<footer>元素中。

,,,,,,,,,,,,


、、、、

、、、、、、、、、


什么是语言元素?

是描述包含在该元素信息含义的HTML元素

、、、、、、、、、、、、

    <header>元素可以包含除其他<header>元素或<footer>元素之外的任何其他流内容。但是,在<header>元素中不需要标题元素(<h1>到<h6>)。

、、、、、

<footer>标签的内容可以出现在页面上任何有意义的地方。虽然大多数设计人员将页脚内容放在页面的末尾或底部,但不要求必须将其显示在那里。

、、、、、、

    可以根据需要使用任意多个<nav>元素。诀窍是只“需要”使用少数(可能只用于主导航和辅助导航);否则,就失去了意义。

、、、、、

    <article>元素包含任何完整或自包含的、可独立分发或可重用的内容。这可能包括博客条目、杂志或报纸文章、论坛帖子、用户提交的评论、交互式小部件或任何其他独立的内容。

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

推荐阅读更多精彩内容