码迷,mamicode.com
首页 > Web开发 > 详细

如鹏网 静态Web开发 第一章:html

时间:2016-03-06 17:34:51      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:

第一章:html

本章主干知识点:

1、最基本的html文件的格式是什么?

2、常用标签:font、列表(ul、ol、li)、img

3、表格标签:table、tr、td;表格的合并。

4、超链接、新窗口中打开的超链接、超链接锚点。

5、框架:frameset

6、表单:input(文本、radio、checkbox、隐藏字段、submit);select下拉列表;textarea;label;

7、div和span的区别。

------------------------------------------------------------------------------------------------

理解什么是HTML
了解HTML的发展史
掌握HTML编程规范
掌握HTML常用标签
 
HTML基本介绍
HTML(Hyper Text Markup Language)
-超文本标记语言
-由浏览器解释执行
-编写的超文本文档称为网页
XHTML
-HTML升级到XML的过渡产品
-完全兼容HTML4.01
-并且具有XML的语法
 
HTML标签规范
HTML是通过标签来定义的语言,代码都是由标签组成。
HTML代码不区分大小写
HTML代码由<HTML>开始</HTML>结束,里面有头部分<HEAD></HEAD>和体部分<BODY></BODY>两部分组成。
  头部分是给HTML页面增加一些辅助或属性信息,它里面的内容会最先加载。
  体部分是真正存放页面数据的地方。
  多数标签都是开始标签和结束标签,其中个别标签只有单一功能,或者没有要修饰的内容,可以在开始标签内以 "/" 结束。
 
  双标记标签:<html></Html>
  单标记标签:<br/> 没有要
想要对被标签修饰内容进行更丰富的操作,就用到标签中的属性,通过对属性值的改变,增加了更多的效果选择。
     格式:<标签名 属性名="属性值">数据内容</标签名>
 
HTML开发工具
可以使用专业的 HTML 编辑器来编辑 HTML:
•Adobe Dreamweaver
•Microsoft Expression Web
•CoffeeCup HTML Editor
不过对于初学者,我们推荐使用文本编辑器来学习 HTML,比如Editplus,Notepad++
 ------------------------------------------------------------------------------------------------------
HTML常用标签--字体
字体标签 <font>
例:<font color="red">HTML字体标签</font>,常见属性size color,还有其它属性,比如:face
标题标签 <H1></H1>...<H6></H6>
特殊字符
如果要在网页上显示一些特殊符号,比如< > & 等。因为这些符号在代码中会被浏览器识别并解释,所以用一些特殊的方式来表示。
&lt; < &quot; " &nbsp; 空格
&gt; > &reg; ® &trade;
&amp; & &copy; ©

 

 

 -------------------------------------------------------------------------------------------

列表标签
 
无序列表
<ul>    <!-- 符号标签(○●■)-->
  <li>游戏</li> <li>部门</li>
</ul>
注:ul中 type 属性有三个值 [ circle|disc|square ],用于规定列表的项目符号, 但不赞成使用。
有序列表
<ol>   <!-- 数字标签(a A 1 i I)-->
  <li>游戏</li>
  <li>部门</li>
</ol>
注:ol中 type 属性同样不赞成使用。
如果想做出效果更好的列表,如:黑色圆点用图片表示,就用到CSS。
 
定义列表(definition list)
<dl>
  <dt>游戏</dt>
<dd>穿越火线</dd>
<dd>英雄联盟</dd>
  <dt>部门</dt>
<dd>研发部门</dd>
<dd>销售部门</dd>
</dl>
----------------------------------------------------------------------------------------------- 
图像标签
 
图像标签 <img>
例:<img src="1.jpg" 
    border="3px"
    title="鼠标移动上提示文字"
            alt="图片说明文字"
               width="500px"
    height="200px"/>
src:图像URL地址;border用来设置图像的边框;alt:用来为图像定义一串预备的可替换的文本,不能超过1024字符。
 
 --------------------------------------------------------------------------------------------------------
表格标签
 
表格标签 <table>
用于格式化数据。
例:<table border width cellpadding cellspacing>
  <caption>标题</caption>
  <thead>
     <th>姓名</th>  <!--对表格的第一行或者第一列进行 -->
     <th>年龄</th>  <!--格式化,就是粗体居中显示 -->
  </thead>
  <tbody>
    <tr>  <!--行标签 -->
      <td>张三</td><td>20</td>  <!--单元格标签 -->
    </tr>
    <tr><td>李四</td><td>25</td></tr>
  </tbody>
    </table>
 
 
<table>常用属性
caption:标题
 
border:框线粗细 0代表无
width:宽度 接收整数值百分数
cellpadding:单元格内容与边框的距离
cellspacing:单元格与相邻单元格之间的距离
 
<td>常用属性
colspan:合并同行单元格
rowspan:合并同列单元格
 
<th>默认居中,加粗
 
每个表格可以有一个表头、一个表尾和一个或多个表体 (即正文)
•THEAD
•TBODY
•TFOOT
TBODY 可以控制表格分行下载,从而提高下载速度(网页的打开是先表格的的内容全部下载完毕后,才显示出来,分行下载可以先显示部分内容,这样会减少用户等待时间)。
---------------------------------------------------------------------------------------------------------- 
超链接标签
超链接标签 <a>
超链接(Hyperlink)可以看做是一个“热点”,它可以从当前Web页定义的位置跳转到其他位置,包括当前页的某个位置、Internet、本地硬盘或局域网上的其他文件,甚至跳转到声音、图片等多媒体文件。浏览Web页是超链接最普遍的一种应用,通过超链接还可以获得不同形态的服务,如文件传输、资料查询、电子函件、远程访问等等,通过超链接实现这些功能就会很方便。
 
用法一:超链接 <a href="">
<a href="http://www.163.com" target="_blank">网易</a>
href:要打开资源的路径,可以是URL,也可以是本地文件。
target:指定在哪个窗口或者帧中打开。有四个值:
  •_blank:在一个新开的空白窗口中打开链接
  •_parent:在父级窗口中打开
  •_self:在自身页面中打开链接(默认)
  •_top:在整个浏览器的最顶端(前端)开始打开链接
 
用法二:定位标记  <a name="">
链接到同一文档中的特定位置叫做定位标记(锚链接)。一般在本页面中使用,当网页内容过长,定位标记会比拖动滚动条方便快捷。
注:定位标记要和超链接结合使用才有效。
示例:
<a name= "标记" >标记位置</a>
<p>…….<!--很多空行以制造网页过长的效果 -->
<a href= "#标记">返回标记位置</a>
注释:使用定位标记时一定在href值的开始加入#标记名
 
 
用法三:定义标记点  回到顶端
 -------------------------------------------------------------------------------------
HTML常用标签--框架
所谓框架便是网页画面分成几个框窗,框窗里可以集成很多Url(链接地址),方便用户浏览,查看.特别是早期的公司门户网站基本都是这种frame框架。
 
<html>
<frameset rows="20%,*">
  <frame src="top.html">
  <frameset cols="25%,75%">
    <frame src="left.html">
    <frame src="right.html">
  </frameset>
</frameset>
</html>
 
所有框架标记 要放在一个总起的 html 档,这个档案只记录了该框架 如何划分,不会显示任何资料,所以不必放入 <BODY> 标记。
 

<frame>常用属性 src="top.html":设定此框窗中要显示的网页档案名称,每个框窗一定要对应著一个网页档案。 name="top":设定这个框窗的名称,这样才能指定框架来作连结,必须但任意命名。 scrolling="auto":设定是否要显示卷轴,YES 表示要显示卷轴,NO 表示无论如何都不要显示,AUTO是视情况显示。 noresize:设定不让使用者可以改变这个框框的大小,亦没有设定此参数,使用者可以很随意地拉动框架,改变其大小。

 

<NOFRAMES> 当使用的浏览器太旧,不支援框架这个功能时,他看到的将会是一片空白。为了避免这种情况,可使用 <NOFRAMES> 这个标记,当使用者的浏览器看不到框架时,他就会看到 <NOFRAMES> 与 </NOFRAMES> 之间的提示内容,而不是一片空白。 <frameset rows="80,*"> <noframes> <body> 很抱歉,您使用的浏览器不支持框架功能,请转用新的浏览器。 </body> </noframes> <frame name="top" src="a.html"> <frame name="bottom" src="b.html"> </frameset>

 

<IFRAME> 它的作用是在一页网页中间插入一个框窗以显示另一个链接资源。它是一个围堵标记,但围着的字句只有在浏览器不支持 iframe 标记时才会显示。 <body> <iframe src="a.html"> 如果您看到该文字,说明您的浏览器不支持IFRAME标签。 </iframe> </body>

 

---------------------------------------------------

表单 <form>

    action:表单提交请求的地址

           method:表单请求参数提交方式,默认get

        get:

        post:

    

表单标签是最常用的标签,主要用于采集和提交用户输入的信息,与服务器端进行交互。

<INPUT>标签:接受用户输入信息 <input type="text" value="" /> type标签指定输入标签的类型,共有10个值:

文本框text、

密码框 password、

单选框radio    :单选按钮必须指定相同的name属性(和提供value值)

复选框checkbox  :复选按钮必须指定相同的name属性(和提供value值)

隐藏字段hidden  :该属性值可以让input标签在页面内隐藏,但它的name value同样随着表单提交 。

提交按钮submit、重置按钮reset :

按钮button、文件上传file:

图像 image.

 

<SELECT>标签:

定义一个选择列表

<select name="city">

<option value="1">北京</option>

<option value="2">郑州</option>

</select>

注:<option>:定义下拉列表中的选项,属性 selected 没有属性值 加在其中一个子项上,该子项就变成默认被选中项。

 

<TEXTAREA>标签:

多行文本框

<textarea rows="3" rols="20"> </textarea>

cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。

<label>标签:

<label for="male">Male</label> <input type="radio" name="sex" id="male" />

<label for="female">Female</label> <input type="radio" name="sex" id="female" />

 

label 元素不会向用户呈现任何特殊效果。

不过,它为鼠标用户改进了可用性。

如果您在 label 元素内点击文本,就会触发此控件。for的属性值指向绑定表单元素的 id 值。

 

-------------------------------------------------

块元素

大多数 HTML 元素被定义为块级元素或内联元素。

   -块级元素 块级元素在浏览器显示时,通常会以新行来开始(和结束)。自动换行

例子:<h1>, <p>, <ul>, <table>

  -内联元素 内联元素在显示时通常不会以新行开始。

例子:<b>, <td>, <a>, <img>,<input>

<DIV> <SPAN>

DIV

HTML DIV 是块级元素,它是可用于组合其他HTML元素的容器。 默认占满一行

DIV元素没有特定的含义。与CSS一起使用,可用于对大的内容快设置样式属性。

<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

使用 <table> 元素进行文档布局不是表格的正确用法。

<table> 元素的作用是显示表格化的数据。

SPAN

HTML <span> 元素是内联元素,可用作文本的容器。默认匹配文本长度

<span> 元素也没有特定的含义,当与 CSS 一同使用时,可用于为部分文本设置样式属性。

 

----------------------------------------------------

HTML语法--头标签

title:指定浏览器标题栏显示的内容

base:标签为页面上的所有链接规定默认地址或默认目标

    href属性:规定页面中所有相对链接的基准 URL(不常用)

    target属性:指定打开超链接的方式

   <base target="_blank" href="http://www.cnblogs.com/" />

meta:可提供有关页面的元信息

  http-equiv属性:把 content 属性关联到 HTTP 头部

  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

  <meta http-equiv="Refresh" content="3;url=http://www.baidu.com"/>

  content属性:定义与 http-equiv 或 name 属性相关的元信息

  name属性:把 content 属性关联到一个名称

link:

  rel属性:目标文档与当前文档的关系

  type属性:文档类型

  href属性:文档地址

 <link type="text/css" rel="stylesheet" href="site.css">

如鹏网:http://www.rupeng.com

如鹏网 静态Web开发 第一章:html

标签:

原文地址:http://www.cnblogs.com/wjs5943283/p/5247842.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!