ife学习一,html入门

学习网址
建议去w3c上利用在线编辑器使用,实践是检验真理的唯一标准。


html和css关系,html就是基本的骨架(可能不够透彻),而css就是装饰,让页面符合人们的审美。

把你想展示的元素用html的的方式展示出来,例如<p>标签,<a>标签,<img>标签等,还有一些css3刚出来的标签,其实都是更加细致分类语义化,因为html可能展示的对象不同,例如对与搜索引擎和盲人所以,对与这个我们要精确每一个标签元素。就像我们看报纸一样,简单清晰的排版,对于我们精确查找自己想要的咨询是有益的。

  • 标题:<header>元素表示一组引导性的帮助,可能包含标题元素,也可以包含其他元素,像logo、分节头部、搜索表单等。
  • 导航栏:<nav> 描绘一个含有多个超链接的区域,这个区域包含转到其他页面,或者页面内部其他部分的链接列表。
  • 主要内容:<body>或应用的主体部分。主体部分由与文档直接相关,或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的,不包含任何在一系列文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站logo,搜索框(除非搜索框作为文档的主要功能)。 具有代表性的内容段落主题可以使用 <article>,<article>元素表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。 Section 元素 (<section>) 表示文档中的一个区域(或节),比如,内容中的一个专题组,一般来说会有包含一个标题(heading)。一般通过是否包含一个标题 (<h1>-<h6> element) 作为子节点 来 辨识每一个<section>。和 <div> 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器,它在语义上不代表任何特定类型的内容,它可以被用来对其它元素进行分组,一般用于样式化相关的需求(使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组 (比如 lang),它应该在没有任何其它语义元素可用时才使用 (比如 <article> 或 <nav>) 元素。
  • 侧栏:<aside> 元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。他们通常包含在工具条,例如来自词汇表的定义。也可能有其他类型的信息,例如相关的广告、笔者的传记、web 应用程序、个人资料信息,或在博客上的相关链接。 经常嵌套在Main元素()呈现了文档<body>或应用的主体部分。主体部分由与文档直接相关,或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的,不包含任何在一系列文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站logo,搜索框(除非搜索框作为文档的主要功能) 中。
  • 页脚:<footer> 元素表示最近一个章节内容或者根节点(sectioning root )元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

<head>标签

一般用来展示一些网页的基本信息给搜索引擎和浏览器等,关于这个你们可以去随便找一个网站然后右键点击审查,就可以看到网页的源代码,其中<head>包裹起来的就是网页的信息了,越是大型的网站包含的信息越多。其中有不懂的元素可以自行百度,这个不做过多介绍。

标题和段落

每个段落由<p>标签进行定义,而标题由<h1>,<h2>,<h3>,<h4>,<h5>,<h6>等构成,<h1>一般都是网页的title,只有一个,而<h2>,是每个段落的标题,<h3>是段落子标题,其它的一般登记逐次下降,建议用的时候线自己在代码中查看它的font的大小在进行使用。尽量少使用,这将会使你的文档变得难以操作而且导航。

列表lists

无序列表使用<ul> <li>,有序列表使用<ol> <li>,可以利用嵌套使用来实现多级菜单。

重点强调

这里介绍的有<strong> <em> <span> <i>,<strong> <em>都是强调,而<em>的语义化相比<strong>更为场景化一点。html5重新定义了这些元素,给了他们更深刻的意义,让人们能根据自身的需求更为精准的使用这些标签。
<i> 用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等,它的内容通常以斜体显示。
被用来传达传统上用斜体表达的意义:外国文字,分类名称,技术术语,一种思想……
<b>元素表表示相对于普通文本字体上的区别,但不表示任何特殊的强调或者关联,通常以粗体显示。
被用来传达传统上用粗体表达的意义:关键字,产品名称,引导句……
<u> 元素使文本在其内容的基线下的一行呈现下划线。在HTML5中, 此元素表示具有未标注的文本跨度,显示渲染,非文本注释,例如将文本标记为中文文本中的专有名称(一个正确的中文标记), 或 将文本标记为拼写错误。
被用来传达传统上用下划线表达的意义:专有名词,拼写错误……

详细查看
i, b, em, strong元素在HTML5中的新语义

超链接

超链接包含指向网址,文件,音频视频等url。一般配合<a href="#"></a>使用,例子如下:

<p>I'm creating a link to <a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>. </p>

常用属性:target,title等。
title,这旨在包含关于链接的补充有用信息,例如页面包含什么样的信息或需要注意的事情。一般和<a>中的文字一样。
target,决定你的开链接的方式,是从新标签中打开还是直接打开,详情查看w3c。
另外需要注意的是,你命名链接的方式,必须给人直观的感觉这是可以点击的,例如:

<p><a href="https://firefox.com/">
Download Firefox
</a></p>

而不是

<p><a href="https://firefox.com/">
Click here
</a>
to download Firefox</p>

描述列表

关于dt dd dl的用法,这种列表的目的是标记一组项目及其相关描述,例如术语和定义,或者是问题和答案等。
这个可以参见ife课程中task1的图片标题格式,这个用到了dt dd,主要是一个标题一个描述对应的这种方式。
请注意:一个术语<dt>可以同时有多个描述<dd>,比如说:

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,748评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,239评论 1 41
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,651评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,056评论 25 707
  • -1- 啊,我又说错话了! 啊,我又忘记拿移动电源了! 啊,啊,啊!我怎么总是犯错啊! 小学的时候,老师让我们每人...
    用时间酿酒阅读 1,753评论 9 59