前端学习笔记——HTML5
一、HTML标签及其属性
1.常用标签
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<p>段落</p>
<a href=“www.baidu.com”>超链接</a>
<img src=""> ：单标签，不需要</img>作为结束
<br /> ：占位符，一个空行
2.常用标签属性
<h1 align="" />对齐方式
<body bgcolor="" />背景颜色（background设置背景图片）
<a target="" />链接打开位置
3.通用属性
class：元素类名
id：元素唯一ID
style：元素样式
title：元素额外信息
4.格式化标签：不同显示效果
<b>、<big>、<em>、<i>、<small>、<strong>、<sub>、<sup>、<ins>、<del>
二、HTML5样式、链接和表格
1.样式
1.1 相关标签及属性
（1）标签
<style>：样式定义
<link>：资源引用
（2）属性
rel(外部样式表)、type(引入文档类型)、margin-left(边距)
1.2 样式表插入方法
（1）外部样式表
rel：引入外部元素 type：指定文档格式 href：指明文档地址
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
（2）内部样式表
style：指定文档格式，标签内部对属性进行指定
<style type=“text/css”>
body {background-color:red}
p{margin-left:20px}
</style>
（3）内联样式表
直接在标签内部改变属性
<p style=""color:red>
代码示例：
<!--mystyle.css内容
h1{color: yellowgreen;}
-->
<!--head中插入CSS代码
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style type="text/css">
p{color:cornflowerblue;}
</style>
-->
<h1>外部样式表</h1>
<p>内部样式表</p>
<a href="www.baidu.com" style="color: indianred">内联样式表</a>
效果图
2.HTML链接
2.1 链接数据：文本链接、图片链接
2.2 属性
href：指向另一个文档的链接
name：创建文档内的链接
2.3 img标签的属性
src(图片地址)、alt(替换文本)、width(宽)、height(高)
代码示例：
<a name="here">here</a> <br/> <!--无数个<br/>使得两行见距离超过一个页面--> <a href="here">跳转到here</a> <!--起到了回到顶部的效果-->
3.HTML表格
3.1 相关标签
<table>、<caption>、<th>、<tr>、<td>、<thead>、<tbody>、<tfoot>、<col>
代码示例：
<table border="1"> <!--设置边框--> <caption>表格</caption> <!--caption定义表格名称--> <!--表头行--> <tr> <!--tr定义表格的行--> <th>单元</th> <!--th定义表格的表头--> <th>单元</th> <th>单元</th> </tr> <!--单元格行--> <tr> <td>单元格1</td> <!--td定义表格的单元--> <td>单元格2</td> <td>单元格3</td> </tr> <tr> <!--表格内标签（定义单元格内列表）--> <td> <ul> <!--ul定义一个列表--> <li>列表元素1</li> <li>列表元素2</li> <li>列表元素3</li> </ul> </td> <td>单元格5</td> <td>单元格6</td> </tr> </table> <br/> <p>单元格边距</p> <!--设置单元格的间距（单元格内容与边框的距离）--> <table border="1" cellpadding="10"> <tr> <td>单元1</td> <td>单元2</td> </tr> <tr> <td>单元3</td> <td>单元4</td> </tr> </table> <br/> <p>设置单元格间距</p> <!--设置单元格的间距（单元格之间的距离）--> <table border="1" cellspacing="10"> <tr> <td>单元1</td> <td>单元2</td> </tr> <tr> <td>单元3</td> <td>单元4</td> </tr> </table>
效果图
三、HTML5列表、块和布局
1.列表
1.1相关标签
<ol>(有序列表)、<ul>(无序列表)、<li>(列表项)、<dl>(列表)、<dt>(列表项)、<dd>(描述)
1.2常用列表
（1）有序列表：<ul><li>
属性（可更改列表项前图标）：disc、circle、squear
（2）无序列表：<ol><li>
属性：（更改序号样式：）A、a、I、i
（更改起始序号值：）start
(3)嵌套列表：<ul><ol><li>
(4)自定义列表：<dl><dt><dd>
代码示例：
<!--嵌套列表、有无序列表及其属性--> <ul> <li type="cirle">动物</li> <ol type="I"> <li>猫</li> <li>狗</li> </ol> <li type="square">国家</li> <ol start="5"> <li>中国</li> <li>英国</li> <li>美国</li> </ol> </ul> <!--自定义列表--> <dl> <dt>Helloworld</dt> <dd>每一门新的语言都会打印一个Helloworld</dd> <dt>Helloworld</dt> <dd>每一门新的语言都会打印一个Helloworld</dd> <dt>Helloworld</dt> <dd>每一门新的语言都会打印一个Helloworld</dd> </dl>
效果图
2.块
2.1HTML块元素
（1）块元素在显示时，通常会以新行开始
如：<h1><p><ul>
（2）块元素举例：<div>元素
<div>元素是组合HTML元素的容器，通常与CSS样式结合使用
2.2HTML内联元素
（1）内联元素通常不会以新行开始
如：<b><a><img>
（2）内联元素举例：<span>元素
<span>元素可作为文本的容器，同样与CSS结合使用
<div>与<span>的区别即<span>仅作为文本的容器
代码示例：
<!--head中设置的CSS
<style type="text/css">
span{color:indianred;}
div a{color:cornflowerblue;}
</style>
-->
<h1>h1标签</h1>
<b>加重标签</b>
<div>
<p>div中的p标签（无样式）</p>
<a>div中的超链接标签（CSS设置了样式）</a>
</div>
<div>
<p><span>span</span>测试效果</p>
</div>
效果图
3.布局
常用两种布局：使用<div>元素布局、使用<table>
（1）div布局`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div布局</title>
<style type="text/css">
body{
margin: 0px; <!--消除背景与边缘间的间隙-->
}
#container{ <!--为指定的id元素创建style-->
width: 100%;
height: 700px;
background-color: aliceblue;
}
#head{
width: 100%;
height: 90px;
background-color: cornflowerblue;
}
#content_menu{
width: 30%;
height: 80%;
background-color: indianred;
float: left;
<!--添加浮动方式，使content_menu和content_body可以水平排列-->
}
#content_body{
width: 70%;
height: 80%;
background-color: antiquewhite;
float: left;
}
#foot{
width: 100%;
height: 10%;
background-color: cadetblue;
clear: both;
<!--清除浮动方式-->
}
</style>
</head>
<body>
<div id="container">
<div id="head">头部</div>
<div id="content_menu">内容菜单</div>
<div id="content_body">内容主体</div>
<div id="foot">底部</div>
</div>
</body>
</html>
效果图
（2）table布局
<form> 姓名：<input type="text"><br/> <!--文本输入--> 密码：<input type="password"><br/> <!--密码输入--> 复选框：<br/> A<input type="checkbox">B<input type="checkbox">C<input type="checkbox"> <br/> 单选框：<br/> a<input type="radio" name="choose">b<input type="radio" name="choose"> <!—相同name下的元素进行单选--> <br/> 下拉框：<br/> <select> <option>1</option> <option>2</option> <option>3</option> </select> <br/> <input type="button" value="按钮"> <input type="submit" value="提交"> </form> <textarea cols="30" rows="30">这是一个文本域</textarea>
效果图
四、HTML5框架、背景和实体
1.框架
（1）框架标签（frame）
框架对于页面设计有着很大的作用
（2）常用标签
noresize：固定框架大小
cols：列
rows：行
（3）内联框架（iframe）
代码示例：（结合<a>标签的target属性进行演示）
a.主页代码
<!--去掉了body标签--> <iframe src="frame-c.html" frameborder="0" width="800px" height="800px"></iframe>
b.FrameA代码
<body bgcolor="#6495ed"> FrameA<br/> <a href="http://www.baidu.com" target="_self">click here</a> <!--target的值指定在什么位置打开新窗口 _self：在当前页面打开，例中即在FrameA中 _blank：创建一个新的页面 _top：在嵌套的最外层创建，例中即在最外层页面中 _parent：在上一层创建，例中即FrameB中 --> </body>
c.FrameB代码
<body bgcolor="#ff1493"> FrameB <br/> <iframe src="fram-a.html" frameborder="0" width="400px" height="400px"></iframe> </body>
d.FrameC代码
<body bgcolor="#d2691e"> FrameC <br/> <iframe src="frame-b.html" frameborder="0" width="600px" height="600px"></iframe> </body>
效果图
2.背景
（1）常用标签属性
Background：指定背景图片
Bgcolor：指定背景颜色
3.实体
（1）HTML中预留字符串必须被替换成字符实体，即关键字无法在页面中直接显示，相当于转义字符
例如：显示<需使用<
显示>需使用&rt
- Web前端学习笔记(2)-html5新增的结构元素
- Web前端学习笔记(3)-html5新增表单元素
- 前端开发学习笔记二--HTML5
- Web前端学习笔记(1)-Html5与Html4的区别
- 【web前端】HTML5抽奖转盘demo学习笔记
- web前端分享HTML5中的nav标签学习笔记
- 从零开始玩转HTML5前端 学习笔记3
- 从零开始玩转HTML5前端 学习笔记2
- 前端学习笔记——XHTML及HTML5新变化
- j2ee学习笔记之前端（js、jQuery、html、html5、webService、ajax、css）—— 一直会补充
- HTML5（李炎恢）学习笔记三 ------------- HTML5元素（上）
- DayDayUP之HTML5学习笔记 三 article、hgroup、figure、figcaption、dialog标签简单应用
- 重学前端学习笔记（八）--JavaScript中的原型和类
- HTML5 Canvas（学习笔记一）
- HTML5学习笔记 —— JavaScript基础知识
- 关于前端的photoshop初探的学习笔记
- 前端学习笔记（四）——浮动
- web前端学习笔记1
- Web前端学习笔记（二）——CSS中的选择符
- 前端学习笔记--JavaScript--DOM事件探秘