这是一个HTML5系列,主要是零基础的宝宝们快速认识与学习HTML5.
HTML5 样式、链接和表格
1.HTML5 样式
标签 | 描述 |
---|---|
<style> |
定义样式定义 |
<link> |
定义资源引用 |
<div> |
定义文档中的节或区域(块级) |
<span> |
定义文档中的行内的小块或区域 |
属性:
属性 | 描述 |
---|---|
rel="stylesheet" |
外部样式表 |
type="text/css" |
引入文档的类型 |
margin |
边距 |
三种样式表插入方法
1.外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2.内部样式表
<head>
<style type="text/css">
body {
background-color: red
}
p {
margin-left: 20px
}
</style>
</head>
3.内联样式
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
2.HTML5 链接
链接数据:文本数据、图片数据
属性:
href 属性:指向另一个文档的链接
name 属性:创建文档内的属性,也就是规定锚(anchor)的名称。
img 标签属性
alt:替换文本属性
width:宽
height:高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<a href="http://blog.csdn.net/wenteryan">wenteryan的博客</a>
<a href="http://blog.csdn.net/wenteryan"><img src="2.jpg" width="70px"></a>
</body>
</html>
2.HTML5 表格
表格由 <table>
标签来定义。每个表格均有若干行(由 <tr>
标签定义),每行被分割为若干单元格(由 <td>
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格标签
表格 | 描述 |
---|---|
<table> |
定义表格 |
<caption> |
定义表格标题 |
<th> |
定义表格的表头 |
<tr> |
定义表格的行 |
<td> " |
定义表格单元 |
<thead> |
定义表格的页眉 |
<tbody> |
定义表格的主体 |
<tfoot> |
定义表格的页脚 |
<col> |
定义用于表格列的属性 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<table border="1">
<caption>重要表格</caption>
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>
HTML5 列表、块和布局
1.HTML5 列表
HTML 支持有序、无序和定义列表
无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表始于 <ul>
标签。每个列表项始于 <li>
。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表
同样,有序列表也是一列项目,列表项目使用数字进行标记。
有序列表始于 <ol>
标签。每个列表项始于 <li>
标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
列表标签
标签 | 描述 |
---|---|
<ol> |
定义有序列表 |
<ul> |
定义无序列表 |
<li> |
定义列表项 |
<dl> |
定义定义列表 |
<dt> |
定义定义项目 |
<dd> |
定义定义的描述 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<ul type="square">
<li>Java</li>
<li>C++</li>
<li>C#</li>
</ul>
<ol>
<li>Java</li>
<li>C++</li>
<li>C#</li>
</ol>
<ul>
<li>Java</li>
<ul>
<li>JavaSE</li>
<li>JavaME</li>
<li>JavaEE</li>
</ul>
<li>C++</li>
<li>C#</li>
</ul>
</body>
</html>
2.HTML5 块
大多数 HTML 元素被定义为块级元素或内联元素。
HTML 块元素
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
如:<h1>
, <p>
, <ul>
, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
如:<b>
, <td>
, <a>
, <img>
HTML <div>
元素
HTML <div>
元素是块级元素,它是可用于组合其他 HTML 元素的容器。
<div>
元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div>
元素可用于对大的内容块设置样式属性。
<div>
元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table>
元素进行文档布局不是表格的正确用法。<table>
元素的作用是显示表格化的数据。
HTML <span>
元素
HTML <span>
元素是内联元素,可用作文本的容器。
<span>
元素也没有特定的含义。
当与 CSS 一同使用时,<span>
元素可用于为部分文本设置样式属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<h1>块元素:h1</h1>
<p>块元素:p</p>
<ul><li>块元素:ul</li></ul>
<hr>
<b>内联元素:b</b>
<a href="#">内联元素:a</a>
<img src="2.jpg"/>
<hr>
<div>
我是一个块元素: div
</div>
<hr>
<span>内联元素1:span</span><span>内联元素2:span</span><span>内联元素3:span</span>
</body>
</html>
3.HTML5 布局
网站布局
大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。
可以使用
或者 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。
HTML 布局 - 使用
元素
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body,h1{
margin:0px ;
padding: 0px ;
}
div#container{
width:100% ;
height: 650px ;
background-color: darkgray ;
}
div#header {
width: 100% ;
height: 10% ;
background-color: #99bbbb ;
}
div#menu {
background-color:#ffff99;
width: 20% ;
height: 80% ;
float:left;
}
div#content {
background-color:#EEEEEE;
width: 80% ;
height: 80% ;
float:left;
}
div#footer {
background-color:#99bbbb;
clear:both;
height:10%;
text-align:center;
}
h1 {margin-bottom:0;}
h2 {margin-bottom:0; font-size:14px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">Content goes here</div>
<div id="footer">Copyright http://blog.csdn.net/wenteryan</div>
</div>
</body>
</html>
HTML5表单
表单用于搜集不同类型的用户输入。
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。
表单使用表单标签(<form>
)定义。
<form>
...
input 元素
...
表单标签
标签 | 描述 |
---|---|
<form> |
定义供用户输入的表单 |
<input> |
定义输入域 |
<textarea> |
定义文本域 (一个多行的输入控件) |
<fieldset> |
定义一个控制的标签 |
<legend> |
定义域的标题 |
<select> |
定义一个选择列表 |
<optgroup> |
定义选项组 |
<option> |
定义下拉列表中的选项 |
<button> |
定义一个按钮 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<div id="container">
<form>
<label>用户名:</label><br>
<input type="text"><br><br>
<label>密码:</label><br>
<input type="password"><br><br>
<label>性别:</label><br>
男:<input type="radio" name="sex"> 女:<input type="radio" name="sex"><br>
</input><br><br>
<label>你经常喜爱的水果:</label><br>
苹果:<input type="checkbox"/>
香蕉:<input type="checkbox"/>
橘子:<input type="checkbox"/>
西瓜:<input type="checkbox"/><br><br>
<label>你经常使用的网站:</label><br>
<select>
<option>http://blog.csdn.net/wenteryan</option>
<option>WWW.baidu.com</option>
<option>http://blog.csdn.net/wenteryan</option>
<option>WWW.baidu.com</option>
</select><br><br>
<label>备注:</label><br>
<textarea cols="50" rows="10"></textarea><br><br>
<input type="button" value="提交"></input>
<button type="reset">重置</button>
</form>
</div>
</body>
</html>
HTML5框架、背景和实体
1.HTML5框架
框架
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。
使用框架的坏处:
- 开发人员必须同时跟踪更多的HTML文档
- 很难打印整张页面
a.框架标签(Frame
)
Frame 标签定义了放置在每个框架中的 HTML 文档。
b.框架结构标签(<frameset>
)
框架结构标签(<frameset>
)定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
c.常用标签
noresize:固定框架大小
cols:列
rows:行
d.内联框架
iframe
添加 iframe
<iframe src="URL"></iframe>
指向隔离页面的位置。
Iframe - 设置高度和宽度
height 和 width 属性用于规定 iframe 的高度和宽度。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
简单的例子演示
Noname13.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<iframe src="Noname13c.html" frameborder="0" width="1300px" height="700px"></iframe>
</body>
</html>
Noname13a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body bgcolor="#dddfcc">
Framea<br>
<a href="http://blog.csdn.net/wenteryan" target="_parent">wenteryan的博客</a>
</body>
</html>
Noname13b.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body bgcolor="#dc123c">
Frameb
<br>
<iframe src="Noname13a.html" frameborder="0" width="1100px" height="400px"></iframe>
</body>
Noname13c.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body bgcolor="#dddfcc">
Framec
<br>
<iframe src="Noname13b.html" frameborder="0" width="1200px" height="600px"></iframe>
</body>
</html>
看效果:
打开链接后:
2.HTML5 背景
背景颜色(Bgcolor)
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
背景(Background)
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。
<body background="clouds.gif">
<body background="http://www.baidu.com/clouds.gif">
注:如果你打算使用背景图片,你需要紧记一下几点:
背景图像是否增加了页面的加载时间。小贴士:图像文件不应超过 10k。
背景图像是否与页面中的其他图象搭配良好。
背景图像是否与页面中的文字颜色搭配良好。
图像在页面中平铺后,看上去还可以吗?
对文字的注意力被背景图像喧宾夺主了吗?
颜色由红色、绿色、蓝色混合而成。
颜色值
颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。
每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。
这个表格给出了由三种颜色混合而成的具体效果:
颜色名
大多数的浏览器都支持颜色名集合。
提示:仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
如果需要使用其它的颜色,需要使用十六进制的颜色值。
颜色名列表
单击一个颜色名或者 16 进制值,就可以查看与不同文字颜色搭配的背景颜色。
大家可以去百度或google ,都能找到一些好的颜色。。。。配色表
2.HTML5 实体
在 HTML 中,某些字符是预留的。在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。HTML 中有用的字符实体
注释:实体名称对大小写敏感!
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 | |
|
|
< | 小于号 | < |
< |
> | 大于号 | > |
> |
& | 和号 | & |
& |
“ | 引号 | " |
" |
‘ | 撇号 | ' (IE不支持) |
' |
¢ | 分 | ¢ |
¢ |
£ | 镑 | £ |
£ |
¥ | 日圆 | ¥ |
¥ |
€ | 欧元 | € |
€ |
§ | 小节 | § |
§ |
? | 版权 | © |
© |
? | 注册商标 | ® |
® |
? | 商标 | ™ |
™ |
× | 乘号 | × |
× |
÷ | 除号 | ÷ |
÷ |
大家不用记这么多,不回的可以查阅! html 实体