html和css的常用语法代码详解

本文主要是介绍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>
<!--特殊符号-->
&nbsp;空格
&gt;大于
&lt;小于
&copy;版权
&bigcap;交集
&gnsim;

</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的常用语法代码详解的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

html和css的常用语法代码详解

前端html

网页基本信息

网页基本标签

图像标签

链接标签

块元素和行内元素

列表

表格

音频视频

网页结构

内联框架

表单

css

css方式引入的三种方式

css三种样式选择器

四个层次选择器

结构伪类选择器

属性 选择器

字体

文本样式和超链接伪类

列表

图片背景

盒子模型

圆角边框

display和float

定位

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯

属性选择器