HTML学习(二)常用标签，属性
参考
HTML 教程| 菜鸟教程
HTML 教程 - w3school 在线教程
标签
标签之间可以嵌套
头head
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <link>,<style>, <meta> , <base>,<script>, <noscript>
头部内容不会被显示到网页上
网站标题title
网页标题
在 HTML/XHTML 文档中是必须的
link
链接外部样式表，参见20170809html学习(一)语法结构中css部分
style
定义内部样式表，参见20170809html学习(一)语法结构中css部分
meta
<meta> 标签通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
例,指定作者，并3秒钟刷新一次
<meta name="author" content="cndaqiang" >
<meta http-equiv="refresh" content="3">
<meta charset="utf-8"> 声明UTF8编码
<meta charset="gbk"> 声明GBK 为默认编码。
<base>,<script>, <noscript>未掌握
body
浏览器展示给用户的部分
HTML标题<h1>...<h6>
标题随数字增大，逐渐变小
<h1>第一个标题</h1>
<h2>第二个标题</h2>
水平线<hr>
例
段落<p>
html忽略html代码中的回车，不会被“翻译”为换行
多个空格只会输出一个空格(毕竟是源代码，对空格进行忽略再正常不过)
无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
使用<p>...</p>确定一个段落
<p>一个段落</p>
段落 1
段落2
<p>二个段落</p>
效果
一个段落
段落 1 段落2
二个段落
换行br
例，不换段落换行
<p>二个<br>段落</p>
文字格式化
字体格式
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本 |
| <em> | 定义着重文字 |
| <i> | 定义斜体字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| <sub> | 定义下标字 |
| <sup> | 定义上标字 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
例
<b>粗体</b><em>着重</em><i>斜体</i><small>小号</small>
<strong>加重</strong><sub>下标</sub><sup>上标</sup>
<ins>插入</ins><del>删除</del>
计算机输出
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码 |
| <kbd> | 定义键盘码 |
| <samp> | 定义计算机代码样本 |
| <var> | 定义变量 |
| <pre> | 定义预格式文本 |
例
<code>code</code><br><kbd>kbd</kbd><br><samp>samp</samp><br>
<var>var</var><br><pre>pre</pre>
引用
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写 |
| <address> | 定义地址 |
| <bdo> | 定义文字方向 |
| <blockqu> | 定义长的引用 |
| <q> | 定义短的引用语 |
| <cite> | 定义引用、引证 |
| <dfn> | 定义一个定义项目 |
<abbr>abbr</abbr><br><address>address</address><br>
<bdo>bdo</bdo><br><blockqu>blockqu</blockqu><br><q>q</q><br>
<cite>cite</cite><br><dfn>dfn</dfn>
超链接<a>
<a href="url">链接文本</a>
请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.runoob.com/html/"
图像img
简书编辑器发布时会自动把图片代码转换成md语法，换图
表格table
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
| 标签 | 功能 |
|---|---|
| <table> | 定义表格 |
| <th> | 定义表格的表头 |
| <tr> | 定义表格的行 |
| <td> | 定义表格单元 |
| <caption> | 定义表格标题 |
| <colgroup> | 定义表格列的组 |
| <col> | 定义用于表格列的属性 |
| <thead> | 定义表格的页眉 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
例
<table>
<tr>
<th>头1</th><th>头2</th>
</tr>
<tr>
<td>单元1</td><td>单元2</td>
</tr>
</table>
效果
注
- 可以没有表头th全是元素td，浏览器一般会把标头th翻译为加粗，如上图
-
表格常用属性 来自http://www.w3school.com.cn/index.html
- 根据属性，设置表格边框
<table border="1"> - 表格内嵌套图片等当然没问题
列表
列表定义
如 有序列表
- 一
- 二
- 三
无序列表
- 一
- 二
- 三
有序列表
<ol>
<li>一行</li>
<li>二行</li>
</ol>
无序列表ul
语法
<ul>
<li>一行</li>
<li>二行</li>
</ul>
自定义列表
就是没有开头的圆点和编号
dt比dd要缩进，如
<dl>
<dt>- white cold drink</dt>
<dt>- white cold drink</dt>
<dt>- white cold drink</dt>
<dt>- white cold drink</dt>
<dd>- white cold drink</dd>
<dd>- white cold drink</dd>
<dd>- white cold drink</dd>
</dl>
效果如图
列表项内部可以嵌套段落、换行符、图片、链接以及其他列表等等。
区块
大多数 HTML 元素被定义为块级元素或内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>,<div>
div
<div> 元素没有特定的含义，它属于块级元素，浏览器会在其前后显示折行。
与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的方法。
例
<div>
<div>
<h1>标题</h1>
</div>
<div style="float:left">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div style="float:right">
<p>内容</p>
<p>内容</p>
</div>
</div>
效果
当然使用table也能实现相同效果，增加css定义，可以使网页布局更顺眼
学到这，就可以看好看网页的css和布局了
框架
就是在网页上显示另一个html文档，注意仅是html文档，如果url指向的是php或者其他类型不可以
语法
<iframe src="http://127.0.0.1/html/" ></iframe>
设置显示大小
<iframe src="目录" width="200" height="200"></iframe>
去除边框
<iframe src="目录" frameborder="0"></iframe>
标签嵌套实例
图片超链接
<a href="http://www.jianshu.com/"><img src="http://upload-images.jianshu.io/upload_images/4575564-a6dd1dfc508d8f09.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"/></a>
属性
属性="属性值"
href超链接
例
<a href="url">链接文本</a>
id标记
例
点击超链接回到一个段落则跳转到id为one的部分
<p id="one">一个段落</p>
省略
<a href="#one">回到一个段落</a>
跳转到另一url内的id
<a href="http://test.com/index.html#tips">
style
定义元素内样式表,用于css，
例20170809html学习(一)语法结构中css部分
更改字体的大小，颜色，等等各种标签的不同属性
以下未掌握
title
描述了元素的额外信息 (作为工具条使用)
target
class
为html元素定义一个或多个类名（classname）(类名从样式文件引入)
