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="p_w_picpath/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 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>
符号实体，显示：
、>、<、 、&、"、'、
，使用如下标识：
© < > & " ' ®字符实体表示时包括末尾的分号。
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:#b56663; */
/* 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;
}
转载于:https://blog.51cto.com/sunnybay/1374313
299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
