作者：浪子花梦 , 个人简介：一个有趣的程序员 ~
从今天开始，我将开始学习前端、ASP.NET 的一些知识，莫把假期浪费，大家一起冲！ 冲！ 冲！
此文只针对向我一样初学的小白，将详细讲解一些基础且重要的HTML5 的知识
希望大家能够喜欢 ^ _ ^
.
因为文章内容实在过于基础，所以为了不耽误各位学习，此文将偏代码实现为主 ~
此文 11399 个字，希望您看完有收获 ~
文章目录
- 初探 HTML5 及 一些标签的使用
- 属性概念 及 使用
- 文本大小粗细介绍
- 三种样式使用
- < a > name属性实现文档内跳转
- 表格的使用
- 列表的使用
- HTML 核心元素之块级元素 div、 span
- div 进行界面布局
- table 进行界面布局
- 常用的一些表单的介绍
- 内联框架 iframe
1）初探 HTML5 及 一些标签的使用
HTML5 标准框架如下所示（快捷键 ：！）：
我们在 body 标签的内部输入如下的代码，初步使用一些基础的标签:
<body>
langzihuameng --- 1
<h1>langzihuameng</h1> --- 2
<p>langzihuameng</p> --- 3
<a href="https://me.csdn.net/weixin_42100963">langzihuameng</a> --- 4
<img src="11.jpg" width="200" height="200"> ---5
</body>
对应解释如下所示：
- body中的内容（直接显示）
- 标题显示（最大级别）
- 段落显示（自动换行）
- 链接引用一个地址（点击会跳转到另一个地方，
使用图片链接原理一样，只是将文字换为图片而已） - 引用一个图片
效果如下所示：
当我们点击其中紫色带下划线的字符时，会跳转到另一个界面（我的博客首页）:
.
2）属性概念 及 使用
我们常常会觉得我们自己非常的帅，这个帅就是我们对自己长相的一个定义，也称属性，在 HTML5 中，我们可以为一个标签进行设置属性，比如：这个元素的宽、高、颜色等等 . . .
<body bgcolor="#0ff"> --- 1
<h1 align="right">huameng</h1> --- 2
<br/>
--- 3
<a href="https://me.csdn.net/weixin_42100963" target="_blank">huameng</a>
</body>
其中属性对应的解释为：
- 将 body的主体颜色设置为 天蓝色（#0ff）
- 将标题文字设置为右对齐
- 链接一个地址，并且在新的网页中打开
< br > 表示换行
效果如下图所示：
.
3）文本大小粗细介绍
<body bgcolor="#0ff">
<p>Welcome come huameng</p> --- 1
<b>Welcome come huameng</b> --- 2
<br/>
<big>Welcome come huameng</big> --- 3
<br/>
<i>Welcome come huameng</i> --- 5
<br/>
<small>Welcome come huameng</small> --- 6
<br/>
<strong>Welcome come huameng</strong> --- 7
<br/>
<ins>Welcome come huameng</ins> --- 8
<br/>
<del>Welcome come huameng</del> --- 9
<br/>
Welcome<sub>Welcome come huameng</sub> --- 10
<br/>
Welcome<sup>Welcome come huameng</sup> --- 11
</body>
对应解释：
- 段落样式显示（自带换行)
- 粗体
- 大号字
- 斜体字
- 小号字
- 加粗（与 2相似）
- 插入
- 删除
- 下标
- 上标
效果如下所示：
4）三种样式使用
在实际的应用中，我们会为元素添加各种各样的样式，使界面变得好看起来，再使用样式的过程中，我们有三种调用样式的方式，分别是：
- 外部样式表
- 内部样式表
- 内联样式表
-
外部样式表
当我们使用外部样式表时，需要一个 .css 文件，例如下面的这个 css文件：
其中，我们设置 h1标签的背景为紫色、字符为天蓝色 . . .
![在这里插入图片描述]()
在 head标签内写下如下的代码：![在这里插入图片描述]()
rel 表示的是一个样式表，type 表示文件类型、href引用 css文件
我们在 body标签中写下如下的代码：
<body> <h1>标题h1</h1> </body>效果如下所示：
![在这里插入图片描述]()
-
内部样式表
我们直接在 head标签中写下如下的代码：<style type="text/css"> p{ color:lightcoral; margin-left: 20px; } </style>在body标签中写下如下的代码：
<body> <p>Welcome come on huameng</p> </body>效果如下所示：
![在这里插入图片描述]()
-
内联样式表
在body标签里直接写出如下的代码：<body> <a style="color:mediumspringgreen;" href="https://me.csdn.net/weixin_42100963">浪子花梦</a> </body>效果如下所示：
![在这里插入图片描述]()
.
5）< a > name属性实现文档内跳转
在很多的网页上有这么一个效果，当我们将网页滑到最下面时，然后点击一个东西会自动回到网页的顶部 . . .
我们将通过 a标签的 name 属性来实现这个效果，代码如下所示：
<body>
<!-- 文档内跳转 name属性 -->
<a name="huameng">Hello World! </a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#huameng">跳转文档内的Hello</a>
</body>
为了突出效果，代码中我们用了大量的 br标签，也就是换行，代码效果如下：
.
6）表格的使用
表格也是网页中不可缺少的一部分，一些数据的表示，界面的一些布局等等 . . .
表格快速生成视频样例如下：
我们写出如下的代码，来试试表格的一些用处：
<body>
<!-- 单元格边距、间距(cellspacing="10") -->
<table border="1" cellpadding="10" style="border-collapse: collapse;" background="11.jpg">
<!-- 表格的标题 -->
<caption>浪子花梦</caption>
<tr bgcolor="#0ff">
<th>浪子</th>
<th>浪子</th>
<th>浪子</th>
</tr>
<tr>
<td>花梦</td>
<td>花梦</td>
<td>花梦</td>
</tr>
<tr>
<td>花梦</td>
<td>花梦</td>
<td>花梦</td>
</tr>
<tr>
<td>
<!-- 表格内的标签 -->
<ul>
<li>帅气</li>
<li>气质</li>
<li>迷人</li>
</ul>
</td>
<td>浪子</td>
<td>花梦</td>
</tr>
</table>
</body>
其中，我表格的标题设置，也有列表的使用，大家可以自行设置 . . .
其中注意的是这一行代码：style=“border-collapse: collapse;”，如果我们不加这行代码的话，将会发生单元格之间存在着一些 “小 bug”，有着空隙存在 . . .
效果如下所示：
.
7）列表的使用
在生活中有着许多的列表使用，比如一个菜单上面的菜，蔬菜肯定是不能和肉类放在一起的，如果非要放在一起，好像也没什么问题 . . .
列举标签如下所示：
使用例子如下所示：
<body>
<ul>
<li type="square">帅气</li>
<!-- 嵌套列表 -->
<ul>
<li>浪子</li>
<li>花梦</li>
</ul>
<li type="circle">气质</li>
<li type="disc">可爱</li>
</ul>
<dr/><dr/><dr/><dr/><dr/>
<ol start="10">
<li type="A">帅气</li>
<ul>
<li>浪子</li>
<li>花梦</li>
</ul>
<li type="a">气质</li>
<li type="l">可爱</li>
<li type="i">可爱</li>
</ol>
<dr/><dr/><dr/><dr/><dr/>
<!-- 自定义列表 -->
<dl>
<dt>气质</dt>
<dd>huameng is a shuaige</dd>
<dt>气质</dt>
<dt>气质</dt>
</dl>
</body>
效果如下所示：
.
8）HTML 核心元素之块级元素 div、 span
块级元素是 界面布局中非常重要的一个内容，他们是一种可以承载其它元素的容器，我将在后面讲解布局的使用 . . .
首先，我们看看几种元素的区别，有块元素，也有内联元素
<body>
<!-- 块元素 -->
<!-- 换行 -->
<p>Hello</p>
<h1>Hello</h1>
<!-- 内联元素 -->
<!-- 不换行 -->
<b>Hello</b>
<a>Hello</a>
<dr/>
<!-- 块元素 容器 访问css样式 -->
<div id="divid">
<p>Hello, World!</p>
<a>Hello, World!</a>
</div>
<!-- 文本容器 span 与 div的区别 被限制了作用域(文本)-->
<div>
<p>
<span>这是一个测试效果</span>
span 是这么一个样子，你看到了吗？
</p>
</div>
</body>
效果如下所示：
div 有着许多的用处，比如说我们方便的用于使用 css样式，我们看到上面的效果，是使用了一个 css样式，他们css源码如下所示：
需要注意的是，id访问前面需要 + # . ..
.
9）div 进行界面布局
我们需要将界面分为四个区域，上、左、右、下，使用 div 可以很好的做到这一点，代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>huameng</title>
<!-- 布局样式设置 -->
<style type="text/css">
/* 渲染全部界面 */
body{
margin:0px;
}
#container{
width: 100%;
height: 800px;
background-color: darkgray;
}
#heading{
width: 100%;
height: 10%;
background-color: aqua;
}
#content_menu{
width: 30%;
height: 80%;
background-color: aquamarine;
/* 浮动原理 平行对齐 */
float: left;
}
#content_body{
width: 70%;
height: 80%;
background-color: blueviolet;
float: left;
}
#footing{
width: 100%;
height: 10%;
background-color: burlywood;
/* 取消浮动 */
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="heading">头部</div>
<div id="content_menu">内容菜单</div>
<div id="content_body">内容主体</div>
<div id="footing">底部</div>
</div>
</body>
</html>
代码比较长，但是不难，我们只需要注意一句代码：float: left; 左浮动效果，我将在 css文章里进行讲解这个原理 . . .
效果如下所示：
.
10）table 进行界面布局
表格所知道的正如表格也可以使用，这一点特别像 WPF中的 Grid布局方式，代码如下所示：
其中，我们用到了垮列单元格 . . .
<!-- 设置主体边界为0 -->
<body bgcolor="#0ff" marginheight="0px" marginwidth="0px">
<table width="100%" height="950px" style="border-collapse: collapse; background-color: coral;">
<tr>
<td colspan="3" width="100%" height="100" style="background-color: darkcyan;">头部</td>
</tr>
<tr>
<td width="20%" height="80" style="background-color:greenyellow;">
<ul>
<li>ios</li>
<li>android</li>
<li>html5</li>
</ul>
</td>
<td width="60%"" height="80%" style ="background-color:lightseagreen;">内容主体</td>
<td width="20%" height="80%" style ="background-color:hotpink;">右菜单</td>
</tr>
<tr>
<td width="100%" height="10%" colspan="3" style="background-color: lightpink;">底部</td>
</tr>
</table>
</body>
其中，我们需要注意的是这一行代码：marginheight="0px" marginwidth="0px"； 如果我们不加这一行代码，那么界面四周将会暴露出来，变的非常的丑，有兴趣的小伙伴可以看一看 . . .
效果如下所示：
.
11）常用的一些表单的介绍
常用表单：
我们常常在网站上做一些操作，而我们与后台数据之间的联系的桥梁就是表单，下面我将列举一些表单的例子，代码如下所示：
<body>
<form>
<input type="password">
<br/>
<input type="color">
<br/>
<input type="datetime">
<br/>
<input type="range">
<br/>
<input type="url">
<br/>
<br/>
<input type="button" value="按钮" style="margin-right: 10px;">
<input type="submit">
<br/>
<br/>
<!-- 指定相同name 实现组合效果 -->
<input type="radio" name="hm">
<input type="radio" name="hm">
<br/>
<br/>
<!-- 下拉列表 -->
<select>
<option>浪子</option>
<option>花梦</option>
<option>我爱你</option>
</select>
<br/>
<br/>
<!-- 文本域 -->
<textarea cols="30" rows="30">请输入您的相关信息</textarea>
</form>
</body>
效果如下所示：
大家可以自行测试 . . .
.
12）内联框架 iframe
使用 frame可以访问多个 文档中的文件，形成某种意义上真正的框架，使用方式如下所示：
a.html 的效果如下所示：
执行的效果如下所示：
