html学习之行内元素
1. a标签
属性： inline
说明：
-
超链接标签，所有浏览器都支持。
-
链接各种状态的样式：
/* 未访问的链接 */
a:link {
color: #FF0000;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
/* 已选择的链接 */
a:active {
color: #0000FF;
}
-
a:hover必须在a:link和a:visited后面才生效；a:active必须在a:hover后面才生效。
-
伪类选择器对大小写不敏感
-
以上伪类选择器不仅对a标签有用，对其他标签也有用，如<div>
-
| 属性 | 说明 |
|---|---|
| charset | 规定被链接文档的字符集html5不支持 |
| coords | 规定链接的坐标html5不支持 |
| download | 下载文件并且给文件命名（属性值，也可以不赋值）。必须用在服务里，并且下载的资源也要在与其同一个服务；html5新属性 |
| href | 规定链接指向的url.这个链接可以是任意有效的相对或者绝对路径；甚至可以是js或者代码片段。在没有href属性时，一下属性均不可用：download, hreflang, media, rel, target 以及 type 属性 |
| hreflang | 规定被链接文档的语言主流浏览器几乎都不支持 |
| media | 规定被链接的文档是何种媒介或设备优先的。必须在有href的情况下使用 |
| rel | 当前文档与被链接文档的关系 |
| rev | 被链接文档与原文档的关系 |
| shape | 规定链接的形状。配合coords使用，可以制作热点链接。html5不支持-可以配合img标签的ismap属性是实现 |
| target | 规定在何处打开链接。默认在相同的框架中打开（self）、在父窗口打开（parent）、在顶层窗口打开(_top)、在新窗口打开(__blank)、在指定框架打开(framename) |
2. iframe
iframe是html5新特性，它会创建包含另外一个文档的内联框架（即行内框架），所有浏览器都支持。html5不支持frame和frameset
| 属性 | 说明 |
|---|---|
| src | 规定在iframe中显示文本的url可以把你想显示的文本写在iframe标签里面，避免有些浏览器不支持这个标签 |
| frameborder | 规定是否显示框架周围的边框。值为0、1 |
| height/width | 框架的宽和高。值为%或者表示像素的数值 |
| align | 与img的align功能相同，不推荐使用 |
| longdesc | 指向一个对该框架描述的页面，几乎没有浏览器支持 |
| marginheight | 规定iframe框架内部文本顶部和底部的空白间距-既给内部框架的body添加margin-top和margin-bottom。值为表示像素的数值 |
| marginwidth | 规定iframe框架内部文本左侧和右侧的空白间距。值为表示像素的数值 |
| name | 给框架命名。用于引用元素(document.getElementsByName(iframe_name))或者作为链接的目标（比如设置a标签的target属性，规定链接打开的位置） |
| scrolling | 是否在iframe中显示滚动条。值：no(始终不显示)、yes(始终显示)、auto(默认值，当文本超出框，就会显示) |
| sandbox | 启动一系列对iframe框架内容的额外限制。比如限制表单提交、脚本执行等。网址 |
| srcdoc | 规定在框架内的body内写入的内容。会覆盖src链接的文档，当浏览器不支持这个属性的时候，src就会起作用。大部分浏览器都支持这个属性，ie浏览器不支持。例如：<iframe srcdoc="<h2>HTML_code</h2>" /> |
<iframe src="./example/a.html" name="myIframe" scrolling="yes" style="border:1px solid #ddd" marginheight="10"
height="100" width="100" frameborder="0">
<p class="iframe-box">Your browser does not support iframes.</p>
</iframe>
<!--srcdoc的值可以是包含html标签的字符串哦-->
<iframe src="./example/a.html" srcdoc="<h2>HTML_code</h2>" seamless marginheight="10" height="100" width="100">
<p class="iframe-box">Your browser does not support iframes.</p>
</iframe>
<script>
console.log(document.getElementsByName('myIframe'))
</script>
3. img
向网页中嵌入一张图像。它并不会向网页中嵌入图像，而是从网页链接到图像。img标签创建的是被引用图像的占位空间。
img标签没有结束标签，但在xhtml中img标签必须被正确关闭：<img />
| 属性 | 说明 |
|---|---|
| src | 被链接的图像的url。必须有 |
| alt | 当图像加载不出来时候的替代文本。必须有 |
| align | 设置图像的对其方式，有5种值。top\middle\bottom：设置图像与周围文本的垂直对齐方式，img元素还是inline元素；left/right: 会将图像周围与其相邻的文本转移到相应的边界，形成文字环绕的效果，img元素变成block元素。虽然各大浏览器都支持这个属性，但是html5已经不支持这个属性了。建议使用margin来设置图像的位置，通过float来设置文字环绕效果 |
| border | 值为表示像素的数值。不推荐使用，建议用样式替代 |
| height/width | 设置图像的高度和宽度，%或者像素值。当只设置其中一个，另一个会等比例缩放。 |
| ismap | 服务器端图像映射。当用户点击图像上的某个地方的时候，浏览器会自动把鼠标的x,y位置以查询参数的形式发送给服务器。只有当img属于带有有效href属性a标签的后代时,此属性才有作用。例如：<a href="demo_form.asp"> <img src="tulip.gif" ismap /> </a> |
| longdesc | 与alt类似，指向一个包含图片描述信息的页面。当描述超过1024个字符的时候建议使用，当前没有浏览器支持这个属性 |
4. br
br: 空标签，简单的换行标签。在html5中可以写成<br>，在html4中必须带上结束符<br/>
-
在浏览器中如果遇到p标签，会在相邻两个段落之间插入一些垂直间距。
-
clear属性：告诉浏览器立即停止当前的文本流，在左对齐或者右对齐的内联图像或者表格的下一行输出文本。
通常情况下，文本流中的其他行，会在图像的底部显示
当图像设置左对齐之后
当img的align="right"的时候，br的clear属性就要设置为right。这个clear属性是针对内联图像或者表格的对其方式而言的
5. span
组合文档内的行内元素,以便对他们进行分组。
6. 包含一定意义的内联元素
如果单纯的想改变样式，建议使用css样式。
base: 规定页面所有链接的默认地址(href)和默认目标(target)。如果地址是相对路径，以默认地址为准。base标签是写在head标签里。
bdo: 改变文本方向。关键属性：dri。属性值：ltr(从左向右-默认)、rtl(从右向左)
big: 定义大号文本html5不支持
em: 强调文本。以斜体字的样式呈现。
strong: 比em更重要的强调。以粗体字的形式显示。
dfn: 用来描述特殊术语，以斜体字呈现。在文档中最好少用为妙。
code: 用于表现计算机源码或者其他机器可以阅读的文本。字体以等宽字体呈现。
kbd: 定义键盘文本，通常会以等宽字体显示。比如
<p>键入 <kbd>quit</kbd> 来退出程序，或者键入 <kbd>menu</kbd> 来返回主菜单。</p>
var: 表示变量名称。通常以斜体字呈现。
cite: 定义引用，以斜体字呈现。
del: 删除文本。大部分浏览器会以中划线的形式显示
ins: 插入文本。大部分浏览器会以下划线的形式显示
