HTML学习(二)常用标签，属性
参考
标签
标签之间可以嵌套
头head
<head>元素包含了所有的头部标签元素。在<head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。 可以添加在头部区域的元素标签为:<title>, <link>,<style>, <meta> , <base>,<script>, <noscript>头部内容不会被显示到网页上
网站标题title
网页标题
在 HTML/XHTML 文档中是必须的
link
链接外部样式表，参见html学习(一)语法结构中css部分
style
定义内部样式表，参见html学习(一)语法结构中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>确定一个段落 所以以后用markdown写文章注意
<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翻译为加粗，如上图
- 表格常用属性
- 根据属性，设置表格边框
<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， 例html学习(一)语法结构中css部分
更改字体的大小，颜色，等等各种标签的不同属性
以下未掌握
title
描述了元素的额外信息 (作为工具条使用)
target
class
为html元素定义一个或多个类名（classname）(类名从样式文件引入)
应用
网插入页pdf
<iframe src="My.pdf" style="width:900px; height:700px;" frameborder="0"></iframe>
网页内引入另一个网页
<body>
<div id="tab_1">
<iframe src="http://cndaqiang.gitee.io/archive/index.html"
width="100%" height="100%"
></iframe>
<!--代码参考自: [CSDN @Uncle_Gen](https://blog.csdn.net/mildddd/article/details/79800950) -->
</div>
</body>
本文首发于我的博客@cndaqiang.
本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！