网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。
html(Hypertext Markup Language)—— 结构
超文本标记语言
css(Cascading Style Sheets)—— 样式
层叠样式表
js(javascript)—— 行为
HTML主要结构
<!doctype html> 声明文档类型
<html> 根文件,表示要写的东西是html
<head> 头部信息
<meta charset=“utf-8” />编码格式
<title></title> 提示信息(显示在标题栏)
</head>
<body> 页面主体
</body>
</html>
文本标签
1、标题
<h1>一级标题</h1> 字号最大
<h2>二级标题</h2>
……
<h6>六级标题</h6> 字号最小
2、段落(paragraph)
<p>段落文本内容</p>
3、空格
(所占位置没有一个确定的值,与当前字体字号都有关系。)
4、 换行(break)与水平线(horizontal)
<br />强制换行
<hr />水平线
5、加粗
<b>加粗内容</b>
<strong>加粗内容</strong>
6、倾斜
<em>倾斜内容</em>
<i>倾斜内容</i>
7、删除线
<del>加删除线内容</del>
8、上标/下标
<sup>上标</sup>
<sub>下标</sub>
列表标签
HTML中有三种列表,分别是:
1、无序列表:
<ul>
<li>列表项1</li>
<li>列表项2</li>
......
</ul>
2、有序列表(ordered list),各个表项按照一定的顺序排列定义
<ol>
<li></li>
<li></li>
......
</ol>
3、自定义列表,常用于对术语或者名称进行解释和描述。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd> (定义描述)
<dd>名词1解释2</dd>
......
</dl>
图像标签img
<img src="URL图像地址" alt="路径出错时显示信息" title="提示信息,鼠标悬停时显示" />
相对路径
1、位于同一文件夹,如
<img src="logo.jpg"/>
2、位于HTML文件的下一级,路径名为文件夹名和文件名,进入一个文件夹,写上文件夹的名字,之间用"/"隔开。
<img src="img/logo.jpg"/>
3、位于HTML文件的上一级,使用…/可以返回上一级
<img src="../logo.jpg" />
a标签:超链接/下载/锚点
语法:
<a href="链接地址" target="_blank">链接文本/图片</a>
属性:target链接打开方式
_blank 新窗口
_self 当前窗口
数据表格
作用:显示数据
<table> 表格标签
<tr> 行标签
<td>一行一列</td> 单元格标签
<td>一行二列</td>
</tr>
</table>
表格属性
width=“表格的宽度”
height=“表格的高度”
border=“表格的边框”
bgcolor=“表格的背景色”
cellspacing=“单元格与单元格之间的间距”
cellpadding=“单元格与内容之间的空隙”
水平对齐方式:align=“left/center/right”;
垂直对齐方式:valign=“top/middle/bottom/baseline”
合并单元格属性:
colspan=“所要合并的单元格的列数”
rowspan=“所要合并的单元格的行数”
表单
表单是网页中最常用的对象之一,它主要负责把用户的信息传递给服务器,实现数据的动态交互。
表单包含三个组成部分:
表单域:包含了处理表单数据所用的程序的URL以及数据提交到服务器的方法。
表单控件(对象、元素):包含了文本框、密码框、隐藏、多行文本框(文本域)、复选框、单选框、下拉列表、文件上传框、提交按钮、复位按钮、一般按钮。
提示信息:同一个表单中还应该添加一些说明性文字,提示用户填写操作。
Form:用于定义采集数据的范围,即设定表单的起止位置,并指定处理表单数据程序的url地址,其基本语法结构如下:
<form action=“url” method=“get/post” name=“名” >表单内容</form>
Action:用于设定表单数据文件的URL的地址,这个文件通常是一个后台程序或是一个电子邮件地址。
Method:指定数据传递到服务器的方式。
Name:用于设定表单名称,便于其他地方引用表单的值。
常用表单元素控件:
文本框:
<input type="text" />
密码框:
<input type="password" />
提交按钮:
<input type="submit" value="按钮上显示的文字" />
重置按钮:
<input type="reset" value="按钮上显示的文字" />
跳转按钮:
<input type="button" value="按钮上显示的文字" />