在优梦优近期的工作中也整理出一些基础的资料给移动端以及设计部的小伙伴们看看, 互相学习!
什么是HTML :
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text MarkupLanguage)
HTML 不是一种编程语言,而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页
HTML语义化:
为什么要语义化?
1、
“语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益。
2、
语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用
3、
根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
HTML标签:
什么是HTML标签?
HTML标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词,比如 <html>
HTML 标签通常是成对出现的,比如 <b>和 </b>
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML标签汇总:
在这里举例介绍几个常用的标签 :
<p>用于段落</p>
<b>显示粗体文本</b>
<h1>标题</h1>
<h2>子标题</h2>
<h3>子子标题</h3>
P元素的作用是展示段落。(p元素会自动在其前后创建一些空白。浏览器会自动添加这些空间)
b元素的作用是,告诉浏览器介于标签<b>和</b>之间的文本应以粗体显示。(这里的“b”是“粗体(bold)”的意思。)
h1、h2、h3、h4、h5及h6元素的作用是显示标题(这里的h是“标题(heading)”的意思)。其中h1是一级标题,字体最大;h2是二级标题,字体比一级标题略小;而h6是六级标题,它是最后一级标题,字体也最小。
更多的标签请移步 : http://www.w3school.com.cn/tags/(每个标签的语意和功能在里面都有注解)
HTML结构:
如上图 :
第一行的 <!DOCTYPE html>标签 :
<!DOCTYPE>声明必须是 HTML文档的第一行,位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中,<!DOCTYPE>声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML,所以不需要引用DTD。
第二行的<html>和最后一行的</html>标签:
此元素可告知浏览器其自身是一个 HTML 文档。
<html> 与 </html>标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。正如你所了解的那样,文档的头部由 <head> 标签定义,而主体由 <body> 标签定义。
第三行的<head>和第六行的</head>标签:
<head> 标签用于定义文档的头部,它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
第四行的<matecharset=”UTF-8”>标签:
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部,不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。
而此处的charset=”UTF-8”是用于规定当前页面的编码格式为UTF-8
第五行的<title></title>标签:
<title> 元素可定义文档的标题。
浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样,当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。
第七行的<body>和第9行的</body>标签:
body 元素定义文档的主体。
body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)
这就是一个HTML页面的结构。
如上图红框选中内容, 相信大家都发现一个问题, 那就是开发html页面的时候,所有的元素以及内容都会卸载<body></body>标签中,这是因为 body在html代码中属于主体的,主要内容意思,所有需要展示给用户,看见的内容,除了标题! 其余的都需要写在<body></body>标签中!