码迷,mamicode.com
首页 > Web开发 > 详细

二,细说 HTML5 之 HTML5 基础讲解 2

时间:2016-04-17 22:51:31      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:

这是一个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 中有用的字符实体
注释:实体名称对大小写敏感!

显示结果 描述 实体名称 实体编号
空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
引号 &quot; &#34;
撇号 &apos;(IE不支持) &#39;
&cent; &#162;
&pound; &#163;
日圆 &yen; &#165;
欧元 &euro; &#8364;
§ 小节 &sect; &#167;
? 版权 &copy; &#169;
? 注册商标 &reg; &#174;
? 商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

大家不用记这么多,不回的可以查阅! html 实体

二,细说 HTML5 之 HTML5 基础讲解 2

标签:

原文地址:http://blog.csdn.net/wenteryan/article/details/51173466

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!