html5+css3

最新推荐文章于 2024-08-10 15:00:00 发布

中前晚

最新推荐文章于 2024-08-10 15:00:00 发布

阅读量47

点赞数

文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/m0_66402939/article/details/132367761

版权

html

<html>
    <head>
        <title>我的第一个网站</title>//标题
        <meta charset="utf-8">//描述文档属性 
    </head>
    //内容
    <body>
        加强天道超！！！
    </body>
</html>

标签介绍

常用标签

<h1></h1>
...
<h6></h6>
//生成h1~h6快捷键：h$*6
<h1 align="left"></h1>//左
<h1 align="center"></h1>//中
<h1 align="right"></h1>//右
<p>我是一个段落标签</p>
<br>//换行
<hr color="red" width="300px" size="20px">//水平线，颜色为红色，宽度为300px，高度为20px
<img src="文件地址或图片名称" alt="图片不见辣" width="300px" title="天道超">//图片不见是显示alt内信息，当鼠标悬停在图片上是显示title内信息
<a href="url">你好</a>//文字超文本链接
<a href="url">
	<img src="文件地址或图片名称">
</a>//图片超文本链接

常用文本标签（可嵌套）

<p></p>//普通
<i></i>//斜体
<b></b>//加粗
<em></em>//强调文本
<strong></strong>//加重语气
<span></span>//无特殊含义
<del></del>//删除线

有序列表

<ol type="a">
    <li>html</li>
     <li>css</li>
     <li>js</li>
</ol>

无序列表

<ul type="disc">//disc实心圆circle空心圆
    <li>html</li>
    <li>css</li>
    <li>js</li>
</ul>

表格

<table border="1" width="400px" hight="400px">
    <tr>
    	<td>单元格</td>//列数
    </tr>//行数
</table>//表格

水平合并单元格

colspan

垂直合并单元格

rowspan

FORM表单

一个完整的表单包括三个基本组成部分：表单标签，表单域，表单按钮

<form name="input" action="url" method="get">
	<input type="text">//文本框
    <input type="password">//密码框
    <input type="submit" value="登录">//提交按钮
</form>

块元素和内联元素

       块级元素         	         内联元素

块元素会在页面内独占一行（自上向下垂直排列）行内元素不会独占页面中的一行，只占自身大小
可以设置width，height属性行内元素设置width，height属性无效
一般块级元素可以包含行内元素和其他块级元素一般内联元素包含内联元素不包含块级元素

常见块级元素

div,form,h1~h6,hr,p,table,ul,等

常用内联元素

a,b,em,i,span,strong等、

行内块级元素（特点：不换行、能够识别宽高）

button,img,input等

html5新增标签

div容器标签

//以前
<body>
    <div id="header"></div>
    <div id="nav"></div>
    <div id="article">
    	<div id="section"></div>
    </div>
    <div id="silder"></div>
    <div id="footer"></div>
</body>
//现在
<body>
    <header></header>//头部
    <nav></nav>导航
	<article>代表一个独立的、完整的相关内容快，例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等
		<section></section>定义文档中的节，不如章节、页眉、页脚
	</article>
    <aside></aside>侧边栏
	<footer></footer>脚部
</body>

注意：老版本浏览器可能无法兼容新增标签

css

选择器，以及一条或多条声明（样式）

<head>
    <style>
        h3{
            color:blue;
            font-size:30px;
        }
         h3{
            color:red;
            font-size:20px;
        }
    </style>
</head>
<body>
    <h3>
        厉不厉害你超哥
    </h3>
</body>

外部样式表

创建一个public.css文件，在html文件中使用link用来统一该页面的样式

<head>
    <link rel="stykesheet" href="./public.css">
</head>
<body>
    <h3>
        厉不厉害你超哥
    </h3>
</body>

h3{
    color:red;
    font-size:30px;
}

选择器

全局选择器

*{
     color:red;
     font-size:30px;
}//优先级最低

元素选择器

h1{
     color:red;
     font-size:30px;
}

类选择器

<head>
    <style>
    	.content{
    	color:red;
    }
    </style>
    
</head>
<body>
    <h3 class="content">
        厉不厉害你超哥
    </h3>
</body>

类名不能以数字开头

ID选择器

<head>
    <style>
    	#text{
    	color:red;
    }
    </style>
    
</head>
<body>
    <h3 id="text">//id名称不能重复，不能以数字开头 
        厉不厉害你超哥
    </h3>
</body>

合并选择器

h1,p,a{
     color:red;
     font-size:30px;
}

设置背景属性

background-color:red;//背景颜色
background-image:url("1.jpeg");//图片背景
background-repeat:repeat-x;//水平方向重复
background-repeat:repeat-y;//垂直方向重复
background-repeat:no-repeat;//不重复
background-size: 100% 100%;
background-size: cover;//保持图片横纵比并将图片缩放成完全覆盖背景区域的最小大小

文本属性

text-align:center;//文本居中显示
text-decoration:overline;//文本修饰
text-transform:captialize;//定义每个单词开头大
text-indent:30px;//首行文本缩进

表格属性

table,td{
border:1px solid:red;
}//为表和表格添加1px的红色边框
border-collapse:collapse;//折叠边框
text-align:center;//表格文字对齐
padding:20px//表格填充
background-color:green; color:white//表格填充色为绿色，文字颜色为白色

css盒子模型

margin（外边距）

border（外框）

padding（内边距）

content（内容）

float浮动

position定位

position:relative;相对定位

position:absolute;绝对定位

position:fixed; 固定定位

z-index覆盖，值越大就在越上层

border-radius圆角效果

box-shadow阴影效果

创建动画

<style>
    div{
        width:200px;
        height:200px;
        background-color:red;
        animation:myAnim 3s linear 0s infinite;
    }//动画执行3s，0s延时，一直重复
    div:hover{
        animation-play-state: paused;
    }
    @keyframes myAnim{
        0%{
            opacity:0.2//透明度，1表示不透明
             width:200px;
            background-color:red;
        }
         50%{
              width:300px;
            background-color:green;
        }
         100%{
              width:400px;
            background-color:yellow;
        }
    }
</style>
<body>
    <div>
        闪闪
    </div>
</body>

媒体查询

<style>
    .box{
            width:200px;
        	height:200px;
        }
    @media screen and (max-width: 768px){
        .box{
            background-color:aqua;
        }
    }
</style>