上一篇：HTML5区域范围文本框的简单的代码是什么下一篇：CSS浮动的作用和意义是什么，如何使用

这篇文章主要介绍了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中有哪些常用语法，能做什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站，小编每天都会为大家更新不同的知识。