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

zoukankan html css js c++ java

如鹏网静态Web开发第一章：html
第一章：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>

特殊字符

如果要在网页上显示一些特殊符号，比如< > & 等。因为这些符号在代码中会被浏览器识别并解释，所以用一些特殊的方式来表示。

< < " "   空格

> > ® ® ™ ™

& & © ©

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

列表标签

无序列表

<ul>    

<li>游戏</li> <li>部门</li>

</ul>

注：ul中 type 属性有三个值 [ circle|disc|square ]，用于规定列表的项目符号，但不赞成使用。

有序列表

<ol>   

<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
查看全文

相关阅读:
study os
open source [license]
work serises------------patch
interest in history-----------先秦
 python学习-----------argparse
problems fixed
work serises------------adb 使用
 零碎积累之--------------java环境相关
 Hash Table Five Finish
Hash Table Four

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

<	<	"	"		空格
>	>	®	®	™	™
&	&	©	©

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

第一章：html

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