HTML---第一天笔记

WEB标准构成

web标准不是某个标准,而是有W3C和其他标准组织制定的一系列标准集合。主要包括:结构、表现和行为三个方面。

结构标准:结构用于对网页元素进行整理和分类,主要包括XML和HTML两个部分。

样式标准:样式用于设置网页元素的版式、颜色。大小等外观样式,主要指的是CSS。

行为标准:行为是指网页模型的定义以及交互的编写,主要包括DOM和JS两部分。

HTML骨架格式


html标签:作用所有html中标签的一个根节点。

head标签:用于存放:title,meta,base,style,script,link等标签,其中head标签中必须要放置title标签。

title标签:让页面拥有一个属于自己的标题。

body标签:页面的主题部分,用于存放所有的html标签,主要用来构成页面的结构。

HTML标签分类

HTML页面中,带有“<>”符号的元素被称为HTML标签,所谓的标签就是带有某种功能或者语义的编码命令,同时也称为HTML标签或者HTML元素。常见的HTML标签的形式有两种:双标记标签和单标记标签。

双标记标签:

结构:<标签名>内容</标签名>,双标记标签有开始标签也有结束标签。

常见双标记标签有:<html></html>/<title></title>/<body></body>/<h1~6></h1~6>等

单标记标签:

结构:<标签名 />,单标记标签也长称为空标签,是指用一个符号即可完整描述某个功能的标签。

HTML标签的关系:

1.嵌套关系(父子关系):

如html结构中<head><title></title></head>head与titl即为嵌套关系。

2.并列关系(.兄弟关系)

如HTML结构中的<head></head><body></body>head与body之间即为并列关系。

注意:在书写html代码时如果两哥标签之间是并列关系则最好上下对齐,若是嵌套关系,则尽可能的将子元素缩进一个tab键的身位。

常用的HTML标签:

标题标签<hn>标题文本</hn>(n从1到6):随着n 的增大,标题的字号逐渐减小,并且所有的h 标签的字体均默认加粗。

注意:h1一般都是用作文本标题或则给logo使用的,在使用标题标签时尽量不要使用h1标签,一般情况下一个页面中只允许使用一个h1标签。

段落标签<p>文本内容</p>:段落标签可以将网页中的文字有条理的显示出来。默认情况下,文本在一个段落中会根据浏览器窗口的大小自动切换行。

水平线标签<hr />:水平线标签是个单标记标签,可以使用水平线标签将网页中的文本段落隔开。

换行标签<br />:在html编辑过程中我们常用的空格合回车都不会再网页中显示效果,如果你想让一段文字在固定的位置换行,只能添加<br />换行标签,网页才是显示效果。

图像标签:<img src="插入图片的路径" alt="当图片不能正常显示时,图片的文本描述" /> ,图像标签是单标记标签。

文本格式化标签:在网页中,有时需要为文字设置粗体,斜体,下划线效果,这是就需要使用文本格式化标签,使文字显示出特殊效果。

常见的文本格式化标签有如下几对:

1,文本以粗体的形式显示:<b></b>、<strong></strong>,在xthml中推荐使用strong

2、文本以斜体的方式显示:<i></i>、<em></em>,在XHTML中推荐使用em

3、文本以加有删除线的方式显示:<s></s>、<del></del>,在XHTML中推荐使用del

4,文本以加有下划线的方式显示:<u></u>、<ins></ins>

标签属性:

在使用html制作网页时,如果想让HTML标记提供更多的信息,可以使用HTML标记属性加以设置。其基本语法格式为:

<标签名 属性1=“属性值1” 属性2=“属性值2” ...>内容</标签名>

标签的属性室友键值对构成的,一个标签可以有多个属性,不同的属性之间用空格隔开。

链接标签:用于在HTML页面中创建超链接,其基本语法格式如下:

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

上述标签中的属性:

href:用于指定链接跳转目标的URL地址,当标记应用href时,则说明该标签具有了超链接的功能。

traget:用于指定链接页面的打开方式,其取值有_self:为默认值,表示在当前窗口中打开,_blank在新建窗口中打开链接页面。

锚点定位:通过创建锚点链接,用户能够快速定位到目标内容,创建锚点定位的步骤:

1.使用“<a href="#id名">链接文本</a>”创建链接文本

2.使用相应的id名标注跳转目标的位置

HTML注释:

注释是为了让编写代码的人员能够清楚知道代码的功能,HTML注释标签结构:

<!--注释文本-->注释文本在网页中显示不出来

路径介绍:

1、相对路径:

(1)图像文件和HTML文件位于同一个文件夹中:只需输入图像的文件名即可

(2)图像文件位于HTML下一级文件夹:则引入文件时需要输入文件夹名称和文件名,文件夹名和文件名之间用/隔开

(3)图像文件位于HTML文件的上一级文件:则引入文件时需要在文件名之前加上“../",如果是上两级则需要加上两个"../",依次类推

2、绝对路径:

即文件所在位置的完整地址。

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,598评论 18 139
  • 0.B/S结构 浏览器服务器模式,web浏览器是客户端最主要的应用软件.将客户端使用web进行统一,系统功能实现集...
    liusong007阅读 1,042评论 0 1
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,224评论 1 41
  • 原 Blog 链接:HTML基础学习笔记 自学 html 基础笔记 Web 前端简单介绍 web 前端包含: pc...
    任凱阅读 1,378评论 0 5
  • HTML基础 本文包括 HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、java...
    廖少少阅读 2,078评论 2 21