HTML/CSS

HTML相关知识总结html教程

时间:2013-6-19 22:23:58  作者:WPF之家  来源:http://www.wpf123.com  查看:214  评论:0
内容摘要:一、Html的概念1、Html指的是超文本标记语言(Hyper Text Markup Language)2、标记语言是一套标记标签3、Html使用标记标签来描述网页 二、Html标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。1、HTML 标签...

一、Html的概念
1、Html指的是超文本标记语言(Hyper Text Markup Language)
2、标记语言是一套标记标签


3、Html使用标记标签来描述网页

 

二、Html标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
1、HTML 标签是由尖括号包围的关键词,比如 <html>
2、HTML 标签通常是成对出现的,比如 <b> 和 </b>
3、标签对中的第一个标签是开始标签,第二个标签是结束标签


注意:<br/>是换行标记,是单个出现的

 

三、Html的程序的基本结构及常用标记和属性


1、Html的程序的基本结构

 

<html>
<head>
        <title>页面标题</title>
   </head>
<body>
   <h1>标题样式</h1>
        <p>正文部分</p>
</body>
</html>
<html>与</html>之间的文本描述网页
<head>与</head>之间是网页的头部
<title>与</title>之间是网页的标题
<body>与</body>之间的文本是可见的页面内容


2、标记

 

(1)<h1>与</h1>之间的文本被显示为标题,有<h1>与</h1>到<h6>与</h6>六种标题样式
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>


<h6>This is heading 6</h6>

 

(2)<p>与</p>之间的文本是被显示为段落
<p>This is a paragraph.</p>


<p>This is another paragraph.</p>

 

(3)链接:通过<a>来实现


<a >This is a link</a>

 

(4)图像:通过<img>来实现


<img src=http://www.wpf123.com/news/"w3school.jpg" width="104" height="142" />

 

(5)HTML 水平线:<hr /> 标签在 HTML 页面中创建水平线,hr 元素可用于分隔内容。
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />


<p>This is a paragraph</p>

 

(6)通过<div></div>来实现块的功能

 

(7)通过<table>来制作表格
<table border="1">
<tr>表示行
<td>row 1, cell 1</td>表示列
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>


</table>

 

(8)无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>


</ul>

 

(9)有序列表,有序列表也是一列项目,列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>


</ol>

 

(10)表单,是一个包含表单元素的区域。表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。
表单使用表单标签(<form>)定义。
<form>
...
  input 元素
...
</form>


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

 

A、文本域(Text Fields)
当用户要在表单中键入字母、数字等内容时,就会用到文本域。
<form>
First name: 
<input type="text" name="firstname" />
<br />
Last name: 
<input type="text" name="lastname" />


</form>:

 

B、单选按钮(Radio Buttons)
当用户从若干给定的的选择中选取其一时,就会用到单选框。
<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female


</form>

 

C、复选框(Checkboxes)
当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框。
<form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car


</form>

 

D、提交按钮
<input type="submit" value="Submit" />


</form>

 

(11)选择列表


<select><option></option></select>

 

(12)其他
<b>...</b>粗体字  
<strong>...</strong>粗体字(强调)
<i>...</i>斜体字 
<em>...</em>斜体字(强调) 
<u>...</u>底线  
<strike>...</strike>横线 
<s>...</s>删除线 


<del>...</del>删除线(表示删除)

 

3、html属性
需要注意:
1、属性总是以名称/值的形式出现,比如:name="value"。
2、属性总是在 HTML 元素的开始标签中规定。
3、属性值应该始终被包括在引号内


举例:

 

1、HTML 链接由 <a> 标签来实现,链接的地址在 href 属性中指定:
<a >This is a link</a>
而Target属性指定了所链接的文件出现在哪一窗口。是以下四类值:
<a href=url target=_blank> 显示一个新窗口  
<a href=url target=_self> 显示在同一个窗口
<a href=url target=_parent> 显示在Frameset的前一份文件的窗口


<a href=url target=_top> 显示在整个浏览器窗口

 

2、<body>.....</body>属性 
背景属性  包括:bgcolor,background 
文字属性:包括:text,link,alink,vlink,
.link连接文字颜色(可连接文字颜色)  
.alink活动连接文字颜色(正被点击的可连接文字的颜色)  


.vlink已访问连接文字颜色)(已经点击访问过的可连接文字的颜色)

 

3、input元素


<input type=""> type属性的可选值有:  

 

(1)text 单行文本框属性:
name 文本框名称  
value 文本框的初始值  
size 文本框的长度 


maxlength 可输入字符串最大的长度  

 

(2)radio 单选框  
属性:name 单选框名称 
value 内部值  


checked 默认选定 

 

(3)checkbox 复选框 
属性:name 复选框名称 
value 内部值 


checked 默认选定 

 

(4)reset 重置按钮,submit 确定按钮 

属性:name 按钮名称 


value 显示在按钮上的文字  

 

(5)password 密码框  属性与文本框的属性完全相同  

 

(6)file 文件域  属性:
name文件域名称  
size 文件域的长度  
maxlength 文件域可接受的字符数量的上限  
hidden 隐藏域  
属性:name 隐藏域名称  


value 内定值  

 

(7)image 图片域  属性:name 所要代表的按钮,可以是submit,reset,或其他. 

 

4、select<select name="" size=""multiple></select> 
name 指定列表框的名字  
size 指定列表框显示列表项的条数,如果指定了该参数,select元素是个列表,否则是一个下拉列表框  multiple 指定了这个参数,则表示该列表框可选择多项,否则只可选择一项  
option属性语法格式:<option value="" selected></option> 
value 该列表项的值  selected 如果设定了这个参数,默认为选定这一项  
多行文本框多行文本框多行文本框多行文本框<textarea>  <textarea name="" cols="" rows="" wrap="off/physical/virtual"></textarea>  


属性:  name文本框的名称  cols文本框的宽度  rows文本框的高度  wrap文本框的折行方式可选值有:

 

四、特殊符号的表示:
1、显示一个空格 &nbsp;
2、< 小于 &lt;
3、> 大于 &gt;
4、" 双引号 &quot;
5、& 符号&amp;


标签:知识 总结 

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。本文出自“wpf之家”,请务必保留此出处:http://www.wpf123.com

相关评论
Copyright © 2009-2014 WPF之家(http://www.wpf123.com/) All rights reserved
 Powered by WPF之家
鄂ICP备13006396号