正文  软件开发 > html5 >

HTML 文件框架结构,

HTML 文件框架结构, 1.head 1.1.meta标签 <!-- 设定字符集、自动刷新、自动跳转、关键字 --> <meta charset="utf-8"> <meta http-e...

HTML 文件框架结构,

1.head


1.1.meta标签

<!-- 设定字符集、自动刷新、自动跳转、关键字 -->
<meta charset="utf-8">
<meta http-equiv="Content-Type" Content="text/html;charset=gb2312">
<meta http-equiv="Refresh" Content="5">
<meta http-equiv="Refresh" Content="5;Url=http://Server.com">
<meta name="keywords" Content="开发型运维,51cto,blog">

1.2.link标签

<link rel="shortcut icon" href="image/ico.jpg">

2.body


  背景图片设置

<body background="">

  设置背景色,文字颜色

    bgcolor:背景色

    text:非链接文字

    link:可链接文字

    alink:正被点击的可链接文字

    vlink:已经点过的可链接文字

<body bgcolor=# text=# link=# alink=# vlink=#>

  颜色值,采用十六进制表示,或者英文字母。设置时十六进制借助拾色器采集。

2.1.段落p

  <p>定义段落。段落前后带有空白行。

2.2.超链接a

  文字“链接”,目标地址为“URL”。基本语法:

<a href="URL">链接</a>

  有跳转,就有返回,返回首页:

<a href="/">返回首页</a>

  打开链接时,新建标签页:

<a href="http://sunnybay.blog.51cto.com/" target="_blank">我的博客</a>

  锚点,跳转到链接的某个位置。需要设定两个位置,起跳点、目标点:

2.2.1.id

<a href="URL#dist_name">链接1.1</a>
<div id="dist_name"></div>

2.2.2.name

<a href="introduction.html#what-is-mysql">1.3.1 What is MySQL?</a>
<h3 class="title"><a name="what-is-mysql"></a>1.3.1&nbsp;What is MySQL?</h3>

2.3.标尺线hr

  标尺,线默认标尺线占满一行

<hr>

  设置标尺线高度(默认两个像素高度)

<hr size=10>

  填充颜色

<hr color=red>

  设定长度

<hr width=77%>

  设定左右位置,默认居中

<hr width=77% align=left>

2.4.标题h

  标题文字,独占一行

<h1>title<h1>
<h3>title<h3>
<h5>title<h5>

2.5.font

  字体大小,使用size属性

<font size=5>今天天气真好!</font>

  字体颜色,使用十六进制,或者预定义色彩:Black、Olive、Teal、Red、Blue、Maroon、Navy、Gray、Lime、Fuchsia、White、Green、Purple、Silver、Yellow、Aqua。一个十六进制设置颜色的示例:

<font color=#ffffff>White</font>

  符号实体,显示wKiom1irnCiDmGlwAAACd7sXfUQ044.png>、<&"wKioL1irnDiSjGY5AAAC1EHM-JA774.png,使用如下标识:

&copy; &lt; &gt; &nbsp; &amp; &quot; &apos; &reg;

字符实体表示时包括末尾的分号。

2.6.label

  label只是一个内容标签,for属性与id关联时,可以定义焦点

<label for="username">用户名</label>
<input id="username" type="text" name="user" />

3.文字布局


3.1.空行

  一个“<p>”,表示一个空行。

吃了吗?<p>刚问个话

3.2.空行

  一个“<br>”,表示换行。

吃了吗?<br>回去就吃呀

3.3.文字对齐

  与标尺线的元素一样,使用“align”

<h3 align="center">Hello<h3>
<h3 align="right">Hello<h3>

3.4.列表

  无序列表,行首不显示序号

<ul>
<li>Today
<li>Tommorow
</ul>

  有序列表,行首显示行号

<ol>
<li>Today
<li>Tommorow
</ol>

  定义列表

<dl>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>

  定义列表的效果:

Today
  Today will be yesterday.
Tomorrow
  Tomorrow will be today.

4.图象


  更多关于图片,有另外一篇博文讲述。

4.1.基本用法

  指定位置、图像未载入时,显示文字“text”。

<img src="f.gif" alt="text">
<img src="f.gif" width="300px" alt="text" title="bat">

4.2.图像与文字对齐方式

<img src=URL align=top>西红柿炒蛋
<img src=URL align=middle>西红柿炒蛋
<img src=URL align=bottom>西红柿炒蛋

4.3.图像在页面中的对齐方式

<img src=URL align=left>

4.4.边框

  设置边框厚度使用属性“border”

<a href="URL"><img src=URL border=15></a>

5.表格table


  表格中每个方块,叫表元。

5.1.表格的基本语法

  tr:定义表行;th:定义表头;td:定义表格数据。例如

<!-- 这样的结构不好,这么写是为了减少行数 -->
<table border="1">
<thead>
<tr style="">
<th>表头1</th><th>表头2</th><th>表头3</th>
</tr>
</thead>
<tbody>
<tr><td>第1行1列</td><td>第1行2列</td><td>第1行3列</td></tr>
<tr><td>第2行1列</td><td>第2行2列</td><td>第2行3列</td></tr>
<tr><td>第3行1列</td><td>第3行2列</td><td>第3行3列</td></tr>
</tbody>
</table>

是个无框表格,设置border属性、或其值大于零时可以显示有框表格。

<table border>

  单元格合并:

<th colspan=3>
<th rowspan=3>

5.2.尺寸

  指定宽度

<table width=500px>

  设置表格尺寸

<table border width=170 height=100>

5.3.表格位置

  表格在页面中的位置,“align=center”……:

<table border="3" align="center">

  属性:cellspacing、cellpadding,分别表示单元格之间的厚度、单元格内边距。

<table  cellpadding=0 cellspacing=0>

  表元内文字对齐,“align=left、right、center”:

<td align=left>A</td>

  表元内文字纵向对齐,“top、middle、bottom”。

<td valign=top>A</td>
<td valign=middle>B</td>
<td valign=bottom>C</td>

  表格在页面中的对齐:

<table align="left" border>

5.4.表格的标题

<table border>
<caption align=center>Lunch</caption>

5.5.表元的背景色

<th bgcolor=Red>红色</th>
<th background="tomato.png">西红柿</th>

5.6.表元的边框颜色

<table cellspacing=5 border=5 bodercolor=#ff3a30>

6.会移动的文字


6.1.基本语法

  默认,向左移、循环移动。

<marquee>哈哈,我会动!</marquee>

6.2.移动方向

  默认是“behavior=scroll”。往哪移,“direction=left”:

<marquee direction=right>哈哈,我会往右动!</marquee>

6.3.移动到边上就停下了

  往哪移,“<marquee behavior=slide>”:

<marquee behavior=slide direction=right>哈哈,我要歇在右边!</marquee>

6.4.来回移

  “<marquee behavior=alternate>”:

<marquee behavior=alternate direction=right>哈哈,我就在你面前闪!</marquee>

6.5.循环次数

  循环次数到了,就消失了

<marquee loop=2>走两圈</marquee>

6.6.移动的速度、延时

  速度控制

<marquee scrollamount=50>这是个啥速度</marquee>
<marquee scrollamount=1>这是个啥速度</marquee>

  延时控制

<marquee scrollamount=50>这是个啥节奏</marquee>
<marquee scrolldelay=800 scrollamount=50>这是个啥节奏</marquee>

6.7.底色、面积

<marquee height=26 width=50% bgcolor=Yellow>哈哈,我会动!</marquee>

7.框架标记(多窗口分割)


7.1.纵向排列

  可以通过拖动分割线调整布局大小。

  <frameset cols=#>

<frameset cols=30%,30%,*>
<frame src="baidu.htm"/>
<frame src="sina.html"/>
<frame src="51cto.html"/>
<frameset>

7.2.横向排列

  <frameset rows=#>

<frameset rows=30%,30%,*>
<frame src="baidu.htm"/>
<frame src="sina.html"/>
<frame src="51cto.html"/>
<frameset>

实例(不能放在body中):

<!doctype html>
<html>
<head>
<meta charset=utf-8/>
<title>多窗口布局</title>
</head>

<frameset rows=30%,30%,*>
<frame src="recipes.html"/>
<frame src="egg.html"/>
<!-- <frame src="logo.bmp"> -->
</frameset>

  属性frameboder设定分割线宽度,为零时,不可以拖动其布局。同时,可以使用noresize进制调整大小。

<frameset rows=130px,* frameborder=1>
<frame src="toplist.html" noresize/>




  开始系统点学习编写网页代码。

egg.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>美食网 - 西红柿炒鸡蛋</title>
<link type="text/css" rel="stylesheet" href="layout.css">
</head>
<body>

<div class="header">
<div class="login-bar">

<a class="qq-login" href="#">QQ登陆</a>
<a class="weibo-login" href="#">微博登陆</a>
</div>
<!-- <h1>美食网</h1> -->
<div class="logo">
<img src="logo.gif" alt="美食网">
</div>

<ul class="nav">
<li><a href="home.html">主页</a></li>
<li><a href="recipes.html">美食</a></li>
<li><a href="suggest.html">建议</a></li>
</ul>
</div>


<div class="content">
<h2>西红柿炒鸡蛋</h2>
<p>这道菜,你是不知道,家家户户都爱吃,可是每个人都不会做。这可怎么办呢?今天呀,美食网就来帮助大家做这道菜。我们一起来完成吧!</p>
<p><a href="legal.html">免责声明</a></p>

<h3>材料</h3>
<ul>
<li>中型4个西红柿</li>
<li>土鸡蛋4个</li>
<li>盐5克</li>
<li>食用植物油少许</li>
<li>葱丝、<a target="_blank" href="http://item.jd.com/10343917576.html">白糖</a>、<a target="_blank" href="https://item.jd.com/964437.html">料酒</a></li>
<li><strong>炒鸡蛋千万不能放味精</strong></li>
</ul>

<h3>步骤</h3>
<ol>
<li>打好鸡蛋、切好西红柿、葱丝。</li>
<li>放油少许,把葱丝略炒。</li>
<li>先炒鸡蛋,记得放盐。</li>
<li>待鸡蛋稍硬,放入切好的西红柿。</li>
<li>炒到西红柿有点变形,放入白糖和料酒。</li>
<li>搅拌均匀后,准备出锅、加入葱丝,装盘。</li>
</ol>

<h3>美食图片展示</h3>
<ul class="photos">
<li><img src="eg/01.jpg" alt="展示01"></li>
<li><img src="eg/02.jpg" alt="展示02"></li>
<li><img src="eg/03.jpg" alt="展示03"></li>
<li><img src="eg/04.jpg" alt="展示04"></li>
<li><img src="eg/05.jpg" alt="展示05"></li>
<li><img src="eg/06.jpg" alt="展示06"></li>
</ul>
</div>

<div class="geli"></div>

<div class="copyright">
<div class="text-center height-big">
版权所有 招财网 西安招财投资服务有限公司 地址:西安市高新区锦业路东段32号锦业时代广场B1栋26层 电话:4000-94-4000
<br>陕ICP备14007227号
</div>
</div>

</body>
</html>

layout.css

 
/* 页面初始化 */
html, body, h1, h2, h3, p, ul, ol, li, a {
padding:0;
border:0;
margin:0;
}

/* 网页布局 */

.login-bar{
text-align:right;

}

.login-bar a{
color:yellow;
background:url(login.png) 0 0 no-repeat;
padding-left:32px;
height:32px;
display:inline-block;
line-height:32px;
}

.login-bar a.qq-login{
background-position:0 -32px;
}

.login-bar weibo-login{
background-position:0 0;
}

.nav{
padding-left:0;
text-align:center;
margin:30px;
}

.nav li{
display: inline;
}

.nav a{
color:#b56663;
text-decoration:none;
}

.header {
padding:20px;
/* */
/* background-color:#000000; */
background:#000000 url(header.jpg) top left repeat;

width:890px;
margin:0 auto;
}

.content {
padding:35px;
border:0px solid #dddddd;
margin:30px auto 5px auto;

width:880px;

background:#000000 url(body.jpg) top left repeat;
}

.geli{
background:#121212;
}

.copyright{
padding:35px;
border:0px solid #FFFFFF;
margin:5px auto 30px auto;

width:880px;

background:#FFFFFF url() top left repeat;
}

/* h3标题前留白 */
.content h3 {
margin: 30px 0 3px 0;
}

.logo {
text-align:center;

}

.logo img{
width: 255px;
height: 166px;
}

/* 美食图片展示 */
.photos {
margin: 0 0 30px 0;

}

.photos li {
display:inline;
}

.photos li img {
width:130px;
/* height:290px; */
}

body {
background:#FFFFFF url(main.jpg)top left repeat;
font: normal normal 16px/33px 微软雅黑, 黑体, Verdana, Arial, sans-serif;
}

h1 {
color:#ffffff;
text-align:center;
}


/* 通用样式 */
a {
text-decoration:none;
color:darkred;
}

a:hover {
text-decoration:underline;
color:darkred;
}

h2, h3 {
color:#79B1A3;
}

.rec li {
list-style-type:none;
}

.rec li {
border: 1px solid #b56663;
padding-left:50px;
margin: 15px 10px;
}

.rec li p{
padding-left:35px;
}

http://www.bkjia.com/HTML5/1234464.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1234464.htmlTechArticleHTML 文件框架结构, 1.head 1.1.meta标签 !-- 设定字符集、自动刷新、自动跳转、关键字 -- meta charset ="utf-8" meta http-equiv ="Content-Type" Content ="te...