HTML基础

最新推荐文章于 2024-06-06 15:07:55 发布

落雨辞

最新推荐文章于 2024-06-06 15:07:55 发布

阅读量279

点赞数

文章标签： html5 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_46519536/article/details/128885672

版权

1.HTML5基础

一.html定义：超文本标签语言

作用：制作网页

二.结构：

   <html>

	<head>
	   <title>放网页标题</title>
           <meta charSet="UTF-8"/>
	   <meta name="keywords" content="搜索引擎关键字内容" />
	   <meta name="description" content="搜索引擎描述内容" />
	</head>

	<body>
	    网页的内容部分
	</body>
   </html>

三.标签

  1.标题标签：<h1>-<h6>
  2.段落标签：<p></p>
  3.换行标签：<br/>
  4.水平线：<hr/>
  5.加粗 ：<strong></strong>
  6.倾斜：<em></em>

  7.图片标签：<img src="图片路径" alt="图片未显示的时候出现的文字" title="鼠标悬浮显示的文字" />

  8.超链接：<a href="链接文件的路径" target="目标文件显示方式"></a>

四.注释和五种特殊符号：

 注释：<!--注释-->
 空格：&nbsp; 
 大于号（>）:>
 小于号 (<):<
 引号（"）:"
 版权符号：&copy;

五.超链接

1.页面与页面间的链接

2.锚链接

a.同一页面间的：

在目的地做标记：目的地

在要点击的地方：点击的地方

b.不同页面间的：

在目的地做标记：目的地

在要点击的地方：点击的地方

3.功能性链接

邮箱：联系我们

QQ:QQ

六：块元素

：无论内容多少，该元素独占一行。例如：<p></p>,<h1><h1>-----<h6></h6>
    行内元素(内联元素)：内
容撑开宽度，左右都是行内元素的可以排在一行。<strong></strong> <em></em>

2.列表、表格与媒体元素

一.列表

1.有序列表

可以有多个li,所有的内容必须放入li中

2.无序列表

可以有多个li,所有的内容必须放入li中

	type:设置列表项的符号类型
	   disc:实心圈
	   circle:空心圈
	   square:正方形

3.定义列表：对某文字或图片进行描述的时候使用

被描述的内容

描述的内容可以有多个

二.表格

1.优点：结构清晰简单稳定，使用方便

####   2.<table>------------表格

##### 	<tr>-----------行

#####            <th></th>----标题

##### 	   <td></td>---单元格

	</tr>
    </table>

3.表格跨行：rowspan 跨列：colspan

4.水平对齐方式：align; left:左 center:中 right:右

垂直对齐方式：valign;top:上 middle:中 bottom:下

4.注意：有多少行就有多少对tr,有多少单元格(列)就有多少对td

5.画跨行和跨列的表格步骤

a.画一个几行几列的表格

b.删除多余的单元格

c.看哪些单元格要跨行还是跨列

 视频元素：<video src="视频文件路径" controls></video>
           <video controls autoplay  autoplay>                 <source src="video/video.mp4" type="video/mp4"/>
                 <source src="video/video.webm" type="video/webm"/>
           </video>-->

6.controls：提供播放、暂停和音量的控件

7. autoplay：自动播放

音频元素：<audio src="音频路径" controls></video>
          <audio controls>
             <source src="audio/music.mp3" type="audio/mpeg"/>
             <source src="audio/music.ogg" type="audio/ogg"/>
          </audio>

html5结构元素：

##### 8.header：标题头部区域的内容（用于页面或页面中的一块区域）

##### 9.section:Web页面中的一块独立区域

##### 10.footer:标记脚部区域的内容（用于整个页面或页面的一块区域）

##### 11.article:独立的文章内容

##### 12.aside:相关内容或应用（常用于侧边栏）

##### 13.nav:导航类辅助内容四.内嵌框架：网页调用
  <iframe src="设置路径" name="内嵌框架的名字" width="宽度" height="高度">
  </iframe>

3.表单

一.表单：用来提交信息

表单元素

### 1.提交方式：<form method="get|post" action="提交地址"></form>

      get:显示提交方式，不安全，提交信息在地址栏上显示
      post:隐式提交方式，安全，信息不会在地址栏上显示

###   2.表单元素

#### 	1.文本框：<input type="text" />

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

#### 	3.按钮：普通按钮: <input type="button" />

#### 		4.提交按钮：<input type="submit" />

#### 		5.重置按钮：<input type="reset" />

#### 		6.图片按钮：<input type="image" src="路径" />

#### 	7.单选按钮：<input type="radio" name="" /> (name用来设置选择其中某一个单选按钮)

#### 	8.复选框：<input type="checkbox" checked="checked" />(checked:设置默认选项)

#### 	9.文件域：<input type="file" />

#### 	10.下拉列表框：<select>(selected设置默认选项)

			<option selected="selected">内容</option>
	      	      </select>

#### 	11.多行文本域：<textarea cols="宽" rows="高">内容</textarea>

#### 	12.隐藏域：<input type="hidden" value="" />

####         13.邮箱:<input type="email"  name="email"/>

####         14.网址:<input type="url"  name="userUrl"/>

####         15:数字:<input type="number"  name="num" min="0" max="100" step="10"/>

         step:数字间隔

####         16:滑块:<input type="range"  name="range1" min="0" max="10" step="2"/>

####         17：搜索的关键词:<input type="search"  name="sousuo"/>

###   3.文本标签：

	<label for="标识名"></label>
	注意：标识名要和标签中的id名相同

二.隐藏，只读和禁用

###   1.隐藏（hidden）：标签隐藏 页面上看不到效果

###   1.只读(readonly)：颜色不会发生变化，只能读取，不能操作

###   2.禁用(disabled)：颜色变灰色，无法使用

三.提示，必填，验证

### （提示）placeholder：input类型的文本框提供一种提示（hint）

### （必填）required：内容不能为空，

### （验证）pattern：用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

语义化：

1.作用：结构合理代码简单

便于浏览器识别

便于搜索引擎搜索

符合W3C规范

4.初识CSS3

一.CSS：层叠样式表

1.优势：使页面更加美观

页面和样式分离

使代码更加简洁

利于搜索引擎搜索

符合W3C的规范

2.选择器：

a.标签选择器：整个文档中所有的该标签内容都实现该样式

语法：标签名{样式1;

样式2;

}

b.类选择器：出现特殊情况，使用多次的样式

语法：.类名{样式1;

样式2;

}

c.ID选择器：只能使用一次的样式

语法：#id名{样式1;

样式2;

}

3.选择器的优先级：(有相同样式按优先级,没有相同样式都会使用)

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

二.样式表

1.行内样式表：写在标签内

使用方便，不利于后期维护

2.内部样式表：写在中

只设置一个网页的样式

3.外部样式表：新建一个CSS文件

多个网页可以共用一个css页面

<!--

@import url("css页面的路径");

-->

4.样式表的优先级：(就近原则)

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

三.层次选择器

### E F: 后代选择器 -> 获取E元素里面所有的F元素

### E>F: 子选择器 -> 获取E元素里面的第一代子元素

### E+F: 相邻兄弟选择器 -> 获取 E元素后面紧邻的F元素

### E~F: 通用兄弟选择器 -> 获取 E元素后面所有兄弟F元素

### 四.结构伪类选择器

### E:first-child: 第一个子元素的元素E

### E:last-child: 最后一个子元素的元素E

### E F:nth-child(n): 选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd

### E:first-of-type: 选择指定类型的第一个E元素

### E:last-of-type: 选择指定类型的最后一个E元素

### E F:nth-of-type(n): 选择父元素内具有指定类型的第n个F元素

### :nth-child(n)和:nth-of-type(n)区别？

 nth-child():先匹配位置，再匹配类型
 nth-of-type():先匹配类型，在获取到的类型中再匹配位置

四.属性选择器

### E[attr]：选择匹配具有属性attr的E元素

### E[attr=val]：选择匹配具有属性attr的E元素,并且属性值为val

### E[attr^=val]：属性值以val开头的

### E[attr$=val]：属性值以val结尾的

### E[attr*=val]：属性值中包含val的

5.CSS3美化网页元素

一. 范围标签

二.字体样式

font-family：类型

font-size:字体大小

font-style:字体风格：normal标准，italic斜体， oblique倾斜

font-weight:字体粗细bold粗体

font:字体缩写，顺序不能变： font:风格粗细大小类型;

三.文本样式

  color:文本颜色
  text-align:水平对齐方式，left:左 center:中 right:右，justify两端对齐
  text-indent:首行缩进（em）
  line-height：行高，作用：垂直居中或设置行距
  text-decoration:文本修饰，加下划线underline
			      中划线line-through
			      上划线overline
			      不加线none

  vertical-align：垂直对齐方式，居上top
			   	居中middle
				居下bottom
文本阴影：text-shadow : color  x-offset  y-offset  blur-radius;

1.阴影颜色   
2.X轴位移，用来指定阴影水平位移量     
3.Y轴位移，用来指定阴影垂直位移量 
4.阴影模糊半径，代表阴影向外模糊的模糊范围四.超链接伪类样式
	a:link  超链接未访问
	a:visited 超链接访问后
	a:hover 超链接悬浮
	a:active 超链接单击未释放

四.背景样式

  1.background-color：背景颜色
  2.background-image: 背景图片
  3.background-repeat:平铺方式
			不平铺：no-repeat
			水平平铺：repeat-x
			垂直平铺：repeat-y
			平铺：repeat
  4.background-position:背景位移
	例：background-position：30px 50px;向右向下
	第一个数：水平方向的移动，负的是向左移
				  正的是向右移

+	第二个数：垂直方向的移动，负的是向上移
   正的是向下移


   5.background:颜色 图片 位移 平铺;

   6.background-size:背景尺寸
     auto：默认值，使用背景图片保持原样
     percentage：当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
     cover：整个背景图片放大填充了整个元素
     contain：让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

五.列表样式

  1.list-style-type:列表的图标类型
		none:没有图标
		disc:实心圆
		circle：空心圆
		square：正方形
  2.list-style-position:列表图标的位置
		inside:在li里面
		outside:在li外面
   例：list-style-position: outside;
  3.list-style-image:列表显示的图片,每个列表的图片都一致
   例： list-style-image: url("../images/arrow-icon.gif");
    
  4.list-style缩写：
	例：list-style:none inside url(路径);

六：线形渐变：

 background: linear-gradient(to left,red,yellow,blue,...);渐变方向  渐变颜色1 渐变颜色2 ...
 background: -webkit-linear-gradient(to left,red,yellow,blue,...);//不同的浏览器加上不同的兼容

6.盒子模型

一.盒子模型：包含border，padding，margin属性

二.border：边框

  1.border-width:宽度
		thin:细的
		medium:加粗
		thick：更粗
  2.border-style:样式(实线solid，虚线dashed,双线double,点dotted...)
  3.border-color:颜色
  4.border:缩写,顺序可以打乱
	例：border:1px solid red;

三.margin和padding

  1.margin：设置盒子以外的间距(外间距)
  2.padding：设置内容和盒子边框的间距(内间距)
  3.缩写：margin和padding一样
	padding:10px;（四个方向都是10px间距）
	padding:10px 20px;（10px:上下 20px:左右）
	padding:10px 20px 30px;(10px:上 20px:左右 30px:下)
	padding:10px 20px 30px 40px(上 右 下 左)顺时针方向

四.尺寸

box-sizing：content-box  |  border-box  |  inherit
content-box:默认值，盒子的总尺度     
border-box:盒子的宽度或高度等于元素内容的宽度或高度
inherit:元素继承父元素的盒子模型模式

五.圆角边框

border-radius: 20px  10px  50px  30px;四个属性值按顺时针排列
圆形：元素的宽度和高度必须相同圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
制作上半圆或下半圆时：元素的宽度是高度的2倍，而且圆角半径为元素的高度值
制作左半圆或右半圆时：元素的高度是宽度的2倍，而且圆角半径为元素的宽度值
扇形：遵循“三同，一不同“,“三同”是元素宽度、高度、圆角半径相同“一不同”是圆角取值位置不同

六.盒子阴影

box-shadow:inset  x-offset  y-offset  blur-radius  color;

inset：阴影类型内阴影(默认是外阴影)
x-offset：X轴位移，指定阴影水平位移量
y-offset ：Y轴位移，用来指定阴影垂直位移量
blur-radius：阴影模糊半径阴影向外模糊的模糊范围
color：阴影颜色，定义绘制阴影时所使用的颜色

7.浮动

一.浮动：float

	float:left;向左浮动
	      right;向右浮动
	      none;不浮动
	特性：脱离标准文档流
	      将块级元素转换为内联元素
	      文字将会环绕浮动元素显示

二.clear:清除浮动(不是去掉浮动，让后面的元素不受上面浮动元素的影响)

left:清除上一个浮动元素的左浮动
	right:清除上一个浮动元素的右浮动
	both:清除所有的浮动

三.溢出处理：overflow

	visible:默认的，超出的部分继续显示
	hidden：超出部分不显示(隐藏)	
	scroll:显示滚动条
	auto：自动调整滚动条的出现

四.display:

  1.display:block;/*将内联元素转换为块级元素，显示元素内容*/
  2.display:inline;/*将块级元素转换为内联元素*/
  3.display:none;/*隐藏元素*/
  4.display:inline-block;/*既有块级元素又具有内联元素的特性*/

五.解决父级边框塌陷的方法

 1.在浮动元素后面加空的div 清除两边的浮动 clear：both
  2.设置父类元素的高度
  3.使用voerflow属性:overflow:hidden
  4.位父类添加伪类after:
   .clear:after{
	content: '';/*空内容*/
	display: block;/*显示为块元素*/
	clear: both;/*清除左右浮动*/
    }

8.定位网页元素

一.定位方式position：

  1.absolute;绝对定位：相对离它最近的已经定位的祖先元素为基准，如果没有就以浏览器窗口为基准
  2.relative;相对定位：相对于自己原来的位置而言
  3.fixed;固定定位：定位到一个位置，位置将不会发生变化，少用，很多浏览器不识别
  4.static:静态定位，默认

  5.注意：一个元素有绝对定位，它的上级有定位，则这个元素不再相对浏览器定位，而是相对于上级有定位的元素定位

二.z-index:处理层次

  1.值越大越在上层，
  2.z-index结合定位用，如果没有定位的元素默认z-index:0;

9.利用CSS3制作网页动画

一.CSS3变形

 transform:变形函数;
   变形函数：translate(x,y):平移函数,基于x,y坐标位移,
	         x轴左移为负数,右移为正数
		 y轴上移为负数,下移为正数
	     scale():缩放函数,缩小写为0-1,放大为1以上
	     rotate():旋转函数,单位deg(度)
	     skew():倾斜函数,单位deg(度)

二.transition:过渡函数

	transition:CSS属性名称 时间(单位:s) 动画函数 延迟时间;
	动画函数:ease：速度由快到慢（默认值）
		linear：速度恒速（匀速运动）
		ease-in：速度越来越快（渐显效果）
		ease-out：速度越来越慢（渐隐效果）
		ease-in-out：速度先加速再减速（渐显渐隐效果）

三.animation动画

  实现步骤：
	1.设置关键帧
		@keyframes 名称{
			from{css样式}
			percentage{css样式}
			to{css样式}
		}

	2.调用关键帧
	   animation:动画名称 动画时间 延迟时间 播放次数 播放方向 播放状态 动画发生的操作;

播放次数:默认为1

infinite:无限次播放

播放方向:normal，动画每次都是循环向前播放

	    alternate，动画播放为偶数次则向前播放
   动画的播放状态
	    running将暂停的动画重新播放
	    paused将正在播放的元素动画停下来
   动画发生的操作
	   forwards表示动画在结束后应用最后关键	     帧的位置
	   backwards表示会在向元素应用动画样式	     时迅速应用动画的初始帧
	   both表示元素动画同时具有forwards和         backwards的效果