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

最新推荐文章于 2021-11-26 13:06:23 发布

wenteryan

最新推荐文章于 2021-11-26 13:06:23 发布

阅读量4k

点赞数 1

分类专栏： HTML 文章标签： html5 标签

本文链接：https://blog.csdn.net/wenteryan/article/details/51173466

版权

前端同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 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 中有用的字符实体
注释：实体名称对大小写敏感！

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
“	引号	`"`	`"`
‘	撇号	`'`(IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	日圆	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

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

wenteryan

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
二，细说 HTML5 之 HTML5 基础讲解 2

这是一个HTML5系列，主要是零基础的宝宝们快速认识与学习HTML5.HTML5 样式、链接和表格1.HTML5 样式标签：标签描述 <style> 定义样式定义 <link> 定义资源引用 <div> 定义文档中的节或区域（块级） <span> 定义文档中的行内的小块或区域属性：属性描述 rel="stylesheet" 外部样式表
复制链接

扫一扫

专栏目录

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
“	引号	`"`	`"`
‘	撇号	`'`(IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	日圆	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
“	引号	`"`	`"`
‘	撇号	`'`(IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	日圆	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
“	引号	`"`	`"`
‘	撇号	`'`(IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	日圆	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`