Html笔记

来源：互联网发布：linux 复制一份重命名编辑：程序博客网时间：2024/06/06 03:03

Html介绍

Html(hyper text markup language)超文本标记语言

Html是一种标准-----w3c

超文本：在文本内容的基础上，添加更加的丰富的信息（图片，动画，声音等）

标记（标签）---<单词>

挨着<是标记

标记通常有两次含义：

表型：每一个标签都有一定表现形式

表意：每一个标签有一定的意义

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

Html的标签分类

双标签：开始标签和结束标签构成，内容放入开始标签和结束标签之间

语法：<标签属性名=”属性值”> ……内容…..</标签>

属性理解人的特征性别=”女”体重=”45”身高=”165”

例如 <div></div> <a></a> <html></html>

单标签：只有开始标签，没有结束标签，没有内容,在单标签的后面一定要闭合

语法：<标签属性名=”属性值”属性名=”属性值”/>

例如 <link /> <img /> <br /> <meta />

Html基本骨架结构

<html>

<head>

<title>网站的标题</title>

</head>

<body>

</body>

</html>

html文件的扩展名是 XXX.html-----保存XXX.html

html结构说明：

<html>含义：告诉浏览器，网页的代码用什么格式来解析
<head>含义：告诉浏览器网页的汉子用什么字符集，使用的字符集不正确，就会出现乱码 gb2312 简体中文 ----（汉字操作系统默认使用的）gbk国标码 utf-8多国语言
<title>含义：便于搜索引擎
<body>含义：网站的内容，99%的内容都放入body标签中，只有放入该标签，才能在窗口显示

注意：tab键可以缩进

Html的书写规范

Html不区分大小写，但是w3c使用的是小写 <body> 不推荐<BODY>
Html如果有标签嵌套，顺序嵌套，不能交叉
单标签一定要闭合（/）例如 <br />
属性：每一个标签有没有属性，有多少---w3c规定好的
属性值：双引号引起

Html注释

注释的内容不在窗口中显示

<!—注释内容-->

Html文本标签

Font 设置文本的颜色文本的字体文本的大小

<font>设置的内容</font>

属性

Color设置文本的颜色例如color=”red” color=”#ff0000”

Size 设置文本的大小例如 size=”5”是以号为单位

Face 设置文本的字体例如 face=”隶书”

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

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

<u></u> 下划线

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

<sup></sup>上标

<sub></sub>下标

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

Html段落的标签

<p></p> 一段

段落的属性

Align 取值 left center right

<h1></h1> 标题1

<h2></h2> 标题2

。。。

<h6></h6>标题6

标题的属性

Align 取值 left center right

Pre标记：预定义标签，保留原有的空格和换行

Div ：是网站上使用的标签最多之一，本身没有任何意义，自己独自一行，结合css样式一起使用，构成相应的效果块标签

Span 本身没有含义，但是也是网站使用最多标签之一，结合css一起使用构成功能，行内标签

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

那些属于块标签 <h1></h1>…<h6></h6> <p></p> <div></div>

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

那些属于行内标签 <em><span><i><u>

注意：下面的写法不推荐使用，通常块标签里面包括行内标签

无序列表

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

语法：

<ul>

</ul>

Ul的属性

type 类型设置列表前面符号的样式取值 circle disc默认 square

有序列表

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

语法：

<ol>

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

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

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

</ol>

自定义列表

<dl>

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

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

</dl>

特殊字符

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

&copy；版权

< <

> >

¥ ¥

图片标签（单标签，行内标签）

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

图片的属性

图片的路径 src=”图片的地址”（图片要放到同一个站点下，放同一个文件夹下）
图片的宽度 width=”数值” 以像素为单位的px,不写单位例如width=”300”
图片的高度height=”数值”以像素为单位px 例如 height=”200”
图片的边框border=”数值”
图片的解释说明alt=”对图片的描述内容”
图片和内容左右之间的距离 hspace=”数值”
图片和内容上下之间的距离 vspace=”数值”（了解，css样式实现）

注意：图片等比例缩放，只设置宽度或高度

要求：插入一张图片图片的宽度为200像素，高度为160像素，边框为1

表格介绍

语法：

<table>

<tr>

</tr>

<tr>

</tr>

</table>

通常表格<table></table>包括行 <tr></tr>行里面包括单元格 <td></td>

注意：内容一定要放入最底层的标签里面

表格的<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”(不建议使用)

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

需求：插入两行五列的表格，表格的宽度为1000像素，表格居中显示，表格的边框为默认，在第一行的每一个单元格中放入图片，图片的宽度为190像素，高度为160像素，第二行放入内容

<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”横向合并三个

上面的表格纵向合并rowspan=”数值”例如rowspan=”3”纵向合并3个

Rowspan=”2”

链接

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

属性

链接的地址 href=”链接的地址url”,url 绝对地址相对地址
Target 打开目标文件的窗口

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

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

Name 定义锚点的名称

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

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

本地的地址 ----在你的本机上测试

相对地址

在同一个站点下，在同一个文件夹

目标文件和当前文件在同一个目录，直接写文件名称
目标文件在当前文件的下一级目录，XX表示文件夹名 XX/文件名称
目标文件在当前文件的下两级目录 xx/xx/文件名
目标文件在当前文件的上一级目录 ../文件名称
目标文件在当前文件的上两级目录 ../../文件名称上三级../../../文件名称

特殊链接

下载链接

那些文件不用下载可以直接做链接 .html .jpg .gif

那些文件必须下载链接 .zip .exe

邮件链接

空链接

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

Javascript链接

Name定义锚点的名称

同一个页面的不同区域直接跳转

定义锚点

<a name=”自定义名称”></a> 在<a></a>不加内容，给链接中的target用

跳转锚点

Meta标签

描述网页文档属性

http-equiv 和name

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

字符集

为什么要有字符集，是因为计算机只能处理二进制数据。为了让计算机能识别人类语言(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： (多国语言编码)不同的字符，它会选择合适编码来进行翻译。

<metahttp-equiv=”content-type”content=”text/html;charset=gbk”/>国标码

网页自动刷新

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

便于搜索引擎的需要

便于搜索引擎需要

网站的作者

表单的介绍

可以获取客户端的信息（数据），表单有各种各样的控件，输入框，复选框按钮等

表单的功能：交互功能

表单的工作原理：

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

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

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

表单的结构

语法<form 属性=”属性值”>

控件

</form>

表单的属性

Name 表单的识别名称一个页面有多处表单通过表单的识别名称来辨认你提交的是哪个表单的数据

Action=”XX.php”对数据进行处理

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

Method=”get/post”把表单中的数据提交到服务器端的方法，传递数据的方法

Get方法默认的一种传递数据的方法

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

特点

不能传递敏感的数据，密码
不能传递大量的数据，每次只能传递1024字节
不能上传附件

Post 方法，不是通过地址栏传递数据，数据传给文件处理程序

相对安全
可以传递海量的数据
能上传附件

控件

单行文本框(单标签，行内标签)

语法：<input type=”text”/>

属性：

Name 单行文本框的识别名称，是把输入框中的数据，提交到文件的处理程序
Size =”数值”输入框的宽度，是以字符为单位
Maxlength=”数值” 最多允许输入的字符数，如果超出范围，输入不进去
Value=”内容”设置输入框的初始值，在输入框中默认的数据信息

需求：邮箱输入框，输入框的显示30个字符

手机号输入框，输入框的显示25个字符，最多允许输入20个字符

可以自定义名称，要起得有意义，命名规则（开头是字母或下划线，后面可以是字母数字下划线） name=“username”

密码框

语法<input type=”password”/>

密码框的属性：

Name 密码框的识别名称
Size 密码框的宽度，以字符为单位
Maxlength允许输入的字符数，如果超出范围，不能输入进去
Value 初始值
Readonly 只读属性，只能选中，不能修改
Disable 禁止属性，不能选中，不能更改（firefox为准）

单选按钮

语法：<input type=”radio”>

单选按钮的属性

Name 单选按钮组的识别名称
Value 设置初始值，必须得写，每一项的值

复选框 ---（多选按钮）

语法：<input type=”checkbox”/>

属性

Name 多选按钮组的识别名称
Value 初始值，设置每一项值（数据）
Checked默认被选中，刚打开该网页就会选中该项 checked=”checked”

自己看的代码

点餐： <input type="checkbox" name="order" value="红烧肉" />红烧肉

<input type="checkbox" name="order" value="烤鱼" />烤鱼

<input type="checkbox" name="order" value="燕窝" /> 燕窝

<input type="checkbox" name="order" value="鱼刺" /> 鱼刺

多行文本框(双标签)

语法：<textarea></textarea>

name 多行文本框的识别名称
Value 不要出现value ，如果想显示默认的信息，在<textarea></textarea>直接输入
Rows 显示多少行内容例如 rows=”10”
Cols 一行显示多少个字符例如 cols=”60”

下拉列表

语法：

<option>给客户看的内容</option>

……

</select>

Select 属性

name 下拉列表的识别名称
value 代表每一项的初始值

自己练习的代码

<option >请选择企业的人数</option>

隐藏域

隐藏起来，不是给客户看，给程序用的

文件域

语法：<input type=”file”/>

文件域的属性

Name 文件域的识别名称
Value 不写value ，而是通过单击按钮来选择文件，选择的文件就是value中，value是只读属性

按钮

提交按钮

图片按钮（属于提交按钮的一种）

重置按钮

<input type=”reset”value=”按钮上的文本”/> 恢复到默认设置的状态

普通按钮 <input type=”button”value=”按钮上的文字”/>

本身没有任何功能，结合程序构成功能

Xhtml (可扩展的超文本标记语言)-----取代 html,pc机------当今面向的移动端设备

语法

Xhtml 语法要比html严格

Xhtml 输入的标签和属性必须是小写
Xhtml单标签后必须加 / 例如<br />
Xhtml 属性必须用双引号
Xhtml必须有dtd（document type definition）文档类型定义

Dtd （document type definition ）文档类型定义，是一种验证机制，检验的输入的xhtml是否符合规范

Dtd的分类

过渡型 xhtml1-transitional：允许使用表现的标签和属性

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

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

<b> <strong> <u> <tablewidth=”300”> 必须使用的是css样式来设置

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

框架型xhtml-frameset：给框架用

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

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

阅读全文

0 0