HTML基础

最新推荐文章于 2024-05-23 11:23:05 发布

benben0729

最新推荐文章于 2024-05-23 11:23:05 发布

阅读量294

点赞数

文章标签： html

本文链接：https://blog.csdn.net/benben0729/article/details/80355753

版权

前端专栏收录该内容

49 篇文章 0 订阅

订阅专栏

html标记不区分大小写

html标记属性可有可无，有的标记没有属性，比如html\head\title等。

双边标记在开始与结束之间，单边标记没有内容

标记之间可以嵌套，但是必须顺序嵌套

高速浏览器如何翻译汉字，content内容类型详细内容类型介绍，网页text格式html小格式，charset字符集控制汉字显示 utf-8 多国语言编码

body属性

bgclolor :网页背景色 <bodybgcolor="">

background：网页背景图片<body background="image.jpg">

html 文本修饰标记

<b>加粗，如<b>html文件</b>

<title>标签只能是纯文本，任何修饰标记都会原封不动显示。

<i></i>斜体 italic

<em>表示被强调呈现的内容，<i>是物理上的斜体，没有内容上的意义

<u></u>下划线

<s></s>与<del></del>都是删除线

<sup>上标

<sub>下标

<font>字体标记，

size 文本大小取值1-7,1小7大

color：颜色值

face：字体，宋体、楷体等

中文操作系统默认字符集GB2312，使用记事本写的网页默认gb2312.

<p></p>表示一个段落，有一个属性align：left、right、center。

<br>换行标记

<hr>水平线标记单边标记

size:水平线粗细px

color:

width:

noshade；html里没有值。Noshade=”noshade”

<pre></pre>预排版标记，双边标记

功能：保留所有空白字符（空格、换行），原封不动输出。

<h1>~<h6>标题标记

功能：定义各种标题

属性（唯一一个）：align水平对齐right、left、center

参考手册使用方法：搜索；列出标题，显示。

&nbsp 半角空格，一个汉字两个半角空格。

<div>和<span>标记（宽度指的是横向的）

块元素div、p、h1、pre等。

<div>没有任何意义，但是使用最多的标记

<div>一般与css配合使用。

<div>是一个块元素

独占一行，不管内容多少，总是占一行

行元素 b、font、i、u、sub、sup等。

行内元素宽度根据内容决定

<span>也是没有任何意义，但是使用最多。

<span>是一个行元素，与css配合使用

不会占满一行，多个行内元素会排在同一行。

注意

在标记嵌套时，一般是块元素嵌套行元素

特殊符号处理方式：

空格: 

<:<

>:>

&:&

￥（shift+$/4）:¥

×:×

÷:÷

html项目符号

<ul>

</ul>

<ul>或者<li>常用属性：

Type:符号类型

disc（小黑点）

circle(空心圆)

square（实心方块）

<ol>

<ol>

<ol>或者<li>常用属性：

Type:符号类型

编号类型 type="" A\a\i\I\1;取值第一个

start:从第几个开始，必须是数字start="1\2\3....."

注意

（HTML中内容必须写在最底层，ul与li是块元素）

<marquee>滚动的内容</marquee>

属性：

direction：滚动方向right、left、up、down

width:滚动宽度

height:滚动高度

bgcolor:滚动背景色

scrollamount:滚动步长值，值越大滚动越快。

scrolldelay：两步之间停留时间

loop:循环滚动次数.

图片标记

<img 属性=“值”/>单边标记，行内元素

常用属性

width:图片宽度

height:图片高度

border:图片边框宽度

src：图片路径(相对路径)

hspace:图片与文字左右之间距离.水平距离

vspace：图片与上下文字之间距离。垂直距离

align：图片水平对齐方式，right、center、right。

align只能让文本居中，不能让图片居中。图片中align可以实现“图文混排”。

Alt:属性用来为图像定义一串预备的可替换的文本.<imgsrc="boat.gif" alt="Big Boat">在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

图片居中：

<imgsrc="D:/桌面/149293873062.jpg"width="400" height="200" border="6"align="center">

</div>

注意

如果只指定一个属性（width/height）等比例缩放

超链接<a></a>

属性：

href:目标文件的地址url，相对地址，绝对地址

target：目标文件显示窗口

_blank：在新窗口打开文件

_self：当前窗口打开文件相当于替换

_parent：在父级窗口打开文标文件

_top:在最顶级窗口打开目标文件

其中_parent _topa常用于框架网页

在<head></head>标签中加入<base target=”_blank”/>本页面中的所有超链接将会打开一个新的窗口，而不用每一个超链接标签去设置target属性。

name:定义锚点连接的名称

绝对地址url:

(1)远程绝对地址。

访问远程的文件，总是以域名、主机名开头

（2）本地绝对地址

访问本地的绝对地址是以file:///开头的绝对地址

file:///D:/BaiduNetdiskDownload/php/day2/pratice.html

相对地址url（项目中一般是相对路径）

(1)当前文件和目标文件是同级关系

（2）当前文件和目标文件所在文件夹是同级关系

(3)目标文件位于上一层目录中，往上找对应的目录，再找目录的文件。使用“../”符号表示。

特殊链接

什么样的文件会出现下载提示（那些文件上网页可以直接执行如：.jpg、.png、.gif、 .html、.htm、.php、.txt）

大部分文件浏览器不能直接执行如.doc、.xlx、.ppt、.rar、.psd

邮箱文件

<ahref="mailto:1713830600@qq.com">邮箱文件</a><br>

普通空连接

<ahref="#"></a>

添加js功能代码，关闭窗口

<ahref="JavaScript.window.close()">关闭</a>

firefox下如何使用window.close()?

网址栏：aboutconfig

搜索：close 双击使其变成true.

html颜色表示三种

颜色单词：blue,green,red,yellow

十进制:rgb(255,0,0)、rgb（0,255，0）rgb(0,0,255)

16进制#FF0000（红）、#00FF00（绿）、#0000FF（蓝）

十进制兼容不好，尽量少用。

十进制兼容不好，尽量少用主要用在css中。

锚点链接（是在一个网页的不同区域进行跳转，理解为一个记号）

定义锚点（做个记号）<a name="锚点名称"></a>

锚点命名规则：可以包含字母数字下划线但只能以字母开头。

例如<aname="top2"></a>

注意：<a></a>之间没有内容，换句话说这个记号不是让我们看的

跳转到锚点：

语法：<a href="文件名#锚点名称"></a>

文件名：可有可无，如果是同一个网页不同部分进行跳转，不需要文件名，如果跳到另一个网页的不同部分则必须要有文件名。

注意：这里的<a></a>要有内容，否则无法进行跳转

例如<a href="#top2">返回顶部</a>同一页面不同位置

<ahref="news.html#botton">跳转到news.html底部

编码

ASCII编码，其他国家，进行扩展用于显示本国语言

ACSI在中文操作系统下，代表GB2312

ACSI在繁体操作系统中，代表big5

ACSI在日文操作系统中，代表jis

用两个字节(16位)2^16=65536表示汉字

GB2312总共收录了6763个汉字

GBK编码是GB2312的扩充.

unicode编码：计划将世界上所有字符统一编码。

用4个字节（32位）表示一个字符，

缺点：编码表文件太大，不方便使用，空间极大浪费

utf-8：统一转换格式编码（多国语言编码）

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

<meta>标记

提供网页元信息，比如，指定网页的搜索关键字。

两个属性 http-equiv 和name

1.http-equiv属性

功能：模拟http协议文件头信息，当信息从服务器端传到客户端时，高速浏览器如何正确显示网页内容。

http-equiv属性一般与content属性配合使用，content属性指定信息的详细参数。

应用1：设置网页字符集

<metahttp-equiv="content-type" content="text/html;charset=UTF-8">

应用2：网页自动刷新

2.name属性

主要用于设置网页的搜索的关键字,版权信息，作者

（1）设置网页关键字

（2）设置网页说明

xhtml简介

传统的html开发的初衷是面向PC机的，随着移动终端的不断出现，html已经满足不了市场的需求了，xhtml是新一代的 html的标注语言,xhtml的目的是为了取代html。

xhtml的标记，与html一模一样.

xhtml的语法要比html严格得多。

xhtml可扩展超文本标注语言。

xhtml编写规范

所有的标记与属性要全小写

单边标记必须关闭。如<br />

所有的属性值都必须要加引号。

所有的属性都必须有值。<hrnoshade>--<hr noshade="noshade">

标记之间要顺序嵌套。

DTD文档类型定义

DTD文档类型定义的目的:是一种验证机制,也就是说检验一下你写的xhtml标记语法是否合法。

DTD一共有三大类型:

（1）严格型的DTD

在严格型的DTD中，不能使用各种表现的标记，如<font>、<b>、<body bgcolor>。要求必须使用css来取代各种表现标记。

xhtml 1.0 strict：
<!doctype html public "-/w3c/dtd xhtml 1.0 strict/en""http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">

（2）过渡性的DTD

在过渡性的DTD中，可以继续使用HTML中的表现的写法。这些样式还可以继续使用。如<font>、<b>、<body bgcolor>

xhtml 1.0 transitional：
<!doctype html public "-/w3c/dtd xhtml 1.0 transitional/en""http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

（3）框架的DTD

xhtml 1.0 frameset：
<!doctype html public "-/w3c/dtd xhtml 1.0 frameset/en""http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd">

表格标签

表格结构

<table>

<tr>

</tr>

<tr>

</tr>

</table>

<table>属性

width:表格宽度，

height:表格高度

align:表格水平对齐方式

border:表格边框

bordercolor:边框颜色

bgcolor：表格背景色

background:背景图片

cellpadding:单元格边线到内容间的距离(填充距离)

cellspacing:单元格与单元格之间的距离.（间距）

rules:合并单元框线，取值all。

注意：rules兼容性不好，请使用css来取代它

<tr>属性---行标记

bgcolor:行的背景色

height：行高

align:行中的内容水平对齐left、center、right

valign:垂直居中，取值top、middle、bottom

<td>或者<th>属性

<td>是普通单元格，<th>是标题单元格，居中加粗显示

width：单元格的宽度

height:单元格高度

bgcolor：单元格背景颜色

background:单元格背景图片

align:水平对齐，内容

valign：垂直对齐，内容

rowspan:上下单元格合并，合并属性必须放在第一个单元格中

colspan:左右单元格合并，合并时，有赠就得有减，要保证每一行的单元格个数不变

表单概念：

表单主要用来获取客户端用户信息的。如注册表单、查询表单、登录表单。

表单工作原理：

浏览有表单的网页，填写一些必要的信息，点击某个按钮进行提交这些表单数据，通过互联网，传到服务器上。服务器上有专门的程序，对表单数据进行验证。如果验证成功，将你的数据存入数据库（MySQL）,返回一个验证成功的信息，如果验证失败，返回一个错误信息。

从上面的表单的工作原理来看，表单的制作分为两个部分，一是前台页面的制作，二是后台php对表单数据的处理。

表单的结构

<formname="form1" method="get" action="login.php" >

用户民：<input type="text"name="username"/>

密码：<input type="password" name="userpwd"/>

</form>

form标记属性-----块元素

name给表用来给表单起名字,这个名字主要给javascript来用，js主要用来做客户端表单验证

method：指定的提交方式，取值，get或post。

action:指定的表单处理方式，一般是php文件

如果表单文件为空，数据提交到哪里？

结果，如果action为空，那么表单数据交给了他自己处理

enctype:指定表单数据的编码方式,（解密方式）。这个属性只能用在method="post"的情况下，有两个取值

：application/x-www-form-urldecoded//默认的加密方式

：multipart/form-data//如果你要上传文件，该值必须是它自己。

GET方式与POST方式

get提交方式（基本上用不着）

get方式，是将表单数据追加到action指定的处理程序的后面，然后向服务器发出请求。

注意

地址栏传数据的方式，默认就是get方式。

file:///D:/BaiduNetdiskDownload/php/day3/login.php?username=asd&userpwd=123

上面url的说明：

username=asd&userpwd=123//表单提交的数据，又称为“查询字符串”

action文件与查询字符串之间用“？”分隔

每两个表单元素的“名称=值”之间用“&”分隔

表单名称和表单值之间用“=”分隔

如果某个表单元素，不想往服务器传递数据，那么我们可以不给他加name属性，传递到服务器的数据，如果没有name，则无法获取它的值。

Get方式特点：

（1）get方式不能提交敏感数据，如密码。

（2）get方式只能提交少量数据，因为地址栏长度有限制,大约100字符

（3）get方式不能上传附件。

post提交方式

Post提交方式，不是将表单数据追加到地址上，而是直接传给表单处理程序

Post方式的特点：

（1） post提交方式的数据相对安全

（2） post可以提交海量数据

（3） post方式可以上传文件

表格和表单的嵌套顺序

单行文本域

语法<input type=”text” 属性=“值”/>

常用属性：

Name:文本框名字，命名规则，可以是字母、数字、下划线，只能以字母开头

Type：表单元素类型，

Value:文本框中的内容。

Size:文本框的长度，以“字符”为单位。

Maxlength:最多可以输入多少个字符，超出的就输不进去。

Readonly:只读属性，可以选中，但不能修改。readonly="readonly"

Disabled：禁用属性，不能选中不能修改。disabled="disabled"

举例说明<inputtype=”text” name=”username”/>

单行密码域

语法格式<input type=”password” 属性=“值”/>

常用属性：

Name:密码框名字，命名规则，可以是字母、数字、下划线，只能以字母开头

Type：表单元素类型，

Value:文本框中的内容。

Size:元素框的长度，以“字符”为单位。

Maxlength:最多可以输入多少个字符，超出的就输不进去。

Readonly:只读属性，可以选中，但不能修改。readonly="readonly"

Disabled：禁用属性，不能选中不能修改。disabled="disabled"

举例：<tdalign="right">密码：</td>

单选按钮

语法格式：<input type=”radio” 属性=“值”/>

常用属性：

Name:元素的名称

Value：元素的值，该value数据将发往服务器

Checked:默认选择那一项，如checked=”checked

举例说明：

<td><input type="radio" name="sex"value="男"checked="checked"/>男

<inputtype="radio" name="sex" value="女"/>女

</td>”

注意：一组单选按钮，只能选择一个，但name的值必须一样，如name=”sex”

单选按钮，用户自己不能输入内容，用户只能选择，因此必须为他指定默认值value

复选框

语法格式<input type=”checkbox” 属性=“值”/>

常用属性：

Name:元素的名称

Value:元素的值

Checked:默认选中。如checked=”checked”

注意：复选框也是一组选项，因此，name的值必须一致。在php中，使用数组来获取多个同名的name的值。复选框可以同时选择多个，也可以一个都不选。

下拉列表

<selectname=”city”>

</select>

<select >标记的属性，只有一个name属性

<option>标记的属性，value,selected

Selected,默认选中，selected=”selected”，只能选择一个。

文本区域

语法格式：<textareaname=”名称” cols=”宽度” rows=”高度”></textarea>（宽/高度：字符）

常用属性：

Name：元素名称

Cols:宽度，是指多少个字符

Rows高度，是指几行高

//document.form1.intro.value=”nihao”；

提示：<textarea>和</textarea>之间是默认文本

各种按钮

提交按钮：<inputtype="submit" value="提交"/>

重置按钮：<inputtype="reset" value="重置"/>

图片按钮：<inputtype="image" src="../day2/imags/0.jpg">//功能就是提交表单，与submit功能一样。

普通按钮：<inputtype="button" οnclick="javascript:window.close()"

value="关闭窗口"/>

普通按钮本身不具有任何功能，一般要与js程序配合使用，实现相应功能。

上传文件域

语法格式：<input type=”file” 属性=“值”/>

常用属性：

Name:表单元素名称。

Value：表单元素的值，这个值其实就是上传文件名。Value属性是只读属性，value的内容只能来自手动选择上传的文件，而不是用户指定的一个路径。为了安全起见，value是只读的。

注意：现在只能实现上传文件框，而不能实现真正上传功能，上传功能用php实现。

<tr>

<td>

<inputtype="file" name="uploadFile" />

</td>

</tr>

Enctype=”multipart/form-data”必须是这个值才能实现上传文件

隐藏域

功能：隐藏域就是看不见的一个框，传递一些值，而这个值又不想让别人知道。

用处：主要用语php后面程序，如修改某一条新闻内容时，需要传递一个新闻的id号。

语法格式：<input type=”hidden” name=” 名称” value=”默认值” />

<tr>

<inputtype="reset" value="重置"/>

<inputtype="hidden" name="id" value="1263"/>

</td>

</tr>

<Caption>表格标题

语法格式：<caption></caption>

提示:<caption>标记是<table>的子标记，<caption>放在<table>开始标记之后

综合案例：月福首页

1. 开发网站的一个流程

a) 业务员与客户进行沟通，包括：风格、功能（论坛、留言板、支付、用户登录等）；

b) 业务员与美工沟通，制作网页效果(首页、列表页、内容页)。

c) 制作人员开始切图，排成网页形式的。

d) 后台程序员开始写程序。

e) 前台后台合并在一起，整站完成。

2. 网站布局结构

一行两列（logo）

导航栏

两行一列（flash模块）

月福新闻模块两行三列

服务项目模块两行三列

滚动产品模块两列两行

页脚模块 1行1列表格

3. 排版的准备工作

a) 网站的素材都要放到当前目录下，与当前网页目录一起

b) 创建一个html文件，来进行排版

c) 网页的背景色

d) 确定主页的宽度，778px，当前流行的主页的宽度一般为1000px

4. html的注释

<!—注释内容-->

注意：注释的内容是不会显示的注释是为了将来维护

网页的多媒体

网页上的视频一般都是flash格式的，因为flash的兼容性比较好，在一个就是flash文件的压缩以后文件较小。

以下以flash动画为例，播放flash动画的代码如下，这个代码不用记，看懂就行。

提示：falsh动画的文件扩展名：.swf

以上代码的分析：

a) <object >标记：是IE中引入多媒体的标记

b) <embed>标记是Netscape中引入多媒体标记

属性：src、width、height

背景平铺效果

图片热点（图像地图）

图像热点，给一个图片加多个链接。默认情况下，一张图只能加一个链接。

标记结构：

<img src=” images/” usemap=” #Map”/>

<areashape=”热区形状” coords=”热区坐标” herf=”链接地址”/>

</map>

<mapname="Map" id="Map"> name属性

<area />标记常用属性，单边标记

1) Shape:热区的形状，取值：rect矩形，circle（圆形），polygon(多边形)。

2) Coords热区坐标，x,y距离画布坐上的距离

如果shape=”rect”时，那么，coords=”x1,y1,x2,y2”例如coords=”50,50,200,150”矩形左上角与右下角

如果shape=”circle”，那么，coords=”x,y,r”(x,y)圆心，r为半径。

3) 链接地址，点击热区跳转的页面地址

举例说明：

<imgsrc="images/0.jpg" usemap="#Map"/>

<areashape="rect" coords="0,0,200,50" href="../day3/表格标题.html"/>

<areashape="rect" coords="0,50,200,100"href="javascript:alert('加入收藏！')"/>

<areashape="rect" coords="0,100,200,150"href="javascript:alert('设为首页！')"/>

<areashape="rect" coords="0,150,200,200"href="javascript:alert('错误报告！')"/>

</map>

Javascript:alert(“提示信息”);是js中的一个函数，功能是弹出一个提示信息。

在js中，要求，一个字符串，例外的引号不能一致，引号是一对对的。

普通框架

1. 框架的概念

框架技术，将一个浏览器窗口，划分成若干个小窗口，每个小窗口显示一个独立的网页。

2. 框架集和框架页

框架集<frameset>：主要用来划分窗口

框架页<frame>:主要用来指定窗口中默认显示的网页地址

框架与窗户很相似，一个窗户由窗格(框架集)和玻璃(框架页)构成。

先规划窗格，然后再确定每个窗格中放的玻璃。（先有结构，后有内容）

结构上(frameset)没有内容，都在frame中

但是框架网页DTD类型必须是

<!doctype html public "-/w3c/dtdxhtml 1.0 frameset/en""http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd">

将浏览器窗口划分成了左右型框架。

main.html

left.html

注意：没有<body></body>标签

3.<Frameset>属性双边标记

A. Cols:划分左右型框架

Cols=”200,*”//左框架的宽度为200px,剩下全是又框架的

Cols=”180,*,180”//左框架和右框架分别为180px,剩下的都是中间框架的

Cols=”20%,*”//划分框架时可以使用百分比表示。

B. rows：划分上下型框架

Rows=”200,*”//上框架的高度为200px，剩下的全是下框架的。

Rows=”180,*,180”//上框架和下框架都是180，剩下的都是中间框架的

注意：cols和rows属性，每个框架只能用其中一个，不能两个同时使用。

C. Frameborder:是否显示框架的边框线，取值：1或0；yes或no。默认没有。

D. Boeder边框的粗细。

E. Bordercolor,边框的颜色

4.<frame>框架页的属性单边标记

A src:该窗口中，默认显示的网页地址。

B noresize:不能调整小窗口的大小，如noresize=”noresize”

C scrolling:是否显示滚动条，取值auto,yes,no.

D name:给当前小窗口起个名字。这个name就是给<a>标签的target属性来用

左小窗口

框架首页.html

右小窗口

给main框架起名字right，是给<a>标签中的target使用。

Left.html文件

News.html的内容在right的窗口中显示。

5.<noframes>含义

a) 描述：当你的浏览器不支持框架时，显示的提示信息，一般情况下，IE6不支持框架，高版本都支持。

b) 语法：<noframes>对不起，您的电脑太老了，该砸了！</noframes>

6.框架嵌套

返回顶级（最原始）状态！

注意事项

a. <frameset>框架，可以成为“普通框架”

b. 在“普通框架”中，框架的制作分为两个部分，（1）框架结构的规划（2）制作具体的页面

c. 在普通框架的结构规划中，不能出现<body>标记，因为没有实际的内容。

d. 框架规划文件<frameset>中指定各部分内容,以及指定main部分的name,用于显示内容

e. （菜单）部分target=”name”，将打开的网页在main框架中显示。

f. 设置返回首页的链接时hef=”规划框架的文件名”target=”_top”表示返回顶级（最原始）状态

内嵌框架（行内框架、浮动框架）

a. 功能描述：内嵌框架，相当于在现有的网页中，挖了一个“窟窿”，透过这个窟窿可以看到里面的内容。

b. 与普通框架的区别：<iframe>是<body>的子标记，因此，他因该放在<body></body>之间

c. 语法格式：<iframe 属性=“值”>对不起，您的浏览器版本太low!</iframe>

d. 常用属性

a) Src:引入的文件地址

b) Width:框架的宽度

c) Height:框架的高度

d) Scrolling:是否显示滚动条，取值，auto、yes、no

e) Frameborder：是否显示框架的边框线，取值yes 或no

f) Name:指定当前的小窗口名称，该名称也是给<a>标记的target属性来用

g) Align:框架在网页中的对齐方式，取值left、right、center

i. 其中取值left或right，可以实现图文混排，和<img>的对齐方式一样

注意

Src引入的文件只能是html文件或者php文件，不能是其他文件

带#链接对比

<a href=”#”>空链接

<a href="文件名#锚点名称"></a>锚点链接

<img src=”images/” usemap=” #Map”/>图片热点

benben0729

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

html标记不区分大小写 html标记属性可有可无，有的标记没有属性，比如html\head\title等。双边标记在开始与结束之间，单边标记没有内容标记之间可以嵌套，但是必须顺序嵌套 &lt;meta http-equiv="content-type"content="text/html;charset=UTF-8" &gt;高速浏览器如何翻译汉字，con...
复制链接

扫一扫