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

这是一个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;  
< 小于号 &lt; <
> 大于号 &gt; >
& 和号 &amp; &
引号 &quot; "
撇号 &apos;(IE不支持) '
&cent; ¢
&pound; £
日圆 &yen; ¥
欧元 &euro;
§ 小节 &sect; §
? 版权 &copy; ©
? 注册商标 &reg; ®
? 商标 &trade;
× 乘号 &times; ×
÷ 除号 &divide; ÷

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

时间: 2024-10-05 00:00:41

二,细说 HTML5 之 HTML5 基础讲解 2的相关文章

一,细说 HTML5 之 HTML5 基础讲解

这是一个HTML5系列,主要是零基础的宝宝们快速认识与学习HTML5. 了解 HTML 1.什么是 HTML HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (markup language) 注:标记语言是一套标记标签 (markup tag),HTML 使用标记标签来描述网页 2. HTML版本 版本 年份 HTML 1991 HTML + 1993 HTML 2.0

蓝鸥零基础学习HTML5—html+css基础

蓝鸥零基础学习HTML5-html+css基础 一.课程目标 1.了解前端开发职位:2.掌握常用标签以及语义及用法:3.掌握常用css的特性,掌握基础布局技巧:4.掌握整站规划概念. 二.适用人群 零基础积极学习html5者 三.课程简介 本课程主要讲解了 html+css的基础知识,包括html模板.标签.css基础样式.布局.表格表单.整站等等,是进行前端开发的基础.Html+css是前端开发的基础,大部分前端开发工程都需要从html+css布局开始,html+css的基础非常重要,是前端开

《HTML5和CSS3基础教程》-笔记1

笔记(第一.二章整合) 1,HTML思想: 编写HTML是为网页内容打上能够描述它们的标签.并且,HTML元素描述的是:内容是什么,而非看起来是什么样. 即: a,HTML:用标签去说明网页内容的含义. b,语义化HTML:用最恰当的HTML元素去说明网页内容的含义. c,结构和表现完全分离.网页内容是什么,由HTML说明.网页内容什么样,由CSS说明. 另:为什么语义化很重要? 无障碍访问:搜索引擎优化(网页在搜索引擎的排名会靠前):更容易维护代码和添加样式. 2,网页构造块: 网页可保存为纯

htML+CSS3-》第3阶段:HTML5之CSS3基础与加强 中

HTML+CSS3->第3阶段:HTML5之CSS3基础与加强中 60前端开发基础视频-复合选择器之子元素选择器 子元素选择器,是让css选择器智能选择子辈的元素. 例如:h1>strong{color:red;} 解读为:选择器h1>strong可以解释为"选择作为h1元素子元素的所有strong元素". 61前端开发基础视频-属性选择器 属性选择器 <!DOCTYPE html> <html lang="zh"> <

电子书 html5与css3基础教程第8版.pdf

内容简介 <HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分析了网页制作的方方面面.全新第8版不仅介绍了文本.图像.链接.列表.表格.表单等网页元素,还介绍了如何为网页设计布局.添加动态效果等,另外还涉及调试和发布. <HTML5与CSS3基础教程(第8版)>提供了一个强大的配套网站,上面列出了书中的完整代码示例以及更多优秀实例及进阶参考资料,以

《html5与css3基础教程》(第8版)个人笔记

<html5与css3基础教程(第8版)个人笔记 四至六章 small 行内 短语版权符号:&copy 可任意嵌套,html和html5表示含义不一样 strong 重要 em 强调 html5中 b i figure:图figcaption可以用来添加署名? blockquote中的cite:提供引述文本的位置 很多开发人员避免使用q,而是手动添加引号或字符实体datetime可以用于在web应用之间同步日期和时间 YYYY-M-DDThh:mm:ss或hh:mm.sssUTC全球标准时间

二十八个 HTML5 特性与技巧

1. New Doctype  你还在使用令人讨厌的难记的XHTML文档类型声明吗?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>如果还在用,为什么呢?如同Douglas Quaid所说,转到新的HTML5这种文档类型吧,它会使你看起来更年轻.实际上,你当真知道XHTML的文档类型声明

JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承

说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象JS基础讲解,工厂模式.构造函数模式.原型模式.混合模式.动态原型模式>,接下来讲一般通过那些方法完成JavaScript的继承. 原型链 JavaScript中实现继承最简单的方式就是使用原型链,将子类型的原型指向父类型的实例即可,即“子类型.prototype = new 父类型();”,实现方法如下

【html5】html5离线存储

html5本地存储之离线存储 1.为什么使用离线存储 ①最新的主流的浏览器中都已添加了对HTML5的offline storage功能的支持,HTML5离线存储功能非常强大, 它的作用是:在用户没有与因特网连接时,照样可以访问站点或应用,在用户与因特网连接时,自动更新缓存数据,是我们的网站的适应性和应用型更强 2.准备工作 1.服务器配置 1.需要在 apache配置文件加:① AddType text/cache-manifest .manifest 2.创建缓存清单文件xxx.manifes

HTML5——对HTML5的认识

首先非常感谢李刚老师出的这本书<HTML5/CSS3/JavaScript讲义>,今天读了第一章节的内容,趁热打铁,总结一下. HTML5的时代已经到来,它对所有的前端开发人员来说是一种福音.HTML5致力于解决跨浏览器问题,可以部分取代JavaScript,HTML5致力于把浏览器变成一个前端执行程序环境,而不是简单地视图工具. 第一部分,了解HTML和XHTML HTML--Hyper Text Markup Language(超文本标记语言),它的发展史比较复杂,从1991年年底推出HT