HTML/CSS基础

浏览数：20 / 时间：2015年06月09日

HTML：HyperText Markup Language 即超文本标记语言，不同于程序设计语言，它只能建议浏览器以什么方式或结构显示网页内容，是网页的基础架构。

CSS: Cascading Style Sheets 即层叠样式表，简称样式表，是网页页面排版样式标准，它弥补了HTML对网页格式化的不足，起到排版定位的作用。

顺便说一下JavaScript。HTML和CSS配合使用，提供给用户的只是一种静态信息，缺少交互性，出于这样一种需求，JavaS应运而生，实现了实时动态交互的页面功能。

HTML

html文件是以标签对或标签来标记网页结构和显示网页内容的。大部分标签都以标签对显示存在，即以“<标签名>”开始，以“</标签名>”结束。

一个最简单的html如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
</html>

第一行为文档类型申明

HTML文档以<html>标签开始</html>结束主要包含两个部分：文档头（以<head>标签开始</head>结束）和文档体（以<body>标签开始</body>结束）

文档头中常包含标题(<title>) 文件信息（<meta>）如文件关键字类型格式网页过期时间样式表等

html文档编写时不区别大小写，但是标记中不要有空格，标记中的属性可以用双引号括起来，也可以不用。

常见body属性

bgcolor	设置背景颜色
topmargin leftmargin rightmargin bottommargin	设置页面边距
text	设置正文颜色

文字与段落效果

编辑网页文字样式<font face=" " size=" " color=" "></font> 主要设置文字的字体字号和颜色等

<b>加粗的文字</b>

<i>斜体的文字</i>

<u>添加下划线的文字</u>

文字上下标 <sup></sup> <sub></sub>

段落标记<p></p>

回车<br>

预格式化<pre></pre>对网页中文字段落进行预格式化，在输入过程中，按键盘上的回车键，就可以生成一个段落

文字居中显示<center></center>

<blockquote>段落缩进

插入并设置水平线<hr>其属性有

属性	说明
width	设置水平线宽度，可以是像素或百分比
size	设置水平线高度
noshade	设置水平线无阴影
color	设置水平线颜色
align	设置水平线居中对齐

建立和使用列表

列表类型	标记符号
定义列表	dl
无序列表	ul
目录列表	dir
菜单列表	menu
有序列表	ol

1.插入定义列表<dl>

<dl>
       <dt>名称<dd>说明
       <dt>名称<dd>说明
       <dt>名称<dd>说明
</dl>

注：dt标记定义了列表项的名称部分，同时此标记只在dl标记中使用

2插入无序列表<ul>

<ul>
        <li>名称</li>内容
        <li>名称</li>内容
        <li>名称</li>内容
</ul>

3插入目录列表<dir>

<dir>
        <li>名称</li>内容
        <li>名称</li>内容
        <li>名称</li>内容
</dir>

4菜单列表<menu> 只需要单个li标记显示菜单列表项目值

<menu>
        <li>名称
        <li>名称
        <li>名称
<menu>

5 插入有序列表

<ol Type=" ">
        <li>名称</li>内容
        <li>名称</li>内容
        <li>名称</li>内容
</ol>

2-4的列表符号都是一行的前面显示小圆点，有序列表可以自定义列表符号，默认为 1,2,3.....

其他取值有a，A ，i等，对于列表符号分别为 a,b,c,...;A,B,C,.... 罗马数字i等

超链接<a href="URL">链接内容</a>

图像映射：单击网页中的某个图片可以跳转到相应的网页页面

利用<img>标记插入图像文件 src文件路径

<map>标记表示插入图像映射 rshape表示映射区域形状有 rect 矩形 cicle椭圆形poly多边形等 coords表示感应区域坐标

<img  src="URL" usemap=" "></img>
<map name=" ">
<area shape=" " coords=" , , ," href="URL">
</map>

制作表格
插入表格

基本结构

<pre name="code" class="html"><table>
   <caption>插入表格标题</caption>
    <tr>
          <td><td>
    </tr>
</table>

<tr>表示插入一行<td>表示插入一列

设置表格表头<th>,要将某一行作为表格文件的表头，只要将该行包含的列标记<td>改为<th>即可，表头默认粗体显示居中对齐

设置划分结构表格<thead><tbody><tfoot>

所谓划分结构表格，是指将一个表格划分为三个部分在网页上显示。分别使用<thead></thead><tbody></tbody><tfoot></tfoot>标记

<thead></thead>表示定义一组表头行

<tbody></tbody>表示定义表格主体部分

<tfoot></tfoot>表示为表格添加一个标注

设置表格标记属性

<table>属性

设置表格的宽度和高度width 和height

设置表格的边框属性 border边框粗细 bordercolor边框颜色

设置边框样式frame和rules 可以设置边框部分显示

设置表格背景bgcolor

<tr><td>属性

调整行内容水平对齐<tr align="left|center|right">

调整行内容锤子对齐<tr align="top|middle|bottom|baseline"> 分别表示内容顶端对齐居中对齐低端对齐基线对齐

设置跨行单元格纵向合并 <td rowspan="2"> 单元格跨2行

设置跨列单元格横向合并<td colspan="2"> 单元格跨2列

设置单元格间距cellspacing和单元格边距cellpadding

表单

是网页中提供的一种交互式操作手段

表单标记<form></form> 部分属性如下

表单标记的属性和说明
属性	说明
name	设置表单名称
method	设置表单发送方法post或get
action	设置表单处理程序
enctype	设置表单编码方式
target	设置表单显示目标

信息输入标记<input name=" " type=" ">

常用控件

表单常用控件
类型	说明
文本框 text	type=“ text”
密码框	type="password"
文件域	type="file"
复选框	type="checkbox"
单选框	type="radio"
普通按钮	type="button"
提交按钮	type="submit"
重置按钮	type="reset "
图像域（图像按钮）	type="image"

插入文字域 <textarea name="text" rows=" " cols=" " id=" ">

插入隐藏域<input name=" " type="hidden" value=" "> 对用户不可见，但是随表单将数据发送给服务器

插入下拉菜单和列表项

<form ><select  name=”爱好” size=4 >
         <option  value="1">音乐
         <option  value="2">美术
         <option  value="3">体育
       </select>
       <select  name="特长" >
         <option  value="1">唱歌
          <option  value="2">画画
          <option  value="3">长跑
       </select>

</form>

指定size值为列表项不知道值为下拉菜单

如图所示

技术分享

表单实际应用

<html>
<head>
<title>表单应用</title>
</head>
<body>
<form name="form1" method="post" action="">
<table width="408" border="1" align="center">
    <tr>
      <td width="34" height="32"> </td>
      <td colspan="2">会员注册</td>
    </tr>
    <tr>
      <td> </td>
      <td width="83"><div align="right">用户名：</div></td>
      <td width="269"><input type="text" name="textfield"></td>
    </tr>
    <tr>
      <td> </td>
      <td><div align="right">密码：</div></td>
      <td><input type="password" name="textfield2"></td>
    </tr>
    <tr>
      <td> </td>
      <td><div align="right">确认密码：</div></td>
      <td><input type="text" name="textfield3"></td>
    </tr>
    <tr>
      <td> </td>
      <td><div align="right">性别：</div></td>
      <td><input type="radio" name="radiobutton" value="radiobutton">
        男
        <input type="radio" name="radiobutton" value="radiobutton">
        女</td>
    </tr>
    <tr>
      <td> </td>
      <td><div align="right">爱好：</div></td>
      <td><input type="checkbox" name="checkbox" value="checkbox">
        体育
        <input type="checkbox" name="checkbox2" value="checkbox">
        音乐
        <input type="checkbox" name="checkbox3" value="checkbox">
        文学
        <input type="checkbox" name="checkbox4" value="checkbox">
        其它</td>
    </tr>
    <tr>
      <td> </td>
      <td><div align="right">特长：</div></td>
      <td><select name="select">
      </select></td>
    </tr>
    <tr>
      <td> </td>
      <td><div align="right">联系电话：</div></td>
      <td><input type="text" name="textfield4"></td>
    </tr>
    <tr>
      <td> </td>
      <td><input type="submit" name="Submit" value="提交"></td>
      <td><input type="reset" name="Submit2" value="重置"></td>
    </tr>
  </table>
</form>
</body>
</html>

实际效果图如下：

技术分享