分类 HTML/CSS 下的文章

前言:

网站常常以多列显示内容(就像杂志和报纸)。

HTML 布局 - 使用div元素

<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。

HTML 布局 - 使用table元素

使用 HTML <table> 标签是创建布局的一种简单的方式。

使用 HTML5 的网站布局

HTML5 提供的新语义元素定义了网页的不同部分:
HTML5 语义元素

header:定义文档或节的页眉


nav:定义导航链接的容器


section:定义文档中的节


article:定义独立的自包含文章


aside:定义内容之外的内容(比如侧栏)


footer:定义文档或节的页脚


details:定义额外的细节


summary:定义 details 元素的标题

这个例子使用 <header>, <nav>, <section>, 以及 <footer> 来创建多列布局:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>陌上花-blog</title> 
<style>
header {
    background-color:#FFA500;
    color:white;
    text-align:center;
    padding:5px;     
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;          
}
section {
    width:350px;
    float:left;
    padding:10px;        
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;         
}
</style>
</head>
<body>
<header>
<h1>陌上花-blog</h1>
</header>
<nav>
首页<br>
关于<br>
</nav>
<section>
<h1>London</h1>
<p>
内容在这里
</p>
</section>
<footer>
版权 © 陌上花
</footer>
</body>
</html>

以及id命名法:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>陌上花-blog</title> 
</head>
<body>
<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">陌上花-blog</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>首页</b><br>
关于<br>
</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © 陌上花</div>

</div>

</body>
</html>

下面的例子使用表格制作:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>陌上花-blog</title> 
</head>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>陌上花-blog</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;">
<b>首页</b><br>
关于<br>

</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © 陌上花</td>
</tr>
</table>

</body>
</html>

注:即使可以使用 HTML 表格来创建漂亮的布局,但表格的目的是呈现表格化数据,不是布局工具!

表单的元素:

1.单行文本框<input type="text"/>(input 的type 属性的默认值就是"text")

文本框是一种让访问者自己输入内容的表单对象,通常被用来填写单个字或者简短的回答,如姓名、地址等。

<input type = “text” name=“名称”/>

以下是单行文本框的主要属性:
size:指定文本框的宽度,以字符个数为单位;在大多数浏览器中,文本框的缺省宽度是20个字符。
value:指定文本框的默认值,是在浏览器第一次显示表单或者用户单击<input type="reset"/>按钮之后在文本框中显示的值。
maxlength:指定用户输入的最大字符长度。

2.多行文本框<textarea></textarea>

也是一种让访问者自己输入内容的表单对象,只不过能让访问者填写较长的内容。

<textarea name="..." cols="..." rows="..." wrap="VIRTUAL"></textarea>

属性解释:
name属性定义多行文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
readonly属性定义多行文本框为只读。
cols属性定义多行文本框的宽度,单位是单个字符宽度;
rows属性定义多行文本框的高度,单位是单个字符宽度;
wrap属性定义输入内容大于文本域时显示的方式,可选值如下:
默认值是文本自动换行;当输入内容超过文本域的右边界时会自动转到下一行,而数据在被提交处理时自动换行的地方不会有换行符出现; Off,用来避免文本换行,当输入的内容超过文本域右边界时,文本将向左滚动,必须用Return才能将插入点移到下一行; Virtual,允许文本自动换行。 Physical,让文本换行,当数据被提交处理时换行符也将被一起提交处理。

3.密码框<input type="password"/>

是一种特殊的文本域,用于输入密码。当访问者输入文字时,文字会被星号或其它符号代替,而输入的文字会被隐藏。

<input type=“password” name=“名称”/>

4.单选按钮<input type="radio"/>

当需要访问者在待选项中选择唯一的答案时,就需要用到单选框了。

<input type="radio" name="sexrdo" value="男">男  
<input type="radio" name="sexrdo" value="女">女 

属性解释:
name属性定义单选框的名称,要保证数据的准确采集,单选框都是以组为单位使用的,在同一组中的单选项都必须用同一个名称;
value属性定义单选框的值,在同一组中,它们的域值必须是不同的。

5.复选框<input type="checkbox"/>

复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素,都必须有一个唯一的名称。

<input type="checkbox" name="chkhobby" value="吃" checked>  
<input type="checkbox" name="chkhobby" value="喝">  
<input type="checkbox" name="chkhobox" value="玩">  
<input type="checkbox" name="chkhobox" value="乐" > 

属性解释:
name属性定义复选框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
value属性定义复选框的值

6.隐藏域<input type="hidden"/>

隐藏域通常用于向服务器提交不需要显示给用户的信息。

<input type=“hidden” name=“隐藏域”/>

属性解释:
name属性定义隐藏域的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
value属性定义隐藏域的值

7.文件上传<input type="file"/>

有时候,需要用户上传自己的文件,文件上传框看上去和其它文本域差不多,只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件

<input type="file" name="txtfile" size="15">

注意:在使用文件域以前,请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置enctype="multipart/form-data"来确保文件被正确编码;另外,表单的传送方式必须设置成POST。
属性解释:
name属性定义文件上传框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
size属性定义文件上传框的宽度,单位是单个字符宽度;
maxlength属性定义最多输入的字符数。

8.下拉框<select>标签

下拉选择框允许你在一个有限的空间设置多种选项。与嵌套的

<select name="sel" size="3" multiple>  
                <option value="深圳">深圳</option>  
                <option value="北京">北京</option>  
                <option value="上海">上海</option>  
                <option value="广州" selected>广州</option>  
            </select>

属性解释:
size属性定义下拉选择框的行数;
name属性定义下拉选择框的名称;
multiple属性表示可以多选,如果不设置本属性,那么只能单选;
value属性定义选择项的值;
selected属性表示默认已经选择本选项。

9.<label></label>标签

在<input type=“text”>前可以写普通的文本来修饰,但是单击修饰文本的时候input并不会得到焦点,而用label则可以,for属性指定要修饰的控件的id,<label for=“txt1” >内容</label>;”,然后按下alt+u(了解)。accesskey=“u“,label的另一个属性。注意:要为被修饰的控件设置一个唯一的id。我觉得<label></label>标签对<input type="radio"/>和<input type="checkbox"/>这两个标签是非常有用的。

<input type="radio" name="sex" id="male" value="0" checked="checked" /><label for="male">男</lable>
<input type="radio" name="sex" id="fmale" value="1" /><label for="fmale">女</label>

10.<fieldset></fieldset>标签

fieldset标签将控件划分一个区域,看起来更规整。

<fieldset name="filed">  
            <legend>请输入个人信息</legend>  
                用户名称:<input type="text" name="txtUsename" value="请输入用户名称" >  
                <br/>  
                用户密码:<input type="password" name="txtUsepwd" >  
        </fieldset>

11.提交按钮<input type="submit"/>

当用户单击<inputt type="submit"/>的提交按钮时,表单数据会提交给<form>标签的action属性所指定的服务器处理程序。中文IE下默认按钮文本为“提交查询”,可以设置value属性修改按钮的显示文本。

<input type="submit" value="提交"/>

属性解释:
type="submit"定义提交按钮;
name属性定义提交按钮的名称;
value属性定义按钮的显示文字;

12.重置按钮<input type="reset"/>

当用户单击<input type="reset"/>按钮时,表单中的值被重置为初始值。在用户提交表单时,重置按钮的name和value不会提交给服务器。

<input type=“reset” value=“重置按钮"/>

属性解释:
type="reset"定义重置按钮;
name属性定义复位按钮的名称;
value属性定义按钮的显示文字;

13.普通按钮<input type="button"/>

普通按钮通常用于单击执行一段脚本代码。

<input type="button" value="普通按钮"/>

属性解释:
type="button"定义一般按钮;
name属性定义一般按钮的名称;
value属性定义按钮的显示文字;
onClick属性,也可以是其它的事件,通过指定脚本函数来定义按钮的行为;

表单实例代码:

<!DOCTYPE html>  
<html>  
<head>  
<title>Day905</title>  
<meta charset="utf-8">  
</head>  
<body>  
<form>
<!--文本框--> 
<p>  
用户名称:<input type="text" name="txtUsename" value="请输入用户名称" readonly>  
</p>  
<p>  
用户密码:<input type="password" name="txtUsepwd" >  
</p>  
<!--单选框-->  
<p>  
用户性别:<input type="radio" name="sexrdo" value="男">男  
<input type="radio" name="sexrdo" value="女" checked>女       
</p>  
<!--复选框-->  
<p>  
用户爱好:
吃<input type="checkbox" name="chkhobby" value="吃" checked>  
喝<input type="checkbox" name="chkhobby" value="喝">  
玩<input type="checkbox" name="chkhobox" value="玩">  
乐<input type="checkbox" name="chkhobox" value="乐">  
</p>  
<!-- 按钮 -->  
<p>  
<input type="submit" name="btnsbt" value="提交">  
<input type="reset" name="btnrst"    value="重置">  
<input type="button" name="btnbtn" value="普通按钮">  
</p>  
<!-- 隐藏域 -->  
<p>  
<input type="hidden" name="txtID" value="407862858@qq.com">  
</p>  
<!--文件选择框-->  
<p>  
请上传文件:<input type="file" name="txtfile">  
</p> 
<!--下拉列表-->  
<p>意向工作城市:  
<select name="sel" >  
<option value="深圳">深圳</option>  
<option value="北京">北京</option>  
<option value="上海">上海</option>  
<option value="广州" selected>广州</option>  
</select>  
</p>  
</form>  
</body>  
</html>

HTML 表单

表单是一个包含表单元素的区域。
通常用于搜集不同类型的用户输入。
表单使用表单标签 <form> 来设置:

<form>
.
 <!--表单元素在这里-->
.
</form>

HTML 表单 - 输入元素

表单元素指的是不同类型的 input 元素,比如:
文本域、下拉列表、单选框、复选框、提交按钮等等。
一个简单的 HTML 表单,包含两个文本输入框和一个提交按钮:

<form action="form_action.asp" method="get">
  First name: <input type="text" name="fname" />
  Last name: <input type="text" name="lname" />
  <input type="submit" value="Submit" />
</form>

多数情况下被用到的表单标签是输入标签(<input>)。
输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

  • 文本域

  • 文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
  • 密码字段

  • 密码字段通过标签<input type="password"> 来定义: 注意:密码字段字符不会明文显示,而是以星号或圆点替代。
  • 单选按钮

  • <input type="radio"> 标签定义了表单单选框选项
  • 复选框

  • <input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
  • 提交按钮

  • <input type="submit"> 定义了提交按钮. 当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

点击了解更多

  • <a>标签中mailto的作用是可以链接Email地址,
  • mailto是网页设计制作中的一个非常实用的html标签,
  • 许多拥有个人网页的朋友都喜欢在网站的醒目位置处写上自己的电子邮件地址,
  • 这样网页浏览者一旦用鼠标单击一下由mailto组成的超级连接后,
  • 就能自动打开当前计算机系统中默认的电子邮件客户端软件,例如OutLook Express以及Foxmail等。
  • 但是由于各操作系统和邮件客户端对 mailto 事件连接的处理不一致,所以在实际应用的时候需要注意;

基础语法

<a href=mailto:imoshanghua1314@outlook.com>send</a> 

参数列表


mailto: 邮箱地址


to: 收信人(多个之间用;分割)


suject: 主题


cc: 抄送


bcc: 暗抄送


body: 内容(部分邮件客户端支持html格式语句)

注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。

实例

下面是一个完整的实例:

<a href="mailto:imoshanghua1314@outlook.com?cc=imoshanghua1314@outlook.com&bcc=imoshanghua1314@outlook.com&subject=主题&body=this is body">send</a> 


在浏览器中显示的结果:
send
点击链接会打开电子邮件应用,并自动填写收件人等设置好的信息,如下图:
mailto

什么是 CSS?

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS还能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

CSS概述

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一

需要具备的基础知识

在继续学习之前,你需要对下面的知识有基本的了解:

  • HTML
  • XHTML

样式解决了一个很大的问题

HTML 标签原本被设计为用于定义文档内容,如下实例:

<h1>这是一个标题</h1>
<p>这是一个段落.</p>

样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。
为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style)。
当代浏览器都支持 CSS .

CSS 样式表极大地提高了工作效率

样式表定义如何显示 HTML 元素
样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。