码迷，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）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！