样式(以下都是样式的基础运用)
内部样式表 更改文本的颜色
<style type="text/css"> (假如是标题的颜色要更改,那么就) h1 {color:颜色} (段落的话也是一样的) p {color : 颜色} </style> <style>的标签是包含在<head>中的
相对应的在 <body>标签中的 标题和段落的本文就会以定义的颜色表现出来。
外部样式表
我的理解是,将所需要的样式表功能打包成一个文件,然后在需要使用的时候就从保存的地址中取出来使用。
将诸多标签写在一个文档里,然后通过 link 来插入到HTML代码中。(网络上的解释)
<link rel="stylesheet" type="text/css" href="mystyle.css"/> 一样是包含在<head>中 <link>是一个空元素,所以要在标签内加上一个/。rel规定链接文档与当前文档的关系。 href规定了链接文档的位置。
内联样式表
最简单,直接在标签元素中定义样式,但其实这样使用样式会损失样式本身的优点
<p style="color:颜色"> **** </p> 这只是一个简单的例子,还可以定义更多的样式。
在实际的测试中,style="color='颜色'"在<p>标签中依然成立,但是在<h>中并不行。Why?
type属性是必须的,而且值只能是"text/css"
链接
小技巧:去除链接的下划线
<a>标签内 在地址后加上style="text-decoration:none" <a href="http://www.baidu.com" style="text-decoration:none">
在新的窗口中打开连接:
在<a>标签内 ,URL的后头加上 target="_blank" target属性定义链接的打开方式
命名锚记
很好玩的样子,意思是说使用<a>标签,在网页一开始的地方先设置一个本页跳转的链接,使我们不用很麻烦地去逐行查找想要的内容。点击链接后就可以直接跳到想看的地方。
实例:
<a href="#tag">查看tag</a> 这是设置的锚链接
N行******
<a name="tag">这里是tag</a> 这是设置的锚记
当然也可以在网页中创建指向锚记的链接,方法就是<a href="URL#锚记名"> 在页面的测试中失败了orz……
电子邮件链接
就是说当我们点击这个链接时,浏览器会从我们默认的邮箱客户端发送邮件
依然是在<a>标签中作用。 <a href="mailto:某人的邮箱?subject=邮件的标题 & body=邮件的内容 & bcc=某人的邮箱2 & cc=某人的邮箱">
这个功能中要求mailto属性是必须的,在第一个功能后一定是?符号,之后就都是用&符号连接功能。mailto后跟着的邮箱地址是收件人的邮箱。
subject后定义的是邮件的标题,body后定义的是邮件的内容。至于bcc和cc就是抄送和暗送对象了。
抄送的意思是在抄送列中包含的邮箱地址都会接受到这个邮件的副本,而且他们彼此都能看到抄送的人员名单。
暗送与抄送类似,但是他们不会知道其他收到该邮件副本人员的信息。抄送和暗送目标可以并列,用逗号或者封号分隔。
图片
设置背景图片:
类似于设置背景色,在<body>标签里加上 background="URL"
如:<body bodybackground="http://bbsfiles.119g.com/data/attachment/forum/201203/15/104134q09fqj21l0kjf9vk.jpg">
排列/浮动图片:
类似于排列文本。在<img>标签中加上align属性,并进行希望执行的定义。如align="center/right/bottom"
完整例子:<img src="URL" align="属性"/>
浮动类似于排列图像。是指在含有文本的段落中使段落中包含的图像浮动到左或者右侧。
也是在<img>中添加align属性 ,只是定义为"left/right"
如何让图片成为一个链接:
在之前说到过图片的插入,是使用<img>标签。现在要做的是在<a>标签后本来应该是链接文本的地方加上完整的<img>。
如:<a href="http://www.baidu.com"> <img src="*****"/> </a>
插入图片的时候,如果是来自网络上的,即并不是当前文件夹下的图片时,只需要在src后的URL位置输入图片的完整地址即可。
但是为什么有的图片无法显示?有什么限制吗?
跳出框架
使用<a>标签,在本页面的URL后加上 target="_top" 然后点击链接完本就OK了。
图像映射:指带有可点击区域的图像
border属性,用来设置边框。
首先在文档中引入一张图像,使用到<img>标签,但是要在<img>中添加属性usemap,usemap="#名称"
然后定义标签<map name="名称" id="名称"> 注意:这里的“名称”和usemap后的相同 之所以<map>中要定义name和id,是因为usemap会用到name或id,所以都定义会消除不必要的错误。
接着是定义标签<area>,它的作用是定义可以被点击的 区域,以及点击后产生的映射
<area>中包括属性shape、coords、href等。shape定义被点击区域的形状,coords定义被点击区域的坐标,href定义放大后的被点击区域。
表格
创建表格:
使用到<table><tr><td>标签
<tr>表示行,<td>定义列,另外在<table>中定义border属性(用来定义边框)
这个感觉很麻烦的样子啊。一个行的内容是在一个<tr></tr>中定义的,在<tr>中有几个<td>就表示这一行有几个列。而所有的<tr><td>都包含在<table>内。
在<td></td>间是列的属性值。如:<td>100</td>。当一行的所有列的值都为空时,会出现一个空的很小的表格。很别扭= =。
并且每一行的列数可以不一致。列数少的行,少出的那一列会空着。
还有就是border属性,<table border="?">,其中?为数字。这个数字是用来表示边框的像素的,数字越大那么边框就越粗。为0时就没有边框。
另外还有bordercolor,设置边框的颜色。但是网上的解释我看不懂啊。似乎用到了函数?
定义表头:
表头其实可以就是列或者行的名。使用<th></th>标签,而且一般是用粗体字来显示表头。
这里有个区别。日常的表格中,列名可以是水平或者垂直的。
水平的表头就是
<tr>
<th>表头</th>
<th>表头</th>
</tr>
垂直的表头就是将跟列表头写在一行里
<tr>
<th>表头 </th>
<td>***</td>
<td>***</td>
<td> 以上是一行
表格空位占位符:
本来<td></td>间本来要是一个列值,但是有时会出现表格控制的情况。所以这个时候为了避免空值无法显示表格边框的情况,
在原本是空值的位置如下表示:<td> </td> 。 有个封号
添加标题(或者说表格名):
标签<caption>标题</caption>,包含在<table>内,写在所有的表格内容前。
表头跨行或列:
在实际使用表格中,会出现不止一列包含在同一个列名下。就比如联系方式有多个。
同样的,这样的情况下表头也可以是水平或垂直表示。
跟一般表头定义的区别是,需要跨行或列的表头在定义时需要加上 colspan="跨的列数"或者rowspan="跨的行数" 即:<th colspan="*">表头</th> <th rowspan="*"> 。
表格内可以包含写标签:
在<tr>的行定义内可以包含段落<p>
在<tr>内可以包含另一个表格,被包含的表格写法没有区别
在表格的单元内可以包含一个列表,使用<ul></ul>包含列表的内容,其中列表每行的内容可以用<li></li>标签包含,是得显示的内容前头有一个黑点,这是因为黑点是默认的显示方式,在<ul>内定义typr属性,赋予不同的值可以覆盖黑点,然后表现别方式,如圆(circle)。例子<ul><li>****</li> </ul>
修饰表格:
1.使用cellpadding属性。显示的效果是表格的每一个单元内的边距编程被定义的大小,然后单元的内容会被显示在中央,离边框出现一段距离,比较美观。
<table border="*" cellpadding="*" > 推荐值 10
2.使用cellspacing属性。使得表格的外边框拉开距离。
类似cellpadding <table border="*" cellspading="*">
3.设置表格的背景颜色
依然是定义在<table>标签内,属性为bqcolor。用法为<table bgcolor="颜色">。
4.设置表格背景图像
类似设置背景颜色,使用属性background。用法是<table background="图像的URL">。
5.设置单元的背景颜色和图像
依然是使用bgcolor和background属性。
<td bgcolor="颜色">****<td>
<td background="图片URL">***</td>
6.排列单元的内容
使用align属性。选择的属性值为left/right
用法是<td align="left/right">***</td>
7.设置框架
使用定义在<table>内的frame属性,属性值有box,above,below,hsides,vsides。
用法是<table frame="属性值">
显示效果:box:将表格装在一个框内
above:在表格上方显示一条边框
below:在表格下方显示一条边框
hsides:在表格上下两边显示边框
vsides:在表格左右显示边框
8.表格的页眉,注脚,主体设置 很少使用 ,一旦使用就必须三个都使用,出现次序就是thead,tbody,tfoot
分别对应<thead><tbody><tfoot>
定义在<style>标签内。感觉就想一种属性包,设置好包含的功能,然后在表格的中使用。
使用的方法是使这三个标签包含希望被使用对应功能的<tr><td>。
特别的,<thead>中必须要有<tr>。
这里只记录颜色的定义:
thead{color:颜色} 其他类似。
列表:
有序和无序
先前说到的<ul><li></li></ul>的列表使用方法,只是在每一行内容前显示一个黑点。这是无序的列表。
有序的列表是使用<ol>标签定义。同时在<ol>内定义属性strart,给它一个属性值即一个数字,之后<li>包含的每一行内容就会从这个数字开始标记。在<ol>内定义type属性,赋予值“a” "A" "i"会有不同的效果
<ol strart="1"> 1.*
<li>*</li> 2.*
<li>*</li>
</ol>
注:列表可以嵌套
自定义的列表:
在这里分别用<dl><dt>来替代<ol><li>
<dl>标签用来定义一个列表,<dt>标签用来定义每一个项目
同时还有一个<dd>标签用来定义每一个项目的内容。
<dl>
<dt>计算机</dt> 计算机
<dd>用来计算的仪器 ... ...</dd> 是用来计算的仪器……
<dt>显示器</dt> 显示器
<dd>以视觉方式显示信息的装置 ... ...</dd> 以视觉方式显示信息的装置……
</dl>
就是如上的效果。
块:
<div>标签可以用来包含其他很多的标签,用来定义文档中的一个分区或者节段。
<span>组合文档中的行内元素。
http://www.w3school.com.cn/html/html_layout.asp
表单:
使用<form>标签来定义表单。以实现多种的功能。
实现输入功能:
用到<input>标签,同时可以在标签内使用type、name属性来定义输入文本的类型和名称。 name属性是必须的
如
<form>
姓:<input type="text" name="这个输入文本框的名字"/>
<br/>
名字:<input type="text" name="***"/>
</form>
假如输入的是密码什么的,就需要将type值改成"password"。
单选按钮的实现:
同样是在<form>标签内使用<input>,但是需要将type值要是"radio",然后是文本框的名字name,以及这个按钮的值,value="***"
如性别的单选按钮:
<form>
<input type="radio" name="sex" value="male"/>显示出来的选择文本<br/>
<input type="radio" name="sex" value="female"/>显示出来的选择文本
</form>
多选按钮:
这里的按钮是可以多选的,而不是单选那样只能二选一
跟单选不同的地方在于type类型的值是"chechbox",当然也需要一个name="***",然后跟着一个 选项文本。
动作属性和确认按钮:
直接上例子:
<form name="input" action="URL" method="get"> name属性不是必须的 同时联系之前mailto的相关知识,可以将action后的URL改成"mailto:某人的邮箱地址",method="post"然后就可以在相应的文本框内
***** 输入写邮件的所需信息,再按确认按钮实现邮件发送。
<input type="text" value="***"/>
<input type="submit" value="确认"/>
</form>
在第一个文本框内输入内容,在点击后头命名为确认的按钮,之前输入的文本就会被传输带URL代表的那个网页了。
一个简单的下拉列表:
平时常见的下拉列表类型,就是有多个选项可供选择
实现的方法是,在<form>标签内,定义一个<select></select>标签,<select>需要使用name属性命名。
然后在<select>内定义多个<option>标签,用来给出多个选项。
每个<option>标签格式为<option value="**"> 选项文本</option>
同时可以给下拉列表一个预选项,就是没选择时的默认选项
实现的方法是在其中一个选项的<option>标签内加上 selected="selected",如<option value="XHB" selected="selected">,那么XHB就会是默认的下拉列表选项。
给下拉类表的选项分类:
用<optgroup></optgroup>来包含属于一类的下拉表的选项
即<optgroup label="选项分类的类名,如数字">
<option value=" 1 ">
<option value=" 2 ">
</optgroup> 实现的效果就是1、2是数字下的子选项。 http://www.w3school.com.cn/tiy/t.asp?f=html_optgroup
创建一个文本域:
建立一个文本域用来输入文本,实现很简单,就是运用<textarea rows=" " cols=" " />
然后输入的文本都会出现在定义的文本域内。属性rows和cols是用来限定文本域大小的。
创建按钮:
<form>标签包含的<input>标签内type属性值选取"button" 。
<input type="button" name="**"/> 然后显示出的按钮上的文本就是name的值。
在输入数据周围加上一个带文本的框:
<form> 在<fieldest>内包含文本框。<legend>健康信息</legend>实现在 身高、体重输入文本框外围加上一圈带有 健康信息 字样的框
<fieldset> http://www.w3school.com.cn/tiy/t.asp?f=html_fieldset
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>
</form>
框架
使用到<frameset> <frame>标签 而且在<frameset>的前标签中必须使用到属性cols或者rows 框架边缘的可见边框可以随意拖动 此时可以在<frame>中加入定义noresize="noresize"解决这个情况
简单框架的建立
使用<frameset>标签,定义在<html>标签内。
而在<frameset>内又定义有<frame>标签,注意<frame>是不成对标签。在<frame>中又需要使用src属性,用来为为划分出的不同的框架添加文档
对于属性clos和rows,一个是用于垂直框架,一个是水平框架。使用的格式是 <frameset cols/rows=" %,%,">
在" "内,对实际的分配需求进行分摊,分配的比例是按百分比进行。按自己的喜欢可以分成任意多的框架。 使用像素来分也是可以的,但是百分比更好
注意,如果对框架大小的分配总额度小于1,即那些百分比的和不为1,那么多出来的会自动按照一定的比例分配给各个框架。在最后框架大小定义处使用*的话会自动将剩余的空间都分给最后一份。*前加数字的话会分配到更多空间
即使在标签<frame>内没有定义任何的属性,比如没有src属性给框架们加入文档。虽然所有的框架都是空白的,但是会有一道带颜色的线分割各个框架的区间。
例子:
<frameset rows(cols)="50%,50%">
<frame src=" " />
<frame src=" "/>
</frameset>
<noframe>标签,用于为无法显示框架的浏览器显示文本。可以在<noframe>内加入文字,它会在浏览器无法处理框架是显示,给予提示。相对的,如果可以处理框架,就不会显示文本了。
混合框架建立
比基本的水平和垂直复杂一点。技巧是在一个<frameset>标签内包含另一个或者更多的<frameset>标签。
框架的分配从用从上到下的方式。比如最上方的框架是水平的,那么最外层包含的<frameset>标签应该是<frameset rows=" ">,然后再对下方的框架进行分配。
注意文档的读入要紧跟在<frameset>标签后。 注意成对的标签的闭标签不要丢了
例子:
<frameset rows="50%,50%"> 先是将整体分成上下格式的水平框架
<frame src=" "/>
<frameset cols="50%,50%"> 对下层的水平再进行分割,分成均等的垂直框架
<frame src=" "/>
<frame src=" "/>
</frameset>
</frameset>
内联框架
每一个文档都是一个框架。那么如何在一个文档内包含另一个框架呢?可以用到<iframe>标签
可以用src属性载入另外的文档。也可以在<iframe>标签间定义文本。
导航框架
怎么具体实现?