HTML5基础学习-优快云博客

本文链接：https://blog.youkuaiyun.com/ccg_201216323/article/details/53766301

大早上被隔壁的水滴声吵醒，那就起来吧。

L02HTML5基础总共有七大部分，分别学习记录。

HTML5特性简介
HTML5元素、属性和格式化
HTML5样式、链接和表格
HTML5列表、块和布局
HTML5表单提交和PHP环境搭建
HTML5框架、背景和实体
XHTML的使用规范

第一部分、HTML5特性简介

1.HTML5简介

了解HTML：

HTML是用来描述网页的一种语言，HTML指超文本标记语言（Hype Text MarkUp Language）,HTML 不是编程语言，是一种标记语言，和C、C++等编程语言并不相通。

HTML5相关知识：

HTML5的新特性:

2、HTML5 集成开发环境搭建

打开Intellij IDEA——Create New Project——Static Web——Static Web——Next

新建一个名称是index的HTML文件，运行。

3、HTML5 基础讲解

声明：

HTML 也有多个不同的版本，只有完全明白页面中使用的确切HTML版本，浏览器才能完全正确的显示出HTML页面。这就是的用处，不同HTML版本的声明如下图。

HTML基础标签

> head、body标签

head主要定义编码格式，标题，lang=”en”代表英文，lang=”ZH”代表中文。charset=”UTF-8”代表用UTF-8编码格式。

代码中的简单使用：

对应在Chrome浏览器的运行结果是：

第二部分、HTML5元素、属性和格式化

HTML元素：

1、元素指的是从开始标签到结束标签的所有代码。
如p标签。

视频中推荐使用
这种形式来用换行标签，不推荐使用
。（为了代码的规范）

2、HTML元素语法

元素的内容是开始标签与结束标签之间的内容。

空元素在开始标签中进行关闭。

大多数HTML元素可拥有属性

3、嵌套的HTML元素

HTML属性：

代码使用：

运行结果：

HTML格式化方式:

代码使用：

运行结果：

从上面运行结果有下面几条疑问：

1、粗体文字b标签和加重语气strong标签有什么区别，暂时没发现。

2、着重文字em标签和斜体文字i标签有什么区别，暂时也没有发现他们的不同。

第三部分、HTML5样式、链接和表格

1、HTML样式

代码实现：

其中外部样式表中引用到的MyStyle.css文件如下图：

运行结果如下图：

2、HTML链接

代码实现：

运行结果：

3、HTML表格

代码实现：

<p>表格2</p>
<table bgcolor="#f0f8ff" border="1"cellpadding="10" width="500px">
<caption>重要表格</caption>
<tr align="right">
<th>1表头</th>
<th>2表头</th>
<th>3表头</th>
</tr>
<tr align="center">
<td rowspan="2">单元格4</td>
<td colspan="2">单元格5</td>
</tr>
<tr >
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>
<ul>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ul>
</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>

运行结果：

第四部分、HTML5列表、块和布局

1、HTM5别表

1、无序列表属性type：disc 实心圆，circle空心圆，sqare方块

2、有序列表属性type：A(ABCD) a(abcd) I 、i、start（从几开始）

自定义列表练习：

运行结果：

2、HTML5块

代码测试：

<html>
<head lang="en">
<meta charset="UTF-8">
<title>块元素</title>
<!--引入css样式，有点像Android中的导包-->
<link rel="stylesheet" type="text/css" href="mycss.css">
<style type="text/css">
/*指定为span元素*/
span{
color: red;
}
</style>
</head>
<body>
<!--块元素在显示时候，通常会以新行开始-->
<h1>大家好</h1>
<p>大家好</p>
<!--内联元素通常不会以新行开始-->
<b>这是一个加重标签,</b>
<a href="http://www.baidu.com">这是一个超链接标签</a>
<!--div元素也别成为块元素，其主要是组合HTML元素的容器-->
<div id="divid">
<p>
Hello jikexueyuan
</p>
<a>
点击我啊
</a>
</div>
<div id="divspan">
<p>
<!--span元素是内联元素，可作为文本的容器-->
<span> 这是一个测试效果</span>span是一个什么样子的呢
</p>
</div>
</body>
</html>

mycss.css文件：#divide p只定义p元素标签，如果不指定p元素（#divid），那么div中包含的p标签和a标签都将使用这里的css样式。

/*只有p元素才会变化*/
#divid p{
color: aqua;
}
/*#divspan{*/
/*color: crimson;*/
/*}*/

运行结果：

3、HTML5布局

第一种方式：通过div布局来实现：

<html>
<head lang="en">
<meta charset="UTF-8">
<title>div布局</title>
<!--div标签可以不用加-->
<style type="text/css">
body{
margin: 0px;
}
div#container{
width: 100%;
height: 500px;
background-color: darkgray;
}
div#heading{
width: 100%;
height: 10%;
background-color: red;
}
div#content_menu{
width: 30%;
height: 80%;
background-color: yellow;
float: left;//加一个从左到右的排序方式
}
div#content_body{
width: 70%;
height: 80%;
background-color: blue;
float: left;//加一个从左到右的排序方式
}
div#footing{
width: 100%;
height: 10%;
background-color: green;
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>

运行效果：

第二种方式：通过table布局来实现：

<html>
<head lang="en">
<meta charset="UTF-8">
<title>table元素布局</title>
</head>
<!--marginwidth和marginheight去掉外层白色的边框-->
<body marginwidth="0px" marginheight="0px">
<!--给出一个table，设置宽高和背景颜色-->
<table width="100%" height="500px" style="background-color: darkgray">
<tr >
<!--colspan占用3列-->
<td colspan="3" width="100%" height="10%" style="background-color: red">这是头部</td>
</tr>
<tr >
<td width="30%" height="80%" style="background-color: yellow">
<ol start="10">
<li>IOS</li>
<li>Android</li>
<li>Html5</li>
</ol>
</td>
<td width="30%" height="80%" style="background-color: darkslategrey">中菜单</td>
<td width="40%" height="80%" style="background-color: blue">右菜单</td>
</tr>
<tr >
<td colspan=3" width="100%" height="10%" style="background-color: green">这是底部</td>
</tr>
</table>
</body>
</html>