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标签结合来使用，从图中可以看到有三个提交按钮，只有（提交1、提交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组合使用，可以对表格每一列进行设置。

转载于:https://juejin.im/post/5ca748dcf265da309f536b9f