HTML5

最新推荐文章于 2024-05-28 16:17:33 发布

Miss.Huang

最新推荐文章于 2024-05-28 16:17:33 发布

阅读量695

点赞数

分类专栏： HTML 文章标签： html5 html 前端

本文链接：https://blog.csdn.net/mikuct/article/details/127595333

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML入门

一、网页的基本结构

<html>
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>

二、常用标签

标题标签：

<h1>~<h6>

水平线标签：

hr

换行标签：

br

加粗标签：

strong

倾斜标签：

em

段落标签：

三、图像标签

<img />

四、超链接

<a></a>

两个属性：

href 跳转地址

target 跳转目标

三大功能：

①页面之间的跳转

<a href="XXX" traget="_self"></a>

自身页面跳转

<a href="XXX" traget="_blank"></a>

新标签页跳转

②锚定连接跳转

<a href="#one"></a>

<a id="one"></a>

③功能性跳转

<a href="mailto:1300342970@qq.com"></a>

五、列表

1、无序列表：ul-li

2、有序列表：ol-li

3、定义列表：dl-dt-dd

六、特殊符号

1、大于号：>

2、小于号:<

3、双引号:"

4、版权符号©

5、空格:

七、表格 table

表格：table

行：tr

列：td

标题：th

<table>
   <tr>
      <td></td>
  </tr>
</table>

八、媒体元素

对于以前：flash

对于目前：HTML5.0

1、视频

<video></video>

支持的格式：*.mp4 *.ogg *.webm

九、表单

 <form action="" method> </form>

表单元素标签

<input type=""/>

常用的表单元素类型：

文本框 text

密码框 password

单选框 radio

复选框 checkbox

下拉列表* select+option

多行文本域* textarea

文件域 file

普通按钮 button

提交按钮 submit

重置按钮 reset

日期 data

电子邮箱 email

网址 url

数字 number（max/min/step/value）

滑块 rangs

隐藏域 hidden

图片按钮实现submit提交按钮的功能： <input type="image" src="#">

十、网页内嵌框架

<iframe></iframe>

使用<a>标签target属性跳转

<a href="#" target="frm">点我看</a>

<iframe name="frm" scrolling="yes" src="" frameborder="0" width="1410px" height="700px"></iframe>

scrolling="yes/no"滚动条

frameborder="0/1"框框

CSS开篇

背景颜色：background-color

显示方式：display:inline（行）、block（块）、none（不显示）、inline-blocak（行块）;

行内元素标签：

不会独占一行，不支持宽度和高度的设置；

<strong>，<em>，<a>，<img>，<input>

块级元素标签：

会独占一行，支持宽度和高度的设置;

				<h1>~<h6>，<p>，<li>，<tr>，<tb>

HTML5.0新增的结构元素标签

header

footer

section

初识CSS（层叠样式表）

一、3种样式

1、行内样式

<p style="color:red;">我是段落标签</p>

2、内部样式

<style type="text/css">
  p{
    color:pink;
  }
</style>

3、外部样式

<link rel="stylesheet" href="css/MyStyle.css">

优先级：就近原则

二、3种选择器

1、标签选择器

		p{
			color:red; 
		}

2、类选择器

	class="one"
	.one{
		color:red; 
	}

3、ID选择器

	id="one"
	#one{
		color:red;
	}

优先级： ID选择器>类选择器>标签选择器

三、标准文档流

1、行内元素：不会独占一行，不支持宽度和高度的设置

		span strong img em a input

2、块级元素：会独占一行，支持宽度和高度的设置

	p h1~h6 ul li ol dl dt dd div

3、改变标准文档流的方法之一

display显示方式：inline、block、inline-block、none

四、复合选择器

1、并集选择器：使用逗号隔开：

p，h1{

}

2、后代选择器：使用空格隔开：

.top li{

}

3、子选择器：使用>隔开:

.top>li{

}

4、相邻兄弟选择器：使用+隔开:

.a+li{

}

5、通用兄弟选择器：使用~隔开:

.a~li{

}

6、结构伪类选择器：

① .top li:nth-of-type(2){
  
}
确定类型后再输量

② .top li:nth-child(2){

}
确定数量后再类型

7、属性选择器

li[clss]							带有class属性的li标签
li[class=c]						带有class属性且值为c的li标签
li[class^=c]					带有class属性且值为c开头的li标签
li[class$=c]					带有class属性且值为c结尾的li标签
li[class*=c]					带有class属性且值包含c的li标签

使用CSS美化页面

一、超链接

	<a href="">XX</a>

伪类样式：

1、a:link 鼠标未单机访问时的样式

2、a:visited 鼠标单击点击访问后的样式

3、a:hover 鼠标悬浮其上的样式

4、a:active 鼠标单击未释放的样式

注意：实际开发网页中，只写a{ }和a:hover{ }

二、文本美化

1、text-decoration 文本装扮

2、text-indent 首行缩进

3、line-height 行高

4、font-style 字体风格（italic斜体）

5、font-weight 字体粗细（bold加粗）

6、font-size 字体尺寸（30px）

7、font-familyh 字体类型（”微软雅黑“）

8、color 字体颜色

注意字体样式顺序font：字体风格>字体粗细>字体尺寸>字体类型

三、HTML5.0新增样式

1、文本阴影

text-shadow:30px 30px 1px green;
						(x轴  y轴 模糊半径 颜色)

2、盒子阴影

box-shadow:0px 0px 10px green;
					（x轴 y轴 模糊半径 颜色）

3、背景渐变

background:①.线性渐变：linear-gradient(to bottom,red,green);

background:②.径向渐变：radial-gradient(red, green);

网页中的四个方向：top、bottom、left、right;

4、背景相关美化 1、背景颜色 background-color 2、背景图片 background-image:url("img/xxx.jpg") 3、背景重复 background-repeat:no-repeat; 4、背景定位 background-position:X Y; 5、背景尺寸 background-size:X Y;

5、列表相关美化 1、列表项样式 list-style:none; 2、列表项图片 list-style-image:url(img/xxx.jpg);

四、盒子模型

一、盒子模型三要素：

1、外边距 margin

盒子与盒子之间的距离

2、内边距padding

内容到盒子边框的距离

3、边框 border

如何使用：

		border:1px solid black;

考点：四种边框样式线型

soild 单实线

double双实线

dashed 虚实

dotted 点线

4、清除所有元素的默认内外边距

						*{

							margin:0;

							padding:0;
							}

5、如何计算盒子模型的尺寸

①内盒尺寸计算：内容+边框+内边距

②外盒尺寸计算：内容+边框+内边距+外边距

6、处理盒子模型网页居中（前提要有宽度） margin:0px auto;

二、圆角边框

border-radius

1、圆形

width:100px

height:100px

border-radius:50%;

2、半圆

width:100px

height:50px

border-radius:50px 50px 0px 0px;

3、扇形

width:100px

height:100px

border-radius:100px 0px 0px 0px;

三、盒子阴影

box-shadow:X轴 Y轴模糊半径模糊颜色;

内阴影：box-shadow: inset 0px 0px 10px yellow;

外阴影：box-shadow: 0px 0px 10px yellow;

四、拯救盒子模型

区别于：

①、盒子模型的总尺寸=元素内容的总尺寸，不会收到padding的影响

box-sizing:border-box;

②、盒子模型的总尺寸=元素内容的总尺寸+padding，会收到padding的影响 box-sizing: content-box;

五、弹性盒子布局父容器设置弹性盒子布局 display:flex;

子元素水平对齐方式每个项目左右距离相等 justfy-content:space-around;

子元素垂直对齐方式每个项目上下距离相等 align-items:center;

是否要换行 flex-wrap: wrap;

五、浮动

一、浮动

float:left/right/none;

一旦使用了浮动的元素，将会失去标准文档流（块元素独占一行）的特点；

区别于：display:inline-block;

1、默认会有间距；

2、默认只能左上角布局

清楚浮动元素带来的影响：

clear:left/right/both;

使用浮动学会网页布局：

国字型布局（1-3-1）

拐角型布局（1-2-1）

T型布局

二、解决父级盒子塌陷问题

1、写明父级元素的高度；

2、给父级元素增加一个子元素设置clear:both；

3、设置父级元素overflow:hidden;

4、给父级元素追加伪类样式（推荐）

.father:after{
			content:"";
			display:block;
			clear:both;
}

三、溢出部分的处理

overflow:

hidden 溢出部分不可见

scroll 无论是否溢出都会显示滚动条

auto 如果溢出则会显示滚动条

visible 溢出部分可见

六、网页中的动画属性

transform:

提供了四种变形动画：

位移 translate(100px, 100px);

缩放 scale(1.2); 单位是倍数

旋转 rotate(30deg); 单位是角度deg

倾斜 skew(30deg); 单位是角度deg

“黄油”过渡效果

注意：黄油过渡效果要写在元素的原始样式中将来通过hover伪类事件触发

transition:all 0.4s linear 2s;

解释：

all：过渡属性；

0.4s：过渡完成时间

linear（线性）：过渡转速曲线

2s：过渡延迟时间

Miss.Huang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5

HTML5入门
复制链接

扫一扫

专栏目录

HTML5

HTML入门

一、网页的基本结构

二、常用标签

三、图像标签

四、超链接

五、列表

六、特殊符号

七、表格 table

八、媒体元素

九、表单

十、网页内嵌框架

CSS开篇

初识CSS（层叠样式表）

一、3种样式

二、3种选择器

三、标准文档流

四、复合选择器

使用CSS美化页面

一、超链接

二、文本美化

三、HTML5.0新增样式

四、盒子模型

五、浮动

六、网页中的动画属性

“相关推荐”对你有帮助么？