前端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的常用语法代码详解的更多相关文章

  1. 【第六课】Nginx常用配置下详解

    目录 Nginx常用配置下详解 1.Nginx虚拟主机 2.部署wordpress开源博客 3.部署discuz开源论坛 4.域名重定向 5.Nginx用户认证 6.Nginx访问日志配置 7.Ngi ...

  2. Javascript常用的设计模式详解

    Javascript常用的设计模式详解 阅读目录 一:理解工厂模式 二:理解单体模式 三:理解模块模式 四:理解代理模式 五:理解职责链模式 六:命令模式的理解: 七:模板方法模式 八:理解javas ...

  3. ARM Cortex-M底层技术(2)—启动代码详解

    杂谈 工作了一天,脑袋比较乱.一直想把底层的知识写成一个系列,希望可以坚持下去.为什么要写底层的东西呢?首先,工作用到了这部分内容,最近和内部Flash打交道比较多,自然而然会接触到一些底层的东西:第 ...

  4. Delphi中TStringList类常用属性方法详解

    TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的. 常规的用法大家都知道,现在来讨论它的一些高级的用法. 先把要讨论的几个属性列出来: 1.CommaText 2.Delim ...

  5. Eclipse或Myeclipse常用快捷键组合详解

    Eclipse 是一个开放源代码的.基于Java的可扩展开发平台,就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境.. Eclipse(Myeclipse)中有很多便于开发的快捷键 ...

  6. maven常用插件配置详解

    常用插件配置详解Java代码    <!-- 全局属性配置 --> <properties> <project.build.name>tools</proje ...

  7. CSS position overflow float 属性 详解

    position  overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...

  8. 转：springmvc常用注解标签详解

    Spring5:@Autowired注解.@Resource注解和@Service注解 - IT·达人 - 博客园--这篇顺序渐进,讲得超级好--此人博客很不错http://www.cnblogs.c ...

  9. ExtJs常用布局--layout详解（含实例）

    序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...

随机推荐

  1. StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程)

    @ 目录 StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程) 一.下载ELK的安装包上传并解压 1.Elasticsearch下载 2.Logstash下载 3.Kibana ...

  2. java自学中出现的问题或者？

    自学java之路,是如此的坎坷.经过一段时间的自学,我得出一些总结! 总结如下: 1.     在学习编程之路(Java)的,最基本的还是学习之路,对编程前程深感迷茫2.    网络中有许许多多的编程 ...

  3. k8s入门之ConfigMap(九)

    ConfigMap是k8s的配置管理工具,通常用来保存明文的配置信息,以key-value形式传递配置. 一.使用命令创建ConfigMap对象 1.通过--from-literal参数创建 kube ...

  4. Springcloud及Git线上配置详解

    SpringCloud 这个阶段该如何学? 三层架构 + MVC 框架: Spring IOC AOP SpringBoot,新一代的JavaEE开发标准,自动装配 模块化~ all in one,代 ...

  5. Java synchronized那点事

    前言 请看上篇:Java 对象头那点事 文章中的源码都有不同程度缩减,来源于openjdk8的开源代码(tag:jdk8-b120). 锁粗化过程 偏向锁 ①:markword中保存的线程ID是自己且 ...

  6. vue大型电商项目尚品汇（前台篇）day02

    现在正式回归,开始好好做项目了,正好这一个项目也开始慢慢的开始起色了,前面的准备工作都做的差不多了. 而且我现在也开始慢慢了解到了一些项目才开始需要的一些什么东西了,vuex.router这些都是必备 ...

  7. linux篇-centos7安装DHCP服务器

    1检查防火墙和selinux(关闭) 关闭防火墙和selinux,这边不多说 2检查DHCP状态 3安装DHCP软件包 4把系统默认的样例复制 5修改配置文件 option domain-name & ...

  8. 如何实现将拖动物体限制在某个圆形内--实现方式vue3.0

    如何实现蓝色小圆可拖动,并且边界限制在灰色大圆内?如下所示 需求源自 业务上遇到一个组件需求,设计师设计了一个"脸型整合器"根据可拖动小圆的位置与其它脸型的位置关系计算融合比例 如 ...

  9. Dockerfile 使用 SSH

    如果在书写 Dockerfile 时,有些命令需要使用到 SSH 连接,比如从私有仓库下载文件等,那么我们应该怎么做呢? Dockerfile 使用 SSH Dockerfile 文件配置 为了使得 ...

  10. 04C++核心编程(二-泛型编程)

    Day08 笔记 1 函数模板 1.1 泛型编程 – 模板技术 特点:类型参数化 1.2 template< typename T > 告诉编译器后面紧跟着的函数或者类中出现T,不要报错, ...