网页布局
html
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
有开始和结束组成 <html> <!-- 内容 --> </html> <html/> 可以有属性,使用单引号或双引号包裹 <html attr1="value1" attr2="value2"> <html attr1='value1' attr2='value2'> <!-- 内容 --> <!-- 内容 --> </html> </html> <html attr1="value1" attr2="value2"/> <html attr1='value1' attr2='value2'/> html,css不区分大小写
第一网页
-
新建文本文档（新建文本文档.txt）
看不见.txt后缀，点击查看勾选文件扩展名:
-
文件改名：001.html
-
使用记事本编辑如下内容：
<html> <head> <!-- 头部部分 ：当前文档的描述信息 --> <title>我的网页</titla> </head> <body> <!-- 主体部分 : 真正的内容 --> first </body> </html>
-
使用浏览器运行
段落标签
| 标签 | 说明 | 描述 |
|---|---|---|
| span | 块 | 最普通的区域 |
| div | 层 | 默认一行区域 |
| p | 段 | 默认一行区域，前后各有一个空行 |
| pre | 格式 | 原样输出 |
表格标签
| 标签 | 说明 | 描述 |
|---|---|---|
| table | 表格 | 表格开始和结束标签 |
| tr | 行 | 表格中的行 |
| td | 列格 | 表格中的单元格 |
| th | 表头 | 表格中的行，此行文字默认加粗显示 |
| thead | 表格首行 | 包含th或tr，一般包含th，不编写时有的浏览会默认添加 |
| tbody | 表格主体 | 一般包含tr，不编写时有的浏览会默认添加 |
| tfoot | 表格末行 | 一般包含tr，不编写时有的浏览会默认添加 |
表格属性
可用于标签 table 的属性：
| 标签 | 说明 | 描述 |
|---|---|---|
| border | 边框 | |
| width | 宽度 | |
| height | 高度 | |
| cellspacing | 单元格间距 | |
| cellpadding | 内容间距 | |
| align | 对齐 | 左中右分别：left,center,right |
| bgcolor | 背景色 | 颜色名称 blue ,十六进制颜色值 #00FF00 |
| rowspan | 行合并 | 合并的数量包括本行，删除被合并的行 |
| colspan | 列合并 | 合并的数量包括本列，删除被合并的列 |
实现商品展示部分：
-
先准备3行5列表格
<table border="1" align="center" cellpadding="0" cellspacing="0" width="1200px" > <tr height="60px"> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr height="150px"> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> <tr height="150px"> <td>u</td> <td>v</td> <td>w</td> <td>x</td> <td>z</td> </tr> </table> -
合并第一行4,5 和第一列的a,u
<table border="1" align="center" cellpadding="0" cellspacing="0" width="1200px" > <tr height="60px"> <td>1</td> <td>2</td> <td>3</td> <td colspan="2">4</td> </tr> <tr height="150px"> <td rowspan="2">a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> <tr height="150px"> <td>u</td> <td>v</td> <td>w</td> <td>x</td> <td>z</td> </tr> </table> -
设置第一行所有列的宽度
<tr height="60px"> <td width="240">1</td> <td width="240">2</td> <td width="240">3</td> <td width="240" colspan="2">4</td> </tr>
-
填写各个单元格的内容
表格可以嵌套
每个 td 中都可以嵌套新的 table：
<td> <table border="1"> <tr> <td>a</td> <td>a</td> <td>b</td> <td>b</td> </tr> <tr> <td>c</td> <td>c</td> <td>d</td> <td>d</td> </tr> </table> </td>
网页第一部分布局：
-
准备4行3列表格
<!-- 4行3列 --> <table border="1" width="1200"> <tr height="30"> <td width="220">1</td> <td >2</td> <td width="220">3</td> </tr> <tr height="130"> <td >a</td> <td >b</td> <td >c</td> </tr> <tr height="40"> <td >5</td> <td >6</td> <td >7</td> </tr> <tr height="410"> <td >e</td> <td >f</td> <td >g</td> </tr> </table>
-
将第一行2和3合并，3要删除，将宽度写在第二行c列
<tr height="30"> <td width="220">1</td> <td colsapn="2">2</td> </tr> <tr height="130"> <td >a</td> <td >b</td> <td width="220">c</td> </tr>
-
在第二行 b 列 加入嵌套的表格
<tr height="130"> <td>a</td> <td> <table bgcolor="orange" width="520" align="center"> <tr> <td>x</td> </tr> <tr> <td>y</td> </tr> <tr> <td>z</td> </tr> </table> </td> <td width="220">c</td> </tr>
文本标签
| 标签 | 说明 | 描述 |
|---|---|---|
| font | 文本 | 属性color,size,face分别代表颜色,大小,字体 |
| b | 加粗 | |
| u | 下划线 | |
| i | 斜体 | |
| sup | 上标 | 平方，立方 |
| sub | 下标 | 分子式 |
| H1~6 | 标题1~6 | 模仿word文档中的标题 |
列表标签
ol 有序列表 属性 type (a,A,1,i,I)
ul 无序列表 属性 type (disc,circle,square)
li 列表项 ，li里面可以继续嵌套 ol 或 ul
特殊符号
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |||
| < | 小于号 | < | < |
| > | 大于号 | > ; | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| ￡ | 镑 | £ | £ |
| ￥ | 日元 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
表单元素
文本框 input type="text"（默认可以不用编写）
密码框 input type="passwd"
隐藏框 input type=“hidden”
-
默认值 value
-
提示信息 placeholder
单选框 input type="radio"
-
绑定分组 name
-
辅组选择 <label/>
-
默认选择 checked
-
表单提交数据 value
复选框 input type="checkbox"
-
辅组选择 <label/>
-
默认选择 checked
-
表单提交数据 value
下拉选择框 select 和 option
-
默认选择 selected
-
表单提交数据 value
多行文本框(文本域) textarea
-
行 rows
-
列 cols
-
默认值 直接填写
-
表单提交数据 填写的内容
普通按钮 input type="button"
提交按钮 input type="submit"
重置按钮 input type="reset"
图片按钮 input type="image" src="图片路径"
标签 button type="同input的4种type"
图片超链接
图片 img
-
路径 src
相对路径：以当前文档为参考的路径 ( ./或不写 代表当前目录 /代表下一级 ../代表上一级 )
a.jpg 同级目录下的图片
xyz/a.jpg 下级目录xyz中的图片
../xyz/a.jpg 上级目录xyz中的图片
绝对路径：http 开头网络资源路径
-
宽度 width
-
高度 height
-
帮助 alt 或者 title
-
对齐 align (图文混合排列)
超链接 a
-
路径 href 可以跳转到路径也可以跳转到锚点
如: <a href="百度一下，你就知道">去跳转</a>
如: <a href="#abc">去锚点</a>
-
打开位置 target
如：target = "_blank" 在新页面打开链接
-
锚点 name 如 <a name="abc" />
DIV+CSS布局
CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
选择器/样式表
-
id选择器/样式表
定义 ：#abc{ ... } 使用 ： <div id="abc">...</div>
-
类选择器/样式表
定义：.abc{ ... } 使用： <div class="abc">...</div>
-
标签选择器/样式表
定义：abc{ ... } 使用： <abc>...</abc>
DIV+CSS
主要在 div 标签中使用样式，将样式表和代码分离。使用漂浮属性 float 构建网页结构。
<html>
<head>
<!-- 样式表定义区域 -->
<style>
</style>
</head>
<body>
<!-- 代码区域 -->
<div>
<div></div>
<div></div>
</div>
</body>
</html>
<html>
<head>
<title> div+css </title>
<style type="text/css">
/* 宽度 高度 背景色 */
.top { width:1000px; height:50px; background:orange}
.middle { width:1000px; height:300px; background:pink}
.foot { width:1000px; height:50px; background:skyblue}
</style>
</head>
<body>
<div class="top"></div>
<div class="middle"></div>
<div class="foot"></div>
</body>
</html>
今天的样式：
/* 布局 */ float:left; /* 在一行从左到右排列，排不下换行 */ /* 字体 */ font-size:12px; /*字体大小*/ font-fimaly:"微软雅黑"; /*字体大小*/ font-weight:bold; /*加粗*/ text-decoration:none; /*去掉下划线*/ text-align:left; /*对齐*/ color:white; /*字体颜色*/ line-height:45px; /*行高*/ /* 边框，背景 */ width:1000px; /* 宽 */ height:200px; /* 高 */ background:#f6f6f6; /* 背景色 */ border: 1px solid red; /* 边框宽 线条 颜色 */ /* 间距 */ margin:10px; /* 外间距10px */ margin:5px 10px 15px 20px; /* 上5 右10 下15 左20像素 */ margin-top:10px; /* 外间距上10 */ padding:10px; /* 内间距10px */ padding:5px 10px 15px 20px; /* 上5 右10 下15 左20像素 */ padding-top:10px; /* 内间距上10*/
扫一扫
8915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
