学习网址
建议去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>,比如说:
网友评论