HTML 4.0笔记（精华浓缩版）

最新推荐文章于 2024-09-10 14:15:01 发布

XX_Liang

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量579

点赞数

分类专栏： HTML 文章标签： html 脚本语言前端

本文链接：https://blog.csdn.net/u010357182/article/details/46674479

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<span style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">基于自学所得到的HTML 4.0的知识总结</span>

HTML（Hypertext markup language超文本标注语言）作为一种静态语言，像Css、Javascript一样被浏览器识别并翻译成我们预期的表现形式呈现到上网的人眼前（像我们现在所看到博客的页面，这里的表格顶端的注册“链接”），其内容被保存为.htm/.html形式的文件。

关于前端这三者的脚本语言的关系，可以用以下的说法来形容：

HTML——人的骨架；

CSS ——人的皮肤，外貌或穿着；

Javascript——人的某个动作，例如抬脚、拍打、蹲下、跳起等；

Jquery ——人的一系列动作集合，也就是说javascript是它的基础，这个集合是编排好的一系列动作，如带球上篮。

如果没有这某个预期动作的集合，就需要利用javascript来整合。

另外，类似java、php和mysql等偏后端类语言，浏览器是不会直接翻译他们的（在朋友的角度来说，就是与它们不熟悉），需要服务器端的服务器软件Apache进行解释成HTML（浏览器可识别语言）来返回给浏览器。

关于工具：HTML的工具很多，如Dreamwear、Zend Studio(集成化的开发环境)，Edit Plus、Notepad++、Sublime text（知乎评价好高~），涉及到字体设置、站点设置和浏览器设置。在知乎和各大论坛都有看，各种工具都有优缺点，感觉是习惯问题，现在在用笨重而经典的DW，正在转入Sublime text。

<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
<span style="white-space:pre">	</span><head>
<span style="white-space:pre">	</span>.......
<span style="white-space:pre">	</span></head>

<span style="white-space:pre">	</span><body>
<span style="white-space:pre">	</span>......
<span style="white-space:pre">	</span></body>
</html>

DOCTYPE是告诉浏览器如何用哪种方式解释这个网页（严格型、过渡型或是框架frameset类型），这是Html4.0里的定义，可以留意在HTML 5.0里面这个DTD定义有什么欢乐的变化！！！

以上是静态页面的基本结构，<html><head><body>标签是Web网页基本而不可缺失的三元素。

关于XHTML：

XHTML是HTML的规范版本，

1)所有标记元素都要正确的嵌套，不能交叉嵌套。

2)所有的标记都必须小写。

3)所有的标记都必须关闭。

双边标记：<span></span>

单边标记：<br> 转成 <br /> <hr> 转成 <hr /> <img src=“URL” />

4)所有的属性值必须加引号。<font color=“red”></font>

5）所有的属性必须有值。<hr noshade=“noshade”>

6）XHTML文档开头必须要有DTD文档类型定义

DTD，Document Type Definition文档类型定义，是一套标记的规则，理解为一种“验证机制”。

<head></head>常出现的元素：

** <meta /> 单边标记：提供基础信息，比如：关键字、描述信息、作者、网页刷新、网页过期期限、网页字符集；

常用且必有：字符集的设置（确保浏览器在哪国的语言机制下都能正确翻译）

解决网页乱码的一个问题，要保证各个环节的字符编码集的一致性：

（1）编辑器的编辑环境的字符集设置（默认字符集）；

（2）<meta> 标记的字符集的设置；

（3）后端语言PHP的字符集设置；

（4） Mysql里面的字符集设置；

name：描述信息，指定网页关键字、网页描述、作者、版权信息

网页自动刷新：<meta http-equiv=“refresh”content=“3” /> 3秒自动刷新网页

延迟一定时间后跳转：<meta http-equiv=“refresh” content=“3;url=http://www.sina.com.cn” />

设置网页的关键字：<meta name=“keywords” content=“学习笔记，WEB前端总结” />

网页描述：<meta name=“description” content=“WEB前端的学习笔记" />

网站作者：<meta name=“author” content=“CodingCat” />

**<style type="text/css" > ...</style>

插入层叠样式表来实现网页某些html结构的变现

<body></body>里的元素：

99%的Html元素都在这里面编写。

**<body></body>标签的属性：

bgcolor 背景颜色
background 背景图片
marginwidth 页边留白宽度
marginheigth 页边留白高度

另外：如何理解属性？

属性就像我们买一件衣服<clothes><clothes>，我们都会想要知道更多一点东西，面料是什么？颜色是什么？款式是属于长款还是短款？？来利用这些”属性“确定我们是否想用钱来买这件衣服。而用于Html中的标签也一样，其该有的属性都会存在，如果不确定名称可以到HTML手册查询。

** 常用字符实体

空格： 

> : >

< : <

& : &

人民币：&yem;

版权： ©

乘号： ×

除号： ÷

** 常用标签

换行符<br />

水平线<hr /> 属性有：size（线的粗细）、width(线的宽度)、noshade(="noshade") ；

加粗 <b></b>

斜体 <i></i>

上标 <sup></sup>

下标 <sub></sub>

删除线<em></em>

段落 <p></p> 属性有：align 水平对齐方式；该标签段落前后空一行；

标题标记<h1></h1> ----><h4></h4>

空格格式保留<pre></pre>

浮动<marquee></marquee>

项目标签：无序项目标签、有序项目标签

①无序项目标签

<ul>
<li>...</li>
<li>...</li>
</ul>

属性：Type 可以用于<ul>或<li>标签中，值为：disc（实心圆点）、circle(圆圈)、square（方块）；

②有序项目标签

<ul>
<li>...</li>
<li>...</li>
</ul>

属性：Type 编码类型，值为：1、A、a、I（大罗马数字）、i（小罗马数字）；

Start 从第几个开始，值为数字；

定义列表：其实是一个小标题+一段解释

<dl>
<dt>....</dt>
<dd>....</dd>
</dl>

图片（图片热点）：

超级链接：
链接在网页中充当着一个很重要又很常用的功能。在《Head First》里面它作为第一个被介绍的元素出现；超级链接分为很多种——文字链接、图片链接、锚点链接（例如在浏览网页，到了底部以后按某个特定区域就能返回到顶端或者中部）

<a></a>标签属性：

herf——目标地址URL（Uniform Resource Lacator 统一资源定位器）
（1）平级关系，直接写文件名；
（2）目标文件在下一级：文件名/目标文件；
（3）目标文件在上一/x级:../或者../../文件名

ID/Name——主要用于设置一个锚点；

Target—— 跳转到另一种页面的方式；

_blank 在新窗口中打开目标文件，原窗口不关闭；

_self 在当前窗口中打开目标文件；

_top 在顶层窗口打开目标文件，常用于“框架模式”中；

_parent在父级窗口中打开目标文件，常用于“框架模式”中；

_name 在特定窗口中打开目标文件，常用与“框架模式”中；

①邮件：<a href="mailto: 邮箱地址">内容</a>；

②下载链接：<a href=“ 目标文件”>内容</a>；

任何网页 不能直接执行的文件 ，都会出现下载对话框。网页可以直接执行的文件： .html .jpg .png .gif .htm；

③空连接:<a href="#"> 内容</a>；

④JS形式空连接：<a href="javascript:void(0)">内容</a>；

⑤JS形式警告窗口：<a href="javascript:alert（'警告内容'）"> 内容</a>；

浏览器兼容问题在⑤里面会有明显的呈现，同时也知道了以前网站制作的警告原来是这样做出来的~用户体验性

不强，有点丑和没有亲和度，这就是HTML5和CSS3出现的必要性！！！

⑥锚点链接：在目标位置：<a name="name" id="name"></a> 在这里作个标志，就像你在丛林中刻一个定位；

在某个位置：<a href="#name">回到目标位置</a> 去你想去的位置，类似多啦A梦传送门；

表格定义：

<table>
<tr>
<td> </td>
<td> </td>
</tr>

<tr>
<td> </td>
<td> </td>
</tr>
</table>

两行、两列，在没有内容的时候需要加" "才能看到表格的占据，如果什么内容都没有，表格不会显示；

<table>标签属性：width ——表格宽度

height ——表格高度

border ——表格的边线粗细

bordercolor ——表格的边线颜色

align ——水平对齐的方式（left、right、center、top和bottom）

bgcolor ——表格背景颜色

background ——表格背景图片

cellspacing ——单元格与内容之间的距离

cellpadding ——单元格与单元格之间的距离

为了得到更细小的线，会让单元格之间重合的线变成一条，利用CSS样式：style=border-collapse:collapse

<tr><td><th>标签属性： width ——单元格宽度，不存在每一行都不同的宽度，必须统一；以最大的宽度为准；

height —— 单元格高度；

bgcolor ——背景颜色；

background ——背景图片；

align ——水平对齐的方式（left、right、center、top和bottom）

valign ——垂直对齐的方式（top,middle,bottom）

colspan ——列组合，值为数字；

rowspan ——行组合，值为数字；

表单定义：用于收集用户信息（注册界面），用户数据提交的交互流程：

填写注册界面（数据来源、生成）
点击“提交”按钮
数据通过互联网http请求，传送到服务器，并根据域名-IP主机地址的映射关系找到主机；
服务器（主机）上有专门处理上传这种数据的程序（后端开发语言php,java），对传送过来的数据进行验证；
验证成功（true），直接插入数据库；验证失败(false)，返回错误；

<form>

用户名：<input type="text" name="username" id="username" size="30" maxlength="40" value="请输入用户名" />
密码：<input type="password" name="password" id="password" size="30" maxlength="30" />
<input type="submit" name="submit" id="submit" value="提交" />

</form>

这类似一个登陆界面的<form>形式，name与id同时写是考虑浏览器向前兼容性，晚点会详细po；name（id）的

值会发送到服务器，作为记录或者数据库存值依据，那么submit的name其实也可以不存，因为它只是发送的动

作，不需要检验存值；

size是长度，也就是边框的长度，默认值是20，size="30"就会有更长的边框显示出来，也可以说是显示出30个字

符；maxlength是最大长度，就是可输入40个字符，但不一定都在边框里面显示出来，这就是它们两者区别；

value属性，在type=text中是默认显示值，但在submit里面是边框显示值，如果没有value值，将会只有一个空按钮显示；

<form>标签属性：

name/id —— 表单名称，用于JS操作或控制表单的使用；

action —— 指定表单的处理程序，一般是php文件，如action="login.php"，提交就是交给这个文件处理~

method —— 分为两种：get和post ；这两种方式是有一定意义的；

GET：①提交的时候显示填写的数据，以“ name=value ”形式追加到 action 指定的处理程序的后面，

两者间用“ ? ”隔开。

如file:///E:/itcast/20140706/lesson/day4/login.php?username=admin&password=admin1234&submit=提交表单

只能提交字符，而且不超过100个字符，不可传送word附件，也不建议传送敏感数据，

避免受到截取而是数据不安全；百度和谷歌搜索用的get方式，有利于复制再作请求；

POST：②将表单数据隐藏发送到action指定的程序中，可以保证数据的安全，而且数据传输类型

可以多样化（word,excel,rar,img，gif等）；

③Enctype:表单数据的编码方式（加密方式）

Application/x-www-form-urlencoded默认加密方式：除了上传文件之外的数据都可以

Multipart/form-data：上传附件时，必须使用这种编码方式。

<input>类别

①单行文本框：用户名中、邮箱、QQ号、公司地址等

<span style="font-size:18px;"><input type="text" name="username" id="username" value="xx" size="xxx" maxlength=""  /></span>

②单行密码框：

<span style="font-size:18px;"><input type="password" name="password" id="password" size/maxlength /></span>

③单选框

<span style="font-size:18px;"><input type="radio" name="sex" id="sex" value="女士" checked="checked"/>女士
<input type="radio" name="sex" id="sex" value="男士" />男士
</span>

checked="checked"语句是表示默认选中；

④复选框：可以选一个，也可以选多个，存储在数组当中

<span style="font-size:18px;"><input type="checkbox" name="hobby" id="hobby" value="跑步" checked=“checked” />跑步
<input type="checkbox" name="hobby" id="hobby" value="游泳"/>游泳
<input type="checkbox" name="hobby" id="hobby" value="羽毛球"/>羽毛球
<input type="checkbox" name="hobby" id="hobby" value="旅行"/>旅行</span>

⑤文件上传

<span style="font-size:18px;"><input type="file" name="uploadfile" id="uploadfile" /></span>

如若考虑到信息安全，可以用JS对上传的数据进行检查，一是检查文件的扩展名（.doc等），二是检查文件内容；

⑥文本提交（如留言）

<span style="font-size:18px;"><textarea name="name" id="name" cols="宽度" rows=“高度”  values="默认文本" />默认显示文本</textarea></span>

⑦下拉列表

<span style="font-size:18px;"><select>
<option name="city" id="city" value="" selected="selected" />请选择所在城市
<option name="city" id="city" value="北京" selected="selected" />北京
<option name="city" id="city" value="深圳" selected="selected" />深圳
<option name="city" id="city" value="广州" selected="selected" />广州
</select></span>

⑧按钮

提交按钮：提交到action指定的文件，name不发送到服务器，可以不写

<span style="font-size:18px;"><input type="submit" value="注册" /></span>

重置按钮：清空所有项

<span style="font-size:18px;"><input type="reset" name="reset" id="reset" value="重新填写" /></span>

图片按钮：图片按钮默认的动作就是提交动作，图片按钮更加美观

<span style="font-size:18px;"><input type="image" src="URL" /></span>

普通按钮：普通按钮没有任何的动作，需要配合Js来实现相关功能

<span style="font-size:18px;"><input type="button" name="普通功能" id="普通功能" value="提交表单" </span>

<span style="font-size:18px;">οnclick="javascript:this.form.submit()" /></span>

以下是我做的一个注册表单（火狐），源码将存储于github：

框架：分为框架模式（在线参考册子、企业后台管理）和内嵌框架（相当于封装包的引用，提高可维护性）

①<frameset>框架：框架集 (<frameset>) 和框架页 (<frame>) 构成。

<frameset rows="60,*" frameborder="yes" border="1" bordercolor="#CCCCCC">
<!--将网页分成上下行网页-->

<frame src="xx.html" />
<frameset cols="180,*" >
<frame src="xxx.html" name="name1" scrolling="yes" Noresize="Noresize" target="<pre name="code" class="html" style="font-size: 18px; font-weight: bold;">xxxX.html<span style="font-family: 宋体;">" /></span>

另外，frameset框架与<body>标签框架是不会同时存在的，<frameset>标签的DTD也会定义成框架类型。

②嵌套框架：在网页中显示一个小窗口，并且写好的文件.html可以被多个网页利用<iframe>标签进行调用

<iframe src="../../WebsitePoint/annoucement.html" width="745" height="300" scrolling="no" frameborder="0" style="margin-right:5px"></iframe>

XX_Liang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录