Html知识点

来源：互联网发布：淘宝卖爱奇艺会员编辑：程序博客网时间：2024/06/05 02:09

Html是一种标准

超文本：在文本内容基础上，添加更丰富的信息

标签-<单词>

语言:可以直接被浏览器解析，和程序语言不一样

标签分类:

双标签：<标签属性名="属性值">内容</标签>

单标签：只有开始，没有结束，没有内容

语法:<标签属性名="属性名"/ >

基本骨架：

<html>

<head>

<head>

<body>

</body>

</html>

·<html>含义：告诉浏览器网页代码用什么格式解析

·<head>含义：告诉浏览器网页的汉字含义用什么字符集

gb2312简体中文(汉字操作系统默认) gbk国标码 utf-8多国语言

保存时ANSI就是gb2312

·<title>含义：便于搜索引擎搜索

·<body>含义：内容

html书写规范：

·html不区分大小写，但是w3c使用小写<body>

·html标签如果嵌套、顺序嵌套，不能交叉

·单标前一定要闭合<br/>

·属性：每一个标签有没有属性，有多少-w3c

·属性值：双引号

html文本标签：

·font 设置文本颜色、字体、大小

注释：

常用标签：

<b></b>加粗

<strong></strong>加粗加强语气

<i></i>倾斜

<em></em>倾斜加强语气

<u></u>下划线

<ins></ins>插入的是文本

<sup></sup>上标

<sub></sub>下标

注意：一定要顺序嵌套，不能交叉

<p></p>一段

段落的属性

Align 取值 left center right

....

<pre></pre>预定义格式标签保留原有空白

<div></div>独占一行结合css样式一起使用构成相应效果

span 行内标签

块标签：输入完标签之后，自己独占一行

行内标签：输入完标签之后，不是自己独占一行

通常块标签内包括行内标签

<p align="center"></p>段落居中

列表：

无序列表

就是若干个相似的内容进行排列，没有先后顺序

语法：

<ul>

</ul>

· 搜狗

· 输入法

有序列表

若干个相似的内容进行排列有先后顺序

语法：

<ol>

<li>谁在鼓吹2017年房价下跌？</li>

<li>赵海均:明星并购价值有几何</li>

<li>股市暴跌，到底发生了什么?</li>

</ol>

1谁在鼓吹2017年房价下跌？

2赵海均:明星并购价值有几何

3股市暴跌，到底发生了什么?

自定义列表

<dl>

<dt>自定义列表标题</dt>

<dd>对该标题进行描述</dd>

</dl>

特殊字符

&nbsp；一个空格，代表一个字符，一个汉字占两个字符

&copy；版权

< <

¥ ¥

图片标签(单标签行内标签)：

图片的语法：<img 属性名=”属性值” />

图片的语法：<img 属性名=”属性值” />

图片的属性

·图片的路径 src=”图片的地址”（图片要放到同一个站点下，放同一个文件夹下）

·图片的宽度 width=”数值” 以像素为单位的px,不写单位例如width=”300”

·图片的高度height=”数值” 以像素为单位px 例如 height=”200”

·图片的边框border=”数值”

·图片的解释说明alt=”对图片的描述内容”

·图片和内容左右之间的距离 hspace=”数值”

·图片和内容上下之间的距离 vspace=”数值” （了解，css样式实现）

表格：

<table>

表格的边框border=”数值” 默认是0

表格的宽度 width=”数值”

表格的高度height=”数值”（w3c推荐不建议使用高度）

表格的居中方式 align=”水平对齐方式” 取值 left center right

表格中的内容和单元格之间的距离 cellpadding=”数值” 默认数值是2像素

表格中单元格和单元格之间的距离 cellspacing=”数值” 默认数值是2像素

表格的背景颜色 bgcolor=”颜色值” 例如 bgcolor=”red”

表格的背景图片 background=”图片的地址”（背景图片不能含有中文）---修饰的作用

表格的合并边框线 rules=”all” (w3c不推荐使用，css样式来实现)

表格的边框颜色 bordercolor=”颜色值”例如 bordercolor=”#ff0000”(不建议使用)

注意：背景图片的优先级高于背景颜色

<tr>的属性

Height 行的高度例如 height=”300”

Bgcolor背景颜色例如 bgcolor=”blue”

Background背景图片例如 background=”images/33.jpg”

Align 水平对齐方式例如 align=”left //center//right” //或者Valign

垂直对齐方式例如 valign=”top //middle //bottom”

单元格的属性

Bgcolor 背景颜色

Background 背景图片例如 background=”images/XX.jpg”

Width 单元格的宽度例如 width=”300”

Height 单元格的高度例如height=”40”

Align 内容在单元格中的水平对齐方式 align=”left/center/right”

Valign 内容在单元格中垂直对齐方式 valign =”top/middle/bottom”;

表格的扩充

横向合并左右合并（若干个单元格合并成一个单元格）

Colspan=“数值” 例如colspan=”3” 横向合并三个

链接

语法：<a 属性=”属性值”>内容</a>

链接的地址 href=”链接的地址url”,url 绝对地址相对地址

Target 打开目标文件的窗口

_blank 在新的窗口中打开目标文件

_self默认的打开方式，在原来的窗口中打开目标文件（原来的窗口被覆盖）

Name 定义锚点的名称

绝对地址（网络地址）---http:

语法<a href=http://www.taobao.com>淘宝</a>

相对地址

目标文件和当前文件在同一个目录，直接写文件名称

目标文件在当前文件的下一级目录，XX表示文件夹名 XX/文件名称

目标文件在当前文件的下两级目录 xx/xx/文件名

目标文件在当前文件的上一级目录 ../文件名称

目标文件在当前文件的上两级目录 ../../文件名称上三级../../../文件名称

下载链接

邮件链接

空链接

在当前页面做链接 <a href=”#”>链接的内容</a>

Javascript链接

字符集

为什么要有字符集，是因为计算机只能处理二进制数据。为了让计算机能识别人类语言(0-9、a-z、A-Z、特殊符号)，我们就需要对这每一个字符进行“编码”。所谓“编码”就是：每一个字符，可以用不同的二进制来表示。

假设：A 用二进制表示 1000， B 用二进制表示 1001

ASCII编码：用1个字节(8位二进制)来表示所有字符，共可以表示 2^8 = 256 。

ANSI编码：其它国家，都对ASCII编码进行扩展，用于显示本国的语言。

在中文操作系统 gb2312

繁体操作系统 big5

用2个字节(16位二进制)(来表示，共可以表示 2^16 = 65536个字符。

Gb2312 收入了6763个汉字

GBK编码：对GB2312进行扩充，收录了一些冷门字、罕见字、古汉语等。。。大约2.1万个汉字

Unicode编码：计划将世界上所有字符统一编码，用4个字节(32位二进制)来表示一个字符。

它的缺点：编码表文件太大了，不方便使用。用32位二进制表示一个字符，造成空间极大浪费。

UTF-8： (多国语言编码)

不同的字符，它会选择合适编码来进行翻译。

Meta标签

描述网页文档属性

http-equiv 和name

http-equiv :模拟的是http文件头信息，当内容从服务器端发送客户端，告诉浏览器如何正确显示信息

字符集

网页自动刷新

Name可以设置网页关键字，描述信息等

便于搜索引擎的需要

便于搜索引擎需要

网站的作者

表单介绍

可以获取客户端的信息（数据），表单有各种控件

单的功能：交互功能

表单的工作原理：

浏览有表单的页面，填写必要的信息，之后单击某个提交按钮

对表单中的数据进行验证，如果不符合制定的要求，提示验证没有通过，如果符合相应的要求，把数据提交到服务器端，数据放入数据库里面

看出，表单分为前台的制作页面，php对数据的处理，添加到数据中，删除数据，更改数据，查询数据等

表单的结构

控件

</form>

表单的属性

1.name 表单的识别名称

2.action="xx.php"对数据进行处理

action=""对表单中的数据处理的程序就是在当前的文档

3.method="get/post"把表单的数据提交到服务端的方法，传递数据的方法

get 默认的传递数据的方法

通过地址来传递表单中的数据

特点：不能传递敏感数据，密码

不能传递大量数据，每次只能传递1024字节

post方法数据传给文件处理程序

相对安全

可以传递海量数据

能上传附件

控件

命名规则：开头字母或下划线

1.单行文本框<input type="text"/>

属性：name="xx" 识别名称

size="数值" 输入框宽度(以字符为单位)

maxlength="数值" 最大长度

value="内容" 设置文本框初始值

2.密码框<input type="password"/>

属性：name="xx" 密码框名称

size="数值" 密码框宽度

maxlength="数值" 最大长度

value="内容" 设置初始值

readonly 只读，只能选中不能修改

disable 不能选中不能修改

3.单选按钮<input type="radio"/>

属性：name 单选按钮组的名称

value 初始值，每一项的值

4.复选框<input type="checkbox"/>

属性：name 多选按钮组的识别名称

value 每一项值

checked 默认被选中

5.文本域<textarea></textarea>

属性：name 识别名称

value(不使用，直接加在标签中间)

rows 行数

cols 一行多少个字符

6.下拉列表

</select>

属性：name 下拉列表识别名称

value 每一项的初始值

7.隐藏域<input type="hidden" name="xx"/>

隐藏起来给程序用

8.文件域<input type="file"/>

属性：name 文件域的识别名称

value不写，选择的文件就是value，只读属性

9.按钮

提交按钮<input type="submit" value="文字"/>

图片按钮<input type="image" src="路径"/>

重置按钮<input type="reset" value="文字"/>

普通按钮<input type="button" value="文字"/>

Xhtml(可拓展的超文本标记语言)-取代html

语法:

1.标签、属性必须小写

2.单标签后必须加/ <br/>

3.属性必须用双引号

4.必须有dtd(document type definition)

文档类型定义，验证机制，检验输入的xhtml是否符合规范

分类：

1.过渡型：允许使用表现的标签和属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.严格型：不允许使用表现的标签和属性

不能用<b><i><font color="red">必须用css设定样式

xhtml_strict 一处不标准解析不出来

3.框架型：给框架用

xhtml_frameset

可以通过该网址测试dtd声明 http://www.w3.org

阅读全文

0 0