HTML/CSS基础

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>
实际效果图如下:

技术分享


下次再写css吧


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。