html和css的常用语法代码详解
2022/7/15 23:25:06
本文主要是介绍html和css的常用语法代码详解，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
前端html
html
超文本标记语言。文本，图片，视频，音频。
网页基本信息
一个基础的网页具有的一些信息。
<!-- 这是注释-->
<!--!DOCTYPE网页约束规范-->
<!DOCTYPE html>
<!--html网页开始的标签-->
<html lang="en">
<!--head网页头部-->
<head>
<!--meta描述性标签-->
<meta charset="UTF-8">
<!--title网页标题，显示在网页头部-->
<title>Title</title>
</head>
<!--body网页内容标签-->
<body>
<!--反斜杠闭合标签-->
</body>
</html>
网页基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>1级</h1>
<h2>2级</h2>
<h3>3级</h3>
<h4>4级</h4>
<h5>5级</h5>
<h6>6级</h6>
<!--段落标签-->
<p>一段</p>
<!--换行标签-->
<br/>
<!--水平线标签-->
<hr/>
<!--字体样式标签-->
<strong>粗体</strong>
<em>斜体</em>
<!--特殊符号-->
空格
>大于
<小于
©版权
⋂交集
⋧
</body>
</html>
图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--图像标签 -->
<!--src路径 -->
<!--alt找不到图片时候，显示的提示文字 -->
<!--title悬停文字 -->
<img src="./img/1.jpg" alt="书籍封面" title="悬停文字">
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<a name="top"></a>
<!--href跳转的页面 -->
<!--target="_blank" 在一个新的页面打开-->
<a href="hello.html" target="_blank">点击跳转</a>
<!--嵌套图片为一个链接 -->
<a href="hello.html"><img src="./img/1.jpg" alt="书籍封面" title="悬停文字">
</a>
<!--锚链接
1.定义一个标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
</body>
</html>
块元素和行内元素
块元素独占一行
行内元素只有一行
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序 -->
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<!--无序 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格table -->
<table border="1">
<!--行 -->
<tr>
<!-- 列colspan跨列 -->
<td colspan=2>列</td>
<td>列</td>
<td>列</td>
<td>列</td>
</tr>
</table>
</body>
</html>
音频视频
<video arc="" controls autoplay></video> <audio arc="" controls autoplay></audio>
网页结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页结构</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<article>文章内容</article>
<nav> 导航栏</nav>
<aside>侧边栏</aside>
<footer>
<h2>网页脚步</h2>
</footer>
</body>
</html>
内联框架
<!--内联框架 --> <iframe src="https://leetcode.cn" name="" frameborder="1" height="1000px" width="800px"></iframe>
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form method="post" action="demo7.html">
<!--表单的基本元素 -->
name:<input type="text" name="name"><br>
pwd:<input type="password" name="pwd"><br>
age:<input type="text" name="age"><br>
<!--单选框 -->
sex:
<input type="radio" name="sex" value="nan" checked="checked">men
<input type="radio" name="sex" value="nv" >women
<!--多选框 -->
<input type="checkbox" name="hobby" checked="checked">eat
<input type="checkbox" name="hobby" checked="checked">sleep
<input type="checkbox" name="hobby" checked="checked">games
<input type="checkbox" name="hobby" checked="checked">sport
<!--下拉框 -->
xialakuang：
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<!--提交 -->
<input type="submit" value="submit">
<!--文件 -->
<input type="file" name="files">
<!--数字验证 -->
<input type="number" name="num" max="10" step="1" min="1">
</form>
</body>
</html>
css
css：层叠级联样式表。用来美化网页。
css方式引入的三种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--方式一，样式在头文件中 -->
<style>
h1{
color: red;
}
</style>
<!--方式二，将样式单独建立，再引进来 -->
<link rel="stylesheet" href="../../css/demo1.css">
</head>
<body>
<h1>方式一</h1>
<h2>方式二</h2>
<!--方式三，直接在标签上面加上 一般不建议使用！-->
<h3 style="color: yellow">方式三</h3>
</body>
</html>
css三种样式选择器
id选择：id唯一
标签选择：所有相同标签
class选择：所有定义为此类的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器，所有h1标签都会变成此样式 */
h1{
color: yellow;
}
/*类选择器，类名可以定义多个，所有加此类名的标签拥有此样式*/
.b{
color: red;
}
/*id选择器，只有id为此的标签才拥有此样式*/
#a{
color: green;
}
</style>
</head>
<body>
<h1>标签选择器</h1>
<h2 id="a">id选择器</h2>
<h3 class="b">class选择器</h3>
<h3 class="b">class选择器</h3>
<h3 class="b">class选择器</h3>
</body>
</html>
四个层次选择器
<style>
/*后代选择器，body后面的都会渲染，儿子，孙子…… */
body p{
background: green;
}
/*子选择器,只选择body的儿子标签，孙子啥的不管 */
body>p{
background: red;
}
/*相邻兄弟选择器 同辈,它的下一个有样式 */
.active +p{
background: yellow;
}
/* 通用选择器*/
.active~p{
background: blue;
}
</style>
结构伪类选择器
<style>
/*ul的第一个子元素 */
ul li:first-child{
background: blue;
}
/*ul的最后一个子元素 */
ul li:last-child{
background: yellow;
}
/* p标签下的第二个子标签*/
p:nth-child(1){
background: red;
}
/*选中父元素下的类型为p元素的第二个*/
p:nth-of-type(2){
background: lightpink;
}
/*伪类，鼠标上去才会显示*/
a:hover{
background: blueviolet;
}
</style>
属性 选择器
=：等于
*=：包含
^=：以什么开头
$=：以什么结尾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
text-decoration: none;
margin-right: 5px;
border-radius: 5px;
background: lightpink;
text-align: center;
font: bold 20px/50px Arial;
}
/* 属性选择器*/
/* 选择带有id的标签*/
a[id]{
background: blueviolet;
}
/*选择id等于某个值的元素 */
a[id="1"]{
background: red;
}
/* 选择class中含有class的属性，可以不完全等于
去掉*就是等于，加上*就是含有
*/
a[class*="class"]{
background: green;
}
</style>
</head>
<body>
<p class="demo">
<a href="demo1.html" id="1">1</a>
<a href="demo2.html">2</a>
<a href="demo3.html">3</a>
<a href="demo4.html">4</a>
<a href="demo5.html" id="5">5</a>
<a class="class" href="">6</a>
<a class="sclass" href="">7</a>
</p>
</body>
</html>
字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-family: 楷体;
color: lightpink;
font-size: 20px;
font-weight: bolder;
}
</style>
</head>
<body>
<p>
《长命女·春日宴》
</p>
<p>出自五代冯延巳的《长命女·春日宴》</p>
<p>春日宴，绿酒一杯歌一遍。</p>
<p>再拜陈三愿：</p>
<p>一愿郎君千岁，</p>
<p> 二愿妾身常健，</p>
<p>三愿如同梁上燕，</p>
<p>岁岁长相见。</p>
</body>
</html>
文本样式和超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
color: red;
text-align: left;
text-decoration: none;
}
a:active{
color: yellow ;
}
a:hover{
color: yellow ;
}
a:visited{
color: darkgrey;
}
</style>
</head>
<body>
<img src="../img/1.jpg" alt="" width="50%" height="50%"><br/>
<a>作者：</a><br/>
<a>价格：</a>
</body>
</html>
列表
<style>
/*list-style: none;去掉列表前面的符号
list-style: decimal;数字
list-style: armenian;特殊符号
list-style: inside;实心圆圈
*/
ul li{
height: 30px;
list-style: disc;
}
ul{
background: darkgrey;
}
</style>
图片背景
<style>
body{
background-image: url("../img/1.jpg");
background-repeat: no-repeat;
}
</style>
盒子模型
<style>
/*给盒子加上样式*/
#box{
width: 300px;
border:1px solid yellow;
}
/*p:nth-of-type(1){*/
/*border: 1px dashed red;*/
/*}*/
p:nth-child(2){
border: 1px dashed red;
}
/*给input中的id属性的全加上虚线边框 */
input[id]{
border: 2px dashed green;
}
</style>
圆角边框
/*border-radius: 100px 0px 0px 0px;
左上 右上 右下 左下
box-shadow: 10px 10px 100px yellow;
设置阴影和颜色
*/
img{
background: transparent;
width: 300px;
height: 300px;
border: 0px solid ;
border-radius: 100% 100% 100% 100%;
box-shadow: 10px 10px 100px yellow;
}
display和float
<style>
/*display: block;盒子展示 块元素和非块元素的互相转换
float: right;盒子浮动
*/
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
span{
width: 200px;
height: 200px;
border: 1px solid red;
display: block;
float: right;
}
</style>
定位
固定定位：位置不会改变
相对定位：位置随着参数gaib
绝对定位：父有定位相对父定位，父不在相对浏览器
<style>
#f{
background: yellow;
border: 1px dashed rebeccapurple;
position: relative;/*相对定位*/
top: 120px;
left: 30px;
bottom: 0px;
right:0px;
}
#son{
background: blueviolet;
border: 1px dashed rebeccapurple;
position: absolute;/*绝对定位 父有定位相对父定位，父不在相对浏览器*/
top: 0px;
left: 0px;
bottom: 0px;
right:0px;
}
#daughter{
background: green;
border: 1px dashed rebeccapurple;
position: fixed;/*固定定位 */
}
</style>
这篇关于html和css的常用语法代码详解的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-12-29扎心了老铁！码农的「拧螺丝」之道~
- 2024-12-27前端高频面试题详解与实战攻略
- 2024-12-27前端高频面试真题解析与实战指南
- 2024-12-27前端面试实战：初级工程师必备技巧与案例分析
- 2024-12-27前端面试题及答案：新手必备指南
- 2024-12-27前端面试真题及答案解析：初级前端工程师必备指南
- 2024-12-25前端大厂面试真题解析与实战攻略
- 2024-12-25如何准备前端面试：新手指南
- 2024-12-25前端面试题详解与实战攻略
- 2024-12-25前端面试真题详解与实战攻略
