HTML基本知识回顾

最新推荐文章于 2022-11-14 16:39:29 发布

admin-Simon

最新推荐文章于 2022-11-14 16:39:29 发布

阅读量292

点赞数

分类专栏： HTML 文章标签： HTML 回顾

本文链接：https://blog.csdn.net/qq_38932355/article/details/79340799

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

网页的基本信息：

<!DOCTYPE html>

DOCTYPE声明：约束HTML文档结构，检验是否符合相关WEB标准，同时告诉浏览器，使用哪种规范来解释这个文档中的代码。DOCTYPE声明必须位于HTML文档的第一行。

<title>标签：描述网页的标题。

属性：

gb2312:简体中文，一般用于包含中文和英文的页面。

ISO-885901：纯英文，一般用于只包含英文的页面。

Big5:繁体，一般用于带有繁体字的页面。

UTF-8：国际性通用的字符编码，同样适用于中文和英文页面。和gb2312编码相比，国际通用性更好。

网页基本标签：

<h1>~<h6>	标题标签
<p></p>	段落标签
<br/>	换行标签
<hr/>	水平线标签
<em></em>	斜体标签
<strong></strong>	字体加粗标签
<!--注释内容-->	注释

	空格
>	大于号
<	小于号
"	引号
&copy	版权符号

图像标签的基本语法:

<imgsrc=”图片地址”alt=”图像的替代文字” title=”鼠标悬停提示文字”width=”图片宽度” height=”图像高度”/>

超链接标签的基本语法:

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

href表示链接地址的路径 target指定链接在哪个窗口打开，常用值有_self(自身窗口)，_blank（新建窗口）。

锚链接基本语法:

<aname=”marker”>目标位置乙</a> <a href=”#marker”>当前位置甲</a>

三种列表的语法：

无序列表

<ul>

</ul>

有序列表

<ol>

</ol>

定义列表

<dl>

</dl>

表格的基本结构：

1. 单元格 :单元格是表格的最小单位，一个或多个单元格纵横排列组成了表格。

2. 行：一个活多个单元格横向堆叠形成行。

3. 列：由于表格单元格的宽度必须一致，因此单元格纵向排列形成了列。

创建表格的步骤：

1. 创建表格标签<table>…<table>。

2. 在表格标签里创建行标签<tr>…<tr>,可以有多行。

3. 在第一行标签<tr>…<tr>里从创建单元格标签<th>…<th>,用于创建表格标题。

4. 在行标签<tr>…<tr>里创建单元格标签<td>…<td>,可以有多个单元格。

5. 为了显示表格的轮廓，一般还需要设置<table>标签的border边框属性，指定边框宽度。

表格的基本语法

<table>

<tr>

<th>第1个单元格的内容</th>

<th>第2个单元格的内容</th>

</tr>

<tr>

<td>第1个单元格的内</td>

<td>第2个单元格的内</td>

</tr>

</table>

表格的跨列

<table>

<tr>

<td colspan=“所跨的列数”>单元格内容</td>

</tr>

</table>

表格的跨行

<table>

<tr>

<td rowspan=“所跨的行数”>单元格内容</td>

</tr>

</table>

视频元素：

1. video元素的基本语法：

</video>

2. audio元素的基本语法：

</audio>

controls属性:提供播放，暂停，音量控制。

autoplay属性：自动播放。

loop属性：循环播放。

<iframesrc=“引用页面地址” name=“框架标识名” width=“框架宽度” height=“框架高度”></iframe>

<ahref=“链接地址” target=“框架名”>链接文本或图像</a>

列表样式：

list-style-type:none	无样式
list-style-type:disc	实心圆，默认类型
list-style-type:circle	空心圆
list-style-type:square	实心正方形
list-style-type:decimal	数字

<form>表单标签及属性：

action属性

当用户点击提交后，信息发送到web服务器上，由action属性指定的程序处理。如action属性的值为空，则默认表单提交到本页。

method属性

此属性告诉浏览器如何将数据发送给服务器，指定向服务器发送数据的方法。分别为 method（get）

method（post）

<input/>写在<form>标签内

其属性有：

type属性:此属性指定表单元素的类型

可用类型有

text(文本框), password（密码框）, radio(单选框)，checkbox(复选框)，reset（重置按钮），submit（提交按钮），button（普通按钮），image（图片按钮），file（文件域），email（邮件），url（网址），number（数字），range（滑块），search（搜索框），hidden（隐藏域）

disabled禁用属性

readonly只读属性

其中数字和滑块的类型属性值有： min（规定允许的最小值），max（规定允许的最大值），step（规定合法的数字间隔）。

列表框标签及语法：

<select>标签必须至少包含一个<option>标签

selected:表示默认选择此项

<selectname=“指定列表名称” size=“行数”>

</select>

多行文本域标签及语法：

<textareaname=“textarea” cols=“显示的列数” rows=“显示的行数”>

文本内容

</textarea>

鼠标点击文字可选择此选项的方法：

此方法配合选择单选框或复选框使用

<labelfor=“male”>男</label>

<inputtype=“radio” name=“name” id=“male”>

表单数据验证的方法：

placeholder	用于为input类型的文本框提供一种提示。在输入为空时显示，当文本框中写入内容时消失。
required	用于规定文本框填写内容不能为空。
pattern	用于验证input类型文本框中用户输入的内容是否与自定义的正则表达式相匹配。

CSS样式：

行内样式

style做为属性写在标签内

外部样式表

外部样式表

链接式语法：

导入式语法：

链接式与导入式的区别：

1.<link/>标签属于XHTML范畴，而@import是css2.1中特有的。

2.使用<link/>链接的css是客户端浏览网页时现将外部css文件加载到网页中，再进行编译显示，所以这种情况下显示出来的网页与用户预期的效果一样，即使网速再慢也是一样的效果。

3.使用@import导入的css文件，客户端在浏览网页时现将HTML结构呈现出来，再把外部css文件加载到网页当中，当然最终的效果与使用<link/>链接文件效果一样，只是当网速较慢时会先显示没有css统一布局的HTML网页，这样就会给用户很不好的感觉。

综上所述，可发现现在大多数网站都使用链接式外部样式表方式引用css文件。

样式优先级：

行内样式>内部样式表>外部样式表；遵循就近原则。

CSS基本选择器：

标签选择器	h1{ }
类选择器	<h1 class=”a”> .a{ }
ID选择器	<h1 id=”a”> #a{ }

基本选择器的优先级：

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

CSS高级选择器：

1. 层次选择器：

E F	后代选择器
E>F	子选择器
E+F	相邻兄弟选择器
E~F	通用兄弟选择器

2. 结构伪类选择器：

E：first-child	ul li:first-child选择到ul下第一个li
E：last-child	ul li:last-child 选择到ul下最后一个li
E: F:ntf-child(n)	ul li:nth-child(n)选择到ul下指定位置的li
E:first-of-type	指定父级并选择其中这个元素第一次出现的位置
E：last-of-type	指定父级并选择其中这个元素最后一次出现的位置
E F：nth-of-type(n)	指定父级并选择其中这个元素的指定位置

3. 属性选择器：

E[abc]	选择匹配具有属性abc的E元素
E[abc=val]	选择匹配具有属性abc的E元素，并且属性值为avl
E[abc^=val]	选择匹配元素E，且E元素定义了属性abc，其属性值是以avl开头的任意字符串
E[abc$=val]	选择匹配元素E，且E元素定义了属性abc，其属性值是以avl结尾的任意字符串
E[abc*=val]	选择匹配元素E，且E元素定义了属性abc，其属性值包含了val

<span>标签

可将<p>标签内的某几个字或某个词选中，然后加载样式使其突出显示

字体样式：

font-family	设置字体类型
font-size	设置字体大小
font-style	设置字体风格
font-weight	设置字体的粗细

文本属性：

color	设置文本颜色
text-align	设置文本水平对齐
text-indent	设置首行文本的缩进
line-height	设置文本的行高
text-decoration	设置文本的装饰
text-shadow	设置文本阴影
vertical-align	设置文字相对图像垂直对齐文字与图片必须在同一个<p>标签内。

超链接伪类：

a:link	单击访问前的超链接样式
a:visited	单击访问后的超链接样式
a:hover	鼠标悬浮其上的超链接样式
a:active	单击未释放的超链接样式

列表样式：

list-style-type:none	无样式
list-style-type:disc	实心圆，默认类型
list-style-type:circle	空心圆
list-style-type:square	实心正方形
list-style-type:decimal	数字

背景样式：

background-color	背景颜色
background-img	背景图片
background-position	背景定位 no-repeat 让背景图片只出现一次
linear-gradient	（position，color1，color2，……）线性渐变

在CSS中，一个独立的盒子模型由content（网页内容），border（边框），padding（内边距），margin（外边距）四部分组成。

border的三个属性：

border-color

边框颜色

border-width

边框粗细

border-style

边框样式：

none表示无边框

dotted表示点线边框

dashed表示虚线边框

solid表示实线边框

外边距与内边距：

margin

外边距位于盒子边框外，指与其它盒子之间的距离。

Margin{0px auto}可使盒子在父级容器中居中显示

padding

内边距用于控制内容与边框之间的距离，以便精确控制内容在盒子中的位置。

盒子模型的计算方法：

盒子模型内核总尺寸=border（上下/左右）+padding（上下/左右）+内容宽度

Box-sizing拯救布局：

Content-box

默认值

盒子的宽度或高度=border+padding+（margin）+width/herght

Border-box

盒子的高度或宽度等于元素内容的高度或宽度。

inherit

此值使元素继承父元素的盒子模型模式

圆角边框：

Border-radius可以通过设置四个角的属性值实现圆形，半圆，椭圆或圆角矩形的显示。

Box-shadow盒子阴影的属性参数：

Inset	阴影类型如不设置默认为外阴影。设置了则表示为内阴影。
x-offset	X轴位移，用来指定阴影的水平位移量，可以是正值或负值。
y-offset	Y轴位移，用来指定阴影的垂直位移量，可以是正值或负值。
Blur-radius	阴影模糊半径，代表阴影向外模糊的模糊范围，只能是正值。
Color	阴影颜色，指定绘制阴影时所使用的颜色。

Display属性：

block	块级元素默认值，元素会被显示为块级元素。
inline	行内元素默认值，元素会被显示为行内元素。
inline-block	行内块元素，元素具有行内元素的特性，也具有块元素的特性。
none	设置元素不会被显示

Float浮动属性：

left	元素向左浮动
right	元素向右浮动
none	默认值，元素不浮动。

Clear清除浮动属性：

left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左，右两侧都不允许浮动元素
none	默认值，允许浮动元素出现在两侧

解决父级边框坍塌的方法：

浮动元素后面加空DIV
设置父元素的高度
父级添加overflow属性	overflow属性常见值 visible-默认值，内容不会被修剪，会呈现在盒子之外。 hidden-内容会被修剪，并且其余内容是不可见的。 scroll-内容会被修剪，但是浏览器会显示滚动条一遍查看其余内容。 atuo-如果内容被修剪，则浏览器会显示滚动条一遍查看其余内容。
父级添加伪类after	在CSS中添加代码如： Div{ Content:''; Display:block; Clear:both; }

Inline-block和浮动的优点：

Display:inline-block可以让元素排在一行，并且支持宽度和高度，添加该属性的元素在标准文档流中，不需要清除浮动。

Float可以让元素排在一行并且支持宽度和高度，可以决定排列方向。

Inline-block和浮动的缺点：

Display:inline-block位置方向不可控制，会解析空格。

Float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式。

Position属性：

static	默认值，没有定位，元素按照标准文档流进行布局
relative	相对定位，相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准文档流中，其后的盒子仍以标准文档流方式对待它。
absolute	绝对定位，盒子的位置以包含它的盒子为基准进行偏移。绝对定位的盒子从标准文档流中脱离。
fixed	固定定位，以浏览器窗口为基准进行定位。当拖动浏览器窗口的滚动条时，依然保持对象位置不变。

Z-index属性用于调整元素定位时重叠层的上下位置。

设置层的透明度：

opacity：x	X值为0~1，值越小越透明
filter:alpha(opacity=x)	X值为0~100，值越小越透明

通常两种方法都要设置，以适应所有浏览器

CSS3变形：

2D位移	transform:translate(tx,ty) tx表示X轴（横坐标）移动的向量长度，正值则向X轴右边移动，负值则向X轴左边移动。 ty表示Y轴（纵坐标）移动的向量长度，正值则向Y轴右边移动，负值则向Y轴左边移动。
2D缩放	transform:scale (sx,sy) 也可仅设置沿着X轴或Y轴方向缩放 scaleX（sx）表示只设置X轴的缩放。 scaleY（sy）表示只设置Y轴的缩放。
2D倾斜	transform:skew (ax,ay) 也可仅设置沿着X轴或Y轴方向倾斜 skewX（ax）表示只设置X轴的倾斜。 skewY（ay）表示只设置Y轴的倾斜。
2D旋转	transform:rotate(a) 如a的取值为正值，元素顺时针旋转。如a的取值为负值，元素逆时针旋转。

CSS3过渡：

过渡属性	transition-property IDENT:指定的CSS属性 all:指定所有元素支持，一般为了方便都会使用all
过渡时间	transition-duration 用来定义转换动画的时间长度。
过渡动画函数	transition-timing-function 常见方式： Ease：元素样式过渡由快到慢（默认值） Linear：元素样式过渡始终匀速 Ease-in：元素样式过渡越来越快 Ease-out:元素样式过渡越来越慢 Ease-in-out:元素样式过渡先加速后减速
过渡延迟时间	transition-delay 正值则为过了设置的时间才会触发元素过渡效果负值则为从设置的时间点开始显示，之前的动作被截断