HTML基础知识

最新推荐文章于 2024-09-07 21:31:40 发布

原创最新推荐文章于 2024-09-07 21:31:40 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html

html 专栏收录该内容

1 篇文章

订阅专栏

第一章 HTML基础

一、基本结构:

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html; charset=gb2312"/>

//声明网页字符编码，防止乱码。

</head>

<body>

</body>

</html>

二、基本标签:

<p></p>段落标签

<br/>换行标签

<hr/>水平线标签

<strong></strong>加粗体字标签

<em></em>斜体字标签

<img src="图片地址" alt="图像的替代文字" title="鼠标悬停的文字"

width="图片宽" height="图片高度"/>图像标签

<h1></h1>一级标题

<h2></h2>二级标题

<h3></h3>三级标题

<h4></h4>四级标题

<h5></h5>五级标题

<h6></h6>六级标题

数字越小,字号越大

三、特殊符号:

  空格

> > 大于号

< < 小于号

" "" 引号

四、图像标签的基本语法:

onerror="this.onerror=null;this.src='$imgs/nopic-detail.png';" onerror属性用于图片加载错误时。

五、超链接的基本语法:

<ahref="链接地址"target="目标窗口位置">链接文本或图像</a>

Target:_self,_blank,目标窗体名

<ahref="#"></a>-表示空链接

超链接三大类别:页面间链接、功能性链接、锚链接

1.页面间链接:<a href="链接地址" target="目标窗口位置">

2.锚链接:

(1)同一页的a位置跳到b位置

(2) 某页的a位置跳到另一页的b位置

3.功能性链接:<ahref="mail to:邮箱地址"></a>

第二章列表，表格与框架

一、列表

1.无序列表:

基本语法:<ul><li></li></ul>

修改符号:type = ”disc(默认值,实心圆),circle（空心圆),square(方实心)”

2.有序列表:

基本语法:<ol><li><li></ol>

修改符号:type = ”1(默认值)，A(a)(英语字母)，I(i)(罗马数字)”

3.定义列表：

基本语法:<dl><dt><dd></dd></dt></dl>

dt与dd是平级关系

二、表格:

表格是由行和单元格组成的，本身没有列的概念，列是由多个单

元格组成的。

特点:简单通用，结构稳定

1.基本语法:<table><tr><td></td></tr></table>

2.创建步骤:

(1)创建表格标签<table>……</table>

(2)在表格标签中创建行标签<tr></tr>

(3)在行标签<tr></tr>中创建单元格标签<td></td>

3.表格属性:

align属性(表格在水平方向的对齐方式):center(居中)、left(居左)、rignt(居右)

bgcolor="背景颜色";

border="边框宽度";

width="表格宽度";

height="表格高度";

cellspacing:框与框的距离;

cellpadding:元素与框的距离;

4.单元格属性:

align水平对齐方式:center(居中对齐)、left(居左对齐)、rignt(居右

对齐)

valign垂直对齐方式：middle(居中对齐),top(顶端对齐),bottom(低

端对齐),baseline(基线对齐)

rowspan = “跨行 ”;

colspan = “跨列”;

三、常用框架

（1）frameset框架:用于整个页面都用框架实现时，frameset不能

写在body里面

框架优点: （1）可以在同一个窗口显示多个页面

（2）可以实现页面复用，增加代码的重用性

（3）使整个页面结构清晰易懂

1.基本语法: <frameset>

</frameset>

分割几个窗口就有几个<frame></frame>

2.frameset属性:

framesetboreder:边框

bordercolor:边框颜色

cols:横向分割窗口为几列cols="20%,*"

rows:纵向分割窗口几行rows="20%,*"

scrolling:是否显示滚动条"yes/no"

noresize:限制用户修改框架大小noresize="noresize"

3.frame的属性:

frameborder:是否显示框架周围的边框frameborder=""

Name="边框名称"

src="页面地址"

scrolling:是否显示滚动条"yes/no"

noresize:限制用户修改框架大小noresize="noresize"

4.frameset实现页面间的关联:

(1)frame的name属性

(2)在页面跳转窗口,添加target属性，target="name的值"

（2）iframe内联框架:用于显示一个页面的部分内容，IFrame

要写在body标签中

scrolling:是否显示滚动条"yes/no"bordercolor="边框颜色"

noresize:限制用户修改框架大小noresize="noresize">

</iframe>

1.iframe实现页面间的关联:

(1).iframe的name属性

(2).在页面跳转窗口,添加target属性，target="name的值"

2.区别:frameset不能写在<body>中;<iframe>可以

第三章表单

一、表单

将用户信息组织起来的容器

<form>:一个表单只能有一个<form>标签

　　<form action="页面提交地址"method="页面提交方式">存放表单元素

</form>

Method两种提交方式：

Get(默认值):会将用户的信息暴露在地址栏,安全性低，有字符数限制

Post:不会暴露信息,安全性高,无字符数限制

二、表单元素

<input>:添加表单元素

(1)文本框:type="text",name(名称),value(默认值),size(文本框大小),

Maxlength(最大字符数)

(2)密码框:type="password",name(名称),value(默认值),size(文本框大

小),Maxlength(最大字符数)

(3)单选按钮:type="radio",name(名称,几个单选按钮的name必须要一

致),value(提交值),checked="checked"(默认选中)

(4)复选框:type="checkbox",name(名称),value(提交值),

checked="checked"(默认选中)

(5)下拉列表:<select><option></option></select>

一个select中至少有一个option

select属性:name:列表指定名称,size:行数

option属性:value:可选项的值,selectd="selected":默认选中

(6)图片按钮:type="image",src="图片地址",图片按钮可代替submit的提

交功能

(7)普通按钮:type="button",结合onclick事件使用

(8)提交按钮:type="submit",结合form的action属性完成表单提交

(9)重置按钮:type="reset"

(10)文件域:type="file"

(11)多行文本域:<textarea cols="跨几列" rows="跨几行"></textarea>

(1２)隐藏域:type="hidden",用来存放用户的ID信息

三、只读与禁用:

只读:readonnly="readonly",表示对内容不能修改

禁用:disabled="disabled",表示对元素禁用,控制会变灰

四、语义化:通过代码能够知道标签所代表的意思,使代码变得有自

己的意义

五、语义化表单

　　域:<fieldset></fieldset>是写在form标签里面,用来给表单划分区域的

域标题:<legend></legend>是写在fieldset标签里面,给指定区域命名标题

第四章初识CSS

1.选择器{声明}

　声明就是属性，属性1:属性值1；属性2:属性值2；

2.标签选择器:

标签名{声明}eg:p{color:red;}

3.类选择器:在同一个页面可重复使用

.类选择器名{声明},在标签中定义class属性,class="类选择器名"

4.ID选择器:

#id名{声明}

ID选择器名字唯一,并且只能用一次,类选择器可以用多次。Id="#id名 "

5.CSS样式:

(1)行内样式:<标签名style="声明"></标签名> 注:这种方式不能使内容与表现分离；

(2)内部样式:借助<style>标签在<head>中。注:这种方式代码复用性高,内容和样式在一定程度分离。但不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底；

(3)外部样式:将<style>内的值放在.css文件中,从外部引用；

6.外部样式分为:

(1)链接式:

注:<link>必须放在<head>中

(2)导入式:

使用@import url{"文件名.css"}

注:@import url必须放在<style>标签中

(3)区别:

<1>: <link>标签属于XHTML范畴

<2>: 使用<link>标签的效果比导入式好

<3>: 导入式的兼容性不好

(4)优点:内容和样式彻底分离，可在多个页面同时使用，用来统一页面风格，

方便修改

7.优先级:

行内样式 > 内部样式 > 外部样式

ID选择器 > 类选择器 > 标签选择器

8.复合选择器

(1)后代选择器

特点:由两个包含与被包含关系的标签组成，后代选择器的样式会应用到它

的子集标签。Eg:h3strong{font-size:20px;}

(2)交集选择器:

特点:由两个标签组成,第一个标签必须是标签选择器,样式会应用到两个

标签的公用部分。Eg:p.txt{font-size:20px;}

(3)并集选择器:

特点:有多个标签组成,样式会应用到所有的标签,标签之间用逗号隔开

Eg：h3,p,.txt,strong{font-size:20px;}

9.继承

(1)继承是包含与被包含的关系,由两组以上的标签组成。

(2)继承的语法与后代选择器一样,父级标签包含着子级标签

(3)特点:子级标签继承父级标签样式,但不会改变父级标签样式,子级标签可

以有自己的样式。

第五章 CSS美化网页元素

<span>标签:将文字凸显出来。

一、字体样式

1.字体风格font-style设置:选择器{font-style:字体值;}

字体包括:normal(默认)、italic(斜体)、oblique(倾斜)

2.字体粗细font-weight设置:标签选择器{font-weight:粗细值;}

粗细包括:bold(粗体)、bolder(加粗)、lighter(加细)

3.字体大小font-size设置:选择器{font-size:数字+像素大小;}

4.字体类型font-family设置:选择器{font-family:英文字体,"中文字体";}

如果写表示中文字体的样式,必须写英文在前面

简写:font:风格粗细大小类型；

二、网页排版

1.文本属性

文本颜色 color;

文本水平对齐 text-align: left(左),center(中),right(右)

文本首行缩进 text-indent: 像素；单位:像素(px)

文本的行高line-height: 像素; 单位:像素(px) 行高必须大于字体

大小。行高设置成与标签的height等高时,可以达到垂直居中的效果

文本的装饰text-decoration: none(默认值)、underline(下划线)、

overline(上划线)、line-through(删除线)

2.图片与文本居中对齐: img{vertical-align:middle;}

3.CSS超链接:

(1)超链接伪类:不用于<a></a>超链接标签

a:link 未单击访问时超链接样式

a:visited 单击访问后超链接样式

a:hover 鼠标悬停超链接时的样式

a:active 鼠标单击未释放时超链接样式

(2)优先级:

四个都用时，顺序不能调错

link > visited > hover> active 设置顺序

4.背景样式:

(1)背景颜色: background-color:颜色值用英文单词或十六进制;

(2)背景图像: background-image:url(图片路径);

(3)背景定位: background-position:Xpx Ypx

X为水平方向 Y为垂直方向原点(左上角)、左负右正、上负下正

(4)背景平铺: background-repeat:平铺方式;

平铺方式:no-repeat不平铺(默认)

Repeat 在水平和垂直方向平铺

Repeat-X 水平方向平铺

Repeat-Y 垂直方向平铺

(5)背景简写: background: 颜色,url(图片地址),定位,平铺;

5列表样式:

(1)list-style-type ：none(无),disc(●),circle(○),square(■),decimal；

(2)list-style-image：url(图片地址);

(3)list-style-position:inside(位于文本以内)、outside(位于文本左侧)

第六章盒子模型

一、边框属性:

1.border-color:四边边框颜色

2.border-top-color(上边框颜色)、border-bottom-color(下边框颜色)、border-left-color(左边框颜色)、border-right-color (右边框颜色)。

3.border-width(四边边框粗细)：thin(细),medium(中),thick(粗),像素值

4.border-top-width(上边框粗细)、border-bottom-width(下边框粗细)、border-left-width(左边框粗细)、border-right-width (右边框粗细)。

5.border-style(边框样式):none(无边框)、dotted(点线边框)

dashed(虚线边框)、solid(实线边框);

6.border-top-style(上边框样式)、border-bottom-style(下边框样式)、border-left-style(左边框样式)、border-right-style (右边框样式)。

二、盒子模型

盒子模型组成:border边框,padding内边距,margin外边距

1.外边距:margin

(1).margin:盒子与盒子之间的距离。Margin:2px1px 0px 0px; 上外边增加2px,右外边距增加1px

(2).margin-top(上外边距)、 margin-bottom(下外边距)、

margin-left(左外边距)、margin-right(右外边距)。

Margin:0px auto 盒子居中，上下不移 ,0px表示不移动

2.内边距:padding

(1)padding:内容与边框之间的距离。0px表示不移动

(2)padding-top(上内边距)、padding-bottom(下内边距)、padding-left(左内边距)、padding-right(右内边距)。

3.盒子模型尺寸:

盒子模型尺寸:border-width+内边距+外边距+内容宽度

border-width:边框的宽度

三、标准文档流:网页元素从左到右从上到下的显示方式

1.块级元素:独占一行的元素 (例如:<h1>~<h6>、<p>、<div>、<li>、<hr> 等等)

2.内联元素:一行可以放多个的元素 ( <a>、<img>、<strong>、<br/>、<span>

等等)

行级标签可以写在块级标签里，但反过来不可以。

3.display属性:用于指定HTML标签的显示方式，可以改变标准文档流。

Display:block:块级元素的默认值,元素会被显示为块级元素；

Display:inline:内联元素的默认值,元素会被显示为内联元素；

Display:none:设置元素不会隐藏;

考虑到浏览器的兼容性，可以将块级元素变行级元素Display:inline-block;

第七章浮动

浮动是用来改变标准文档流中元素的显示方式的

1.网页布局

通常为 1-2-1布局(头部导航、主体部分、版权)

1-3-1布局(头部导航、主体部分、版权)

2．浮动(float)属性:

Float:left;元素向左浮动；

Float:right;元素向右浮动；

Float:none;元素不浮动,并会显示在其文本中出现的位置

3.清除浮动(clear)属性:

Clear:left;在左侧不允许浮动元素。

Clear:right;在右侧不允许浮动元素。

Clear:both;在左、右两侧不允许浮动元素。

Clear:none;默认值,允许浮动元素出现在两侧。

借助一个空div,设置Clear:both;可以扩充盒子高度。

4.溢出处理(overflow)属性:

Overflow:visible;默认值,内容不会被修剪,会呈现在盒子之外。

Overflow:Hidden;内容会被修剪,并且其余内容是不可见的。

Overflow:Scroll;内容会被修剪,但是浏览器会显示滚动条以便查看其

余内容。

Overflow:Auto;如果内容被修剪,则浏览器会显示滚动条以便查看其余

的内容。

在父标签设置Overflow:Hidden;并结合width，可扩充盒子高度

第八章定位网页元素

1.定位position属性:结合left,top,right,bottom进行偏移

static:默认值,没有定位,元素按照标准流进行布局。

relative:相对定位,与原位置做对比,使盒子在标准文档流中进行指定

距离的偏移。

absolute:绝对定位,使盒子脱离标准文档流进行移动。根据上一级父容

器的边框进行平移,无父容器时以浏览器边框为基准。

fixed:固定定位,跟随浏览器滚动条的的移动而移动。

2.z-index属性:用于调整元素定位时重叠层的上下位置。必须设置了

position定位后才能使用。

取值为整数，默认为0，可以为负数，值大的显示在上方。

3.透明度

opacity:x; x值为0-1,值越小越透明。

filter:alpha(opacity=x):x值为0-100,值越小越透明。