tableborder样式(html中border用法)-昊阳知识网

一、基础语法结构

强制小写！！因为xhtml新标准与未来趋势

<!DOCTYPEHTML>开始

<html> 与</html> 之间的文本描述网页

<body> 与 </body> 之间的文本是可见的页面内容

<h1> 与 </h1> 之间的文本被显示为标题（不唯一）

<p> 与 </p> 之间的文本被显示为段落（不唯一）

实体转义：

显示结果

描述

实体名称

实体编号

空格

小于号

大于号

和号

”

引号

‘

撇号

' (IE不支持)

￠

分

镑

人民币/日元



欧元

€

小节

版权

注册商标

商标

™

乘号

除号

HTML ISO-8859-1参考手册：http://www.w3school.com.cn/tags/html_ref_entities.html

二、标签

标签由开始标签与结束标签组成

如：<></>

三、元素(具体内容)

标签内的内容为元素，某些元素内容可为空，元素大多数可配置属性

举例：

<html>与</html> #定义整个HTML文档，元素内容为body元素

<body>与</body> #文档主体，元素内容为p元素

<p>与</p> #文档段落

四、属性

格式：名=”值”

如：name=”value”

更多属性（属性要加引号，先双后单）：

img图片

<imgsrc=”URL” alt=”替换文本”height=”42″ width=”42″>

<bodybackground=”/i/eg_background.jpg”> 添加背景图片

1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))

2、圆形：(圆心坐标为(X1,y1)，半径为r)

3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3)……)

a超链接，href指定链接

普通的链接：<ahref=”http://www.example.com/”>链接文本</a>

图像链接：<ahref=”http://www.example.com/”><imgsrc=”URL”alt=”替换文本”></a>

邮件链接：<ahref=”mailto:webmaster@example.com”>发送e-mail</a>

高级用法：mailto收件人，cc抄送，bcc密件抄送，subject邮件标题，body邮件内容mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer Party&body=You are invited to a big summer party!

target锚

_blank浏览器总在一个新打开、未命名的窗口中载入目标文档。

_self这个目标的值对所有没有指定目标的<a>标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题<base>标签中的target属性一起使用。

_parent这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标_self等效。

_top这个目标使得文档载入包含这个超链接的窗口，用_top目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

标签 <a name=”label”>锚</a> 可以用id代替name属性

在下面的代码中，我们将#符号和锚名称添加到URL的末端，就可以直接链接到tips这个命名锚了。

首先，在HTML文档中对锚进行命名（创建一个书签）：

<a name=”tips”>基本的注意事项 – 有用的提示</a>

然后，在同一个文档中创建指向该锚的链接：

<a href=”#tips”>有用的提示</a>

也可以在其他页面中创建指向该锚的链接：

<ahref=”http://www.w3school.com.cn/html/html_links.asp#tips”>有用的提示</a>

class规定元素的类名（classname）

id规定HTML元素的唯一id

style属性规定元素的行内样式（inlinestyle）

title规定元素的额外信息（可在工具提示中显示）

举例：

<h1></h1> 定义标题，最大h1，最小h6

<h1style=”text-align:center”>关于对齐方式分附加信息，这里是居中对齐

<h1style=”front-family:verdana”>定义题目字体系列

<body></body> 定义HTML主体

<body style=””> 定义背景

<table></table> 定义HTML表格

<table border=”1”> 关于表格边框的附加信息

<p></p> 定义段落

<pstyle=”font-family:arial;color:red;font-size:20px;”>定义段落字体系列，颜色，尺寸

更多详见HTML参考手册：http://www.runoob.com/tags/ref-standardattributes.html

五、文本格式化

字体（物理样式）：

<b>粗体

<big>大号字

<em>着重文字，多数为斜体强调，不同浏览器可能会有不同强调效果

<i>斜体字

<small>小号字

<strong> 加重粗体（语义）

<sub> 下签名

<sup> 上签名

<del> 删除形式文本

<ins> 下划线形式文本

计算机代码输出（内容样式）：

<code> 计算机代码，不保留多余的E空格和换行

<kbd> 键盘码

<samp> 计算机代码样本

<tt> 打字机代码

<var> 变量

<pre> 中内容保留文本格式，包括空格与换行

引用、专业：

<abbr title=””></abbr>全词缩写，title标记隐藏内容，鼠标悬浮提示全部内容，title可用在很多地方

<acronymtitle=””></acronym> 首字母缩写，title标记隐藏内容，鼠标悬浮提示全部内容，title可用在很多地方

<bdodir=”rtl”></bdo> 定义文字方向，这里为从右向左输出

<blockquote>长引用（有换行和外边距）

<q> 短引用（双引号引用，内嵌单引号）

<cite> 引用、引证，著作

<dfn> 定义项目，专业术语

六、样式/区块

<div> </div> 定义块内样式可以跨行，自动换行

<span> </span> 定义行内样式，可以对行进行划分，保持同行

分类行内元素，HTML<span>元素是行内元素，能够用作文本的容器。

设置<span>元素的类，能够为相同的<span>元素设置相同的样式。

<styletype=”text/css”>

h1{color:red;}

p{color:blue;}

</style>

<div>文档中的块级元素</div>

<span>文档中的内联元素</span>

举例：

<!DOCTYPEhtml>

<html>

<head>

span.red{color:red;}

</style>

</head>

<body>

<h1>My<span>Important</span>Heading</h1>#调用class：red

</body>

</html>

七、CSS

<html>

<head>

h1{color:red}

p{color:blue}

</style>

</head>

<body>

<h1>header 1</h1>

<p>A paragraph.</p>

</body>

</html>

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>

<linkrel=”stylesheet” type=”text/css”href=”mystyle.css”>

</head>

内部样式表（样例见十三）

当单个文件需要特别样式时，就可以使用内部样式表。你可以在head部分通过<style>标签定义内部样式表。

<head>

<styletype=”text/css”>

body{background-color:red}

p{margin-left:20px}

</style>

</head>

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性。以下实例显示出如何改变段落的颜色和左外边距。

<pstyle=”color:red;margin-left:20px”>

This is aparagraph

</p>

颜色支持：

颜色名、RGB、16进制（Color Hex）

八、列表

1.无序列表，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<ul>

</ul>

2.有序列表，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<ol>

</ol>

3. 自定义列表

<dl>

<dt>项目1</dt> #开始

<dd>项目内容1</dd> #定义开始

</dl>

九、表格

1. 内嵌用<table border=”1”> 定义表格，以及边框大小

2. 内链在<head>的<style>内定义表格内元素的样式大小，再在<body>内<table class=””>引用

<table>

<caption>我的标题</caption>定义表格标题

<tr> 第一行内容

<th>Heading</th>定义表格1头内容

<th>AnotherHeading</th> 定义表格头2内容，th内属性colspan=”1″为单元格列数，rowspan=”1″为行数

<td>100</td>第一单元内容

<td>200</td>第二单元内容

</tr>

</table>

十、表单

<form action=”demo_form.php” method=”post/get”> #表单处理方式与地点

<fieldset>#边框

<inputtype=”text” name=”email” size=”40″maxlength=”50″> #普通输入框，默认缺省值20字符

<inputtype=”password”> #隐藏字段，以星号或原点显示

<inputtype=”checkbox”checked=”checked”>#复选框.从若干给定的选择中选取一个或若干选项。

<inputtype=”radio” checked=”checked”> #单选按钮

<inputtype=”button”value=”Helloworld!”>#创建自定义按钮

<inputtype=”submit”value=”Send”>#提交按钮，单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<inputtype=”reset”> #重置按钮

<inputtype=”hidden”>

<textarearows=”10″ cols=”30″>一个文本框</textarea>#有预选值的文本框

#有预选值的下拉列表：

</select>

</fieldset>

</form>

##表单中的几个属性：

value：提交数据到服务器的值（后端程序使用）

name：为控件命名（后端使用）

checked：当设置checked=”checked”时，该选项默认选中

十一、布局

在<head>的<style></style>内定义布局

1.header定义文档或节的页眉

#header {

background-color:black;

color:white;

text-align:center;

padding:5px;

}

2.nav定义导航链接的容器

#nav {

line-height:30px;

background-color:#eeeeee;

height:300px;

width:100px;

float:left;

padding:5px;

}

3.section中间主体内容，定义文档中的节

#section {

width:350px;

float:left;

padding:10px;

}

4.footer页脚

#footer {

background-color:black;

color:white;

clear:both;

text-align:center;

padding:5px;

}

5.article定义独立的自包含文章

6.aside定义内容之外的内容（比如侧栏）

7.details定义额外的细节

8.summary定义details元素的标题

使用<div id=”布局类别”>对指定块调用布局，其实就是CSS的简单使用

十二、框架

<frameset cols=”25%,75%”> #cols是竖排，rows是横排

</frameset>

导航框架

<framesetcols=”120,*”>

上面的为竖排导航框架

内联框架（html页内框架，页中页）

<iframesrc=”demo_iframe.htm” width=”200″height=”200″></iframe>

<iframesrc=”demo_iframe.htm” frameborder=”0″></iframe> #无边框

内嵌网页：

<!DOCTYPEhtml>

<html>

<body>

<iframesrc=”http://www.baidu.com/”width=”600″height=”300″scrolling=”yes”></iframe>

<p><b>注释：</b>由于链接的目标匹配iframe的名称，所以链接会在iframe中打开。</p>

</body>

</html>

十三、类

在<head>内的<style>内定义类

.classname {

background-color:black;

color:white;

margin:20px;#背景填充宽度

padding:20px;#字填充宽度

}

在 <body> 内使用<div> 的class属性指定某个类

十四、JS

HTML输出流：

document.write(“<h1>这是一个标题</h1>”);

document.write(“<p>这是一个段落。</p>”);

</script>

事件响应：

例如按钮触发：

function myFunction()

{

document.getElementById(“demo”).innerHTML=”HelloJavaScript!”;

}

</script>

样式处理

functionmyFunction()

{

x=document.getElementById(“demo”)// 找到html中用id声明的元素demo

x.style.color=”#ff0000″; // 改变样式

}

</script>

tableborder样式(html中border用法)

相关推荐

发表评论