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

顺晟科技

2022-09-15 21:15:03

290

前端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>

上一篇：超酷炫的转场动画？CSS 轻松拿下！下一篇：从零开始制作【立体键盘】，画UI免写

09

2022-11

定义css样式,常用CSS样式属性

CSS的一些常用样式，如背景、文字、文本、表格、列表等，以及一些常用的场景，如居中对齐、溢出、隐藏元素等。01、常用样式 1.1、background背景设置元素背景的样式 background，更
31

2022-10

css - 常用less函数_个人文章 - SegmentFault 思否

1，文本行数限制.add-text-row-limit(@row) {overflow: hidden;text-overflow: ellipsis;.create();.create() when
19

2022-10

webpack怎么配置,在Webpack 5 中如何进行 CSS 常用配置？

本文摘要：主要通过实操讲解运用Webpack 5 CSS常用配置的方法步骤本文摘要：主要通过实操讲解运用Webpack 5 CSS常用配置的方法步骤前文已谈到可以通过配置 css-loader 和 s
19

2022-10

css绝对单位是什么,CSS的常用单位及用法小结

CSS的常用单位及用法小结 1.绝对长度单位绝对长度单位是一个固定的值，可以反映真实的物理尺寸。在CSS中，最常用的绝对长度单位是像素（px），其他绝对长度单位还包括毫米（mm）、厘米（cm）、英寸
15

2022-09

CSS标签详解 CSS3标签

Css3概述从2010年开始,HTML5与CSS3就一直是互联网技术中最受关注的两个话题。从前端技术的角度可以把互联网的发展分为三个阶段：第一阶段是web1.0以内容为主的网络，前端主流技术是HTM
15

2022-09

CSS进阶内容—盒子和阴影详解

CSS进阶内容在学习了CSS基本知识之后，我们需要进一步了解CSS，因此写下了这篇文章当然如果没有学习之前的知识，可以到我的主页中查看之前的文章：秋落雨微凉 - 博客园 CSS三大特性首先我们先

Html
Js
Css

Css

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

前端html

网页基本信息

网页基本标签

图像标签

链接标签

块元素和行内元素

列表

表格

音频视频

网页结构

内联框架

表单

css

css方式引入的三种方式

css三种样式选择器

四个层次选择器

结构伪类选择器

属性 选择器

字体

文本样式和超链接伪类

列表

图片背景

盒子模型

圆角边框

display和float

定位

属性选择器