HTML 标签与布局

HTML介绍

HTML（HyperText MarkupLanguage）简称超文本标记语言。它和CSS、JavaScript组合完成一个网页的设计。对于一个网页，HTML定义网页的结构，CSS描述网页的样子，JavaScript则实现人机交互。

HTML语义化

提及HTML，最常提到的就是它的语义化。简单来讲，HTML语义化就是：页面内容的结构化，即便用合乎语义的标签来表述内容。举个例子：文章标题用header，章节用section,段落使用p，等等。语义化的好处在于：(1)提升可访问性（帮助辅助技术更好的阅读和转译你的网页）。(2)提升可检索性（便于搜索引擎解析）。(3)提升互用性（便于代码的后期维护）。

HTML经常使用标签介绍

<header>

• 使用场景：定义文章的介绍信息，如标题、Logo、搜索框、做者名称等等。

<nav>

• 使用场景：导航栏等
• 描绘一个含有多个超连接的区域，这个区域包含转到其余页面，或者页面内部其余部分的连接列表.。结构通常是ul标签下 多个li标签。

<main>

• 使用场景：文档的主要内容。
• 它在文档中是惟一存在的，不可定义多个。它不该包含在文档中重复出现的内容，好比侧栏、导航栏、站点标志或搜索表单。

<section>

• 使用场景：内容专题、功能模块。
• 表示文档中的一个区域（或节） ，通常包含标题，内容。若是不含标题，不建议使用。

<article>

• 使用场景：论坛帖子、杂志或新闻文章、博客、用户提交的评论它是一个独立可复用的结构。

<aside>

• 使用场景：侧边栏、标注框、广告栏等。
• 做为侧边栏、广告栏时（通常和article并列）；做为标注框时（嵌套在article内）

<footer>

• 页脚，一般包含做者、版权信息或者相关连接等

section和article的比较

• article和section最大的区别在于article具备很大的独立性，也就是说若是抛开上下文，单独拿出这个结构出来，还可以清晰的表达这个结构的功能。举个例子：一个新闻网站它包含不少板块，好比科技、时事、娱乐等，这些模块可使用section。在这些模块下有许多文章，这写文章可使用article。一篇文章，除了内容可能还有下面的评论。咱们可使用section表示评论这一个模块，在评论模块下是一条条具体的评论，而这一条条评论可使用article。
• 在上面的例子中，使用section将一篇文章划分为：文章内容和评论这两部分。article则是一条条评论。这样一对比，咱们就能清晰的知道section相对于article来讲模块之间的联系性要大的多。

<i> <b>

• i和b标签都不具备语气强调做用。i通常用来表示：专业术语、外语短语等，表现形式是斜体 。b通常用于：关键字、论文导语等等，表现形式是粗体

<em> <strong>

• em表示文本内容的强调，强调位置的不一样每每会影响语义。好比：猫是可爱的动物。这句话侧重在表述猫这种动物。可是：猫是可爱的动物。这句话侧重在是，表达了一种不可置于的语气。strong表示醒目强调，意在表达内容重要性、紧急性、严重性等。

<iframe>

• 表示嵌套的浏览上下文，有效地将另外一个HTML页面嵌入到当前页面中。 具体操做以下图：

  

• iframe的做用是在页面中嵌套一个外部页面。
• iframe的默认宽度是100px、高度是50px。咱们能够经过<style>标签去设置宽度和高度， 得注意的是iframe的宽度能够设置为100%，可是高度却不能够设置100%。
• iframe标签内的（src=""）连接能够是任何网站，可是若是为("#")的话则默认是当前页面。frameborder=0属性表示的是iframe边框为0，若是不为0则iframe是有边框的
• iframe能够经过name属性和a标签连接在一块儿，即经过a标签的target和iframe相连，如上图所示，当咱们点击“我说一个a连接”时，是在iframe内跳转至新页面。

<a>

• 超连接
• a标签中的(href="")表示引用的连接地址，当咱们点击连接时有两种状况。
• 第一种是在标签内添加download属性，即<a href="" download >下载</a>，这种状况是点击连接就能够下载(href="")内容。注意：当网页声明content type 'application/octet-stream' 时，默认为自动下载东西。当网页声明content type "text/html"时，则须要加上download。
• 第二种就是咱们常见的连接跳转，即点击连接就能够访问对应的地址。在访问时添加target属性能够定义跳转的方式。<a href="" target="" >打开网页</a>。
• target有四种方式分别是：_blank、 self、parent、top。_blank 表示在新的页面打开。_self 表示在本页面打开。_parent 表示在父级页面打开。_top即顶层页面。

href

• 关于href="（）"，括号中的内容能够有多种（假设如今的页面是file:///C:/Users/Administrator/Desktop/1.html）:
• 若是href="qq.com" 则表示打开的是(Desktop中)qq.com文件。
• 若是href="//qq.com" 则表示打开的是file://qq.com文件(即当前页面的协议file://)。
• 若是href="xxx.html" 则表示打开的是Desktop/xxx.html。
• 若是href="#sss" 则表示不刷新网页只是当前页面跳转（#锚点）。
• 若是href=""?name=xxx"打开的是file://index.html?name=xxx。
• 若是href="javascript:;" 则表示空链接，点击后什么也不发生。

<frame>

• 文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。 具体操做以下图：

  

• form和a标签都是请求标签，可是惟一不一样的是form表示的是post请求，它是经过method="post"来设置请求的，默认请况下是get请求。
• form标签发送请求是经过和input标签结合来使用，从图中能够看到有三个提交按钮，只有（提交一、提交3）能够提交请求，（提交2）不能够提交。即提交方式能够经过（input标签设置type="submit"）或者（直接使用button标签）。
• form标签的target请求方式和a标签相同。
• form标签在请求（action=""）时能够经过在网址后面添加(?name=xxx)来添加请求数据。

checkbox radio

• CheckBox和radio都是选择框，咱们能够经过设置lable标签和它们结合实现点击字体内容也可以实现选择。即经过<input id="xxx"><lable for="xxx">(内容)</lable>实现
• CheckBox和radio均可以设置name值，name值表示请求时附带的参数。可是两者惟一不一样之处是当radio的多个选择的name值相同时，只可以选择一个选项。

<select> 表单控件，能够建立选项菜单

• select能够建立选择菜单，经过option标签的value属性能够添加所须要的内容。
• 咱们能够经过select标签内的 multiple属性设置菜单能够为多项选择。
• 经过option标签的disable设置该选项不能够选择。
• 经过option标签的selected设置默认选择。

<table> 表单控件，能够建立选项菜单

• table标签能够分红thead、tbody、tfoot、结构。
• tr(table row)表示一行。
• th(table head)表示表头。
• td(table data)表示数据。
• colgroup标签和col组合使用，能够对表格每一列进行设置。