前端html

html

超文本标记语言。文本，图片，视频，音频。

网页基本信息

一个基础的网页具有的一些信息。

  1. <!-- 这是注释-->
  3. <!--!DOCTYPE网页约束规范-->
  4. <!DOCTYPE html>
  5. <!--html网页开始的标签-->
  6. <html lang="en">
  7. <!--head网页头部-->
  8. <head>
  9.     <!--meta描述性标签-->
  10.     <meta charset="UTF-8">
  11.     <!--title网页标题，显示在网页头部-->
  12.     <title>Title</title>
  13. </head>
  14. <!--body网页内容标签-->
  15. <body>
  17. <!--反斜杠闭合标签-->
  18. </body>
  19. </html>

网页基本标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>基本标签学习</title>
  6. </head>
  7. <body>
  8. <!--标题标签-->
  9. <h1>1级</h1>
  10. <h2>2级</h2>
  11. <h3>3级</h3>
  12. <h4>4级</h4>
  13. <h5>5级</h5>
  14. <h6>6级</h6>
  15. <!--段落标签-->
  16. <p>一段</p>
  17. <!--换行标签-->
  18. <br/>
  19. <!--水平线标签-->
  20. <hr/>
  21. <!--字体样式标签-->
  22. <strong>粗体</strong>
  23. <em>斜体</em>
  24. <!--特殊符号-->
  25. &nbsp;空格
  26. &gt;大于
  27. &lt;小于
  28. &copy;版权
  29. &bigcap;交集
  30. &gnsim;
  32. </body>
  33. </html>

图像标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>图像标签</title>
  6. </head>
  7. <body>
  8. <!--图像标签 -->
  9. <!--src路径 -->
  10. <!--alt找不到图片时候，显示的提示文字 -->
  11. <!--title悬停文字 -->
  12. <img src="./img/1.jpg" alt="书籍封面" title="悬停文字">
  14. </body>
  15. </html>

链接标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>链接标签</title>
  6. </head>
  7. <body>
  9. <a name="top"></a>
  10. <!--href跳转的页面 -->
  11. <!--target="_blank" 在一个新的页面打开-->
  12. <a href="hello.html" target="_blank">点击跳转</a>
  13. <!--嵌套图片为一个链接 -->
  14. <a href="hello.html"><img src="./img/1.jpg" alt="书籍封面" title="悬停文字">
  15. </a>
  17. <!--锚链接
  18.  1.定义一个标记
  19.  2.跳转到标记
  20.  -->
  21. <a href="#top">回到顶部</a>
  23. </body>
  24. </html>

块元素和行内元素

块元素独占一行

行内元素只有一行

列表

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>列表</title>
  6. </head>
  7. <body>
  8. <!--有序 -->
  9. <ol>
  10.     <li>1</li>
  11.     <li>2</li>
  12.     <li>3</li>
  13.     <li>4</li>
  14.     <li>5</li>
  15. </ol>
  16. <!--无序 -->
  17. <ul>
  18.     <li>1</li>
  19.     <li>2</li>
  20.     <li>3</li>
  21.     <li>4</li>
  22.     <li>5</li>
  23. </ul>
  24. </body>
  25. </html>

表格

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表格</title>
  6. </head>
  7. <body>
  8. <!--表格table -->
  9. <table border="1">
  11.     <!--行 -->
  12.     <tr>
  13.         <!-- 列colspan跨列 -->
  14.         <td colspan=2>列</td>
  15.         <td>列</td>
  16.         <td>列</td>
  17.         <td>列</td>
  18.     </tr>
  19. </table>
  20. </body>
  21. </html>

音频视频

  1. <video arc="" controls autoplay></video>
  2. <audio arc="" controls autoplay></audio>

网页结构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>网页结构</title>
  6. </head>
  7. <body>
  9. <header>
  10.     <h2>网页头部</h2>
  11. </header>
  13. <section>
  14.     <h2>网页主体</h2>
  15. </section>
  17. <article>文章内容</article>
  18. <nav> 导航栏</nav>
  19. <aside>侧边栏</aside>
  21. <footer>
  22.     <h2>网页脚步</h2>
  23. </footer>
  24. </body>
  25. </html>

内联框架

  1. <!--内联框架 -->
  2. <iframe src="https://leetcode.cn" name=""  frameborder="1" height="1000px" width="800px"></iframe>

表单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单</title>
  6. </head>
  7. <body>
  9. <form method="post" action="demo7.html">
  10.     <!--表单的基本元素 -->
  11.     name:<input type="text" name="name"><br>
  12.     pwd:<input type="password" name="pwd"><br>
  13.     age:<input type="text" name="age"><br>
  14.     <!--单选框 -->
  15.     sex:
  16.     <input type="radio" name="sex" value="nan" checked="checked">men
  17.     <input type="radio" name="sex" value="nv" >women
  18.     <!--多选框 -->
  19.     <input type="checkbox" name="hobby" checked="checked">eat
  20.     <input type="checkbox" name="hobby" checked="checked">sleep
  21.     <input type="checkbox" name="hobby" checked="checked">games
  22.     <input type="checkbox" name="hobby" checked="checked">sport
  23.     <!--下拉框 -->
  24.     xialakuang：
  25.     <select>
  27.         <option value="1">1</option>
  28.         <option value="2">2</option>
  29.         <option value="3">3</option>
  30.         <option value="4">4</option>
  31.     </select>
  32.     <!--提交 -->
  33.     <input type="submit" value="submit">
  34.     <!--文件 -->
  35.     <input type="file" name="files">
  36.     <!--数字验证 -->
  37.     <input type="number" name="num" max="10" step="1" min="1">
  39. </form>
  41. </body>
  42. </html>

css

css：层叠级联样式表。用来美化网页。

css方式引入的三种方式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!--方式一，样式在头文件中 -->
  7.     <style>
  8.         h1{
  9.             color: red;
  10.         }
  11.     </style>
  12.     <!--方式二，将样式单独建立，再引进来 -->
  13.     <link rel="stylesheet" href="../../css/demo1.css">
  14. </head>
  15. <body>
  16. <h1>方式一</h1>
  17. <h2>方式二</h2>
  18.     <!--方式三，直接在标签上面加上 一般不建议使用！-->
  19. <h3 style="color: yellow">方式三</h3>
  20. </body>
  21. </html>

css三种样式选择器

id选择：id唯一

标签选择：所有相同标签

class选择：所有定义为此类的

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         /*标签选择器，所有h1标签都会变成此样式 */
  8.         h1{
  9.             color: yellow;
  10.         }
  12.         /*类选择器，类名可以定义多个，所有加此类名的标签拥有此样式*/
  13.         .b{
  14.             color: red;
  15.         }
  17.         /*id选择器，只有id为此的标签才拥有此样式*/
  18.         #a{
  19.             color: green;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  25. <h1>标签选择器</h1>
  27. <h2 id="a">id选择器</h2>
  29. <h3 class="b">class选择器</h3>
  30. <h3 class="b">class选择器</h3>
  31. <h3 class="b">class选择器</h3>
  33. </body>
  34. </html>

四个层次选择器

  1. <style>
  2.   /*后代选择器，body后面的都会渲染，儿子，孙子…… */
  3.   body p{
  4.       background: green;
  5.   }
  6.   /*子选择器,只选择body的儿子标签，孙子啥的不管 */
  7.   body>p{
  8.       background: red;
  9.   }
  10.   /*相邻兄弟选择器 同辈,它的下一个有样式 */
  11.   .active +p{
  12.       background: yellow;
  13.   }
  14.   /* 通用选择器*/
  15.     .active~p{
  16.         background: blue;
  17.     }
  19. </style>

结构伪类选择器

  1. <style>
  2.         /*ul的第一个子元素 */
  3.     ul li:first-child{
  4.         background: blue;
  5.     }
  6.    /*ul的最后一个子元素 */
  7.    ul li:last-child{
  8.        background: yellow;
  9.    }
  10.  /* p标签下的第二个子标签*/
  11.        p:nth-child(1){
  12.            background: red;
  13.        }
  14.       /*选中父元素下的类型为p元素的第二个*/
  15.         p:nth-of-type(2){
  16.             background: lightpink;
  17.         }
  18. /*伪类，鼠标上去才会显示*/
  19.         a:hover{
  20.             background: blueviolet;
  21.         }
  22. </style>

属性 选择器

=：等于

*=：包含

^=：以什么开头

$=：以什么结尾

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  8.         .demo a{
  9.             float: left;
  10.             display: block;
  11.             height: 50px;
  12.             width: 50px;
  13.             text-decoration: none;
  14.             margin-right: 5px;
  15.             border-radius: 5px;
  16.             background: lightpink;
  17.             text-align: center;
  18.             font: bold 20px/50px Arial;
  20.         }
  22.         /* 属性选择器*/
  23.         /* 选择带有id的标签*/
  24.         a[id]{
  25.             background: blueviolet;
  26.         }
  27.         /*选择id等于某个值的元素 */
  28.         a[id="1"]{
  29.         background: red;
  30.         }
  31.         /* 选择class中含有class的属性，可以不完全等于
  32.            去掉*就是等于，加上*就是含有
  33.         */
  34.         a[class*="class"]{
  35.             background: green;
  36.         }
  38.     </style>
  39. </head>
  40. <body>
  41. <p class="demo">
  42.     <a href="demo1.html" id="1">1</a>
  43.     <a href="demo2.html">2</a>
  44.     <a href="demo3.html">3</a>
  45.     <a href="demo4.html">4</a>
  46.     <a href="demo5.html" id="5">5</a>
  47.     <a class="class" href="">6</a>
  48.     <a class="sclass" href="">7</a>
  49. </p>
  50. </body>
  51. </html>

字体

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         p{
  8.             font-family: 楷体;
  9.             color: lightpink;
  10.             font-size: 20px;
  11.             font-weight: bolder;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16. <p>
  17.     《长命女·春日宴》
  18. </p>
  19. <p>出自五代冯延巳的《长命女·春日宴》</p>
  20. <p>春日宴，绿酒一杯歌一遍。</p>
  21. <p>再拜陈三愿：</p>
  22. <p>一愿郎君千岁，</p>
  23. <p> 二愿妾身常健，</p>
  24. <p>三愿如同梁上燕，</p>
  25. <p>岁岁长相见。</p>
  27. </body>
  28. </html>

文本样式和超链接伪类

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         a{
  8.             color: red;
  9.             text-align: left;
  10.             text-decoration: none;
  12.         }
  13.         a:active{
  14.             color: yellow ;
  15.         }
  16.          a:hover{
  17.             color: yellow ;
  18.         }
  19.         a:visited{
  20.             color: darkgrey;
  21.         }
  23.     </style>
  24. </head>
  25. <body>
  26. <img src="../img/1.jpg" alt="" width="50%" height="50%"><br/>
  27. <a>作者：</a><br/>
  28. <a>价格：</a>
  29. </body>
  30. </html>

列表

  1. <style>
  2.     /*list-style: none;去掉列表前面的符号
  3.       list-style: decimal;数字
  4.       list-style: armenian;特殊符号
  5.       list-style: inside;实心圆圈
  6.     */
  7.     ul li{
  8.         height: 30px;
  9.         list-style: disc;
  10.     }
  11.     ul{
  12.         background: darkgrey;
  13.     }
  14. </style>

图片背景

  1. <style>
  2.     body{
  3.         background-image: url("../img/1.jpg");
  4.         background-repeat: no-repeat;
  6.     }
  7. </style>

盒子模型

  1. <style>
  2.    /*给盒子加上样式*/
  3.     #box{
  4.         width: 300px;
  5.         border:1px solid yellow;
  6.     }
  7.     /*p:nth-of-type(1){*/
  8.         /*border: 1px dashed red;*/
  9.     /*}*/
  10.     p:nth-child(2){
  11.         border: 1px dashed red;
  12.     }
  14.         /*给input中的id属性的全加上虚线边框 */
  15.     input[id]{
  16.         border: 2px dashed green;
  17.     }
  18. </style>

圆角边框

  1. /*border-radius: 100px 0px 0px 0px;
  2.                          左上 右上  右下 左下
  3.           box-shadow: 10px 10px 100px yellow;
  4.             设置阴影和颜色
  5.         */
  6. img{
  7.     background: transparent;
  8.     width: 300px;
  9.     height: 300px;
  10.     border: 0px solid  ;
  11.     border-radius: 100% 100% 100% 100%;
  12.     box-shadow: 10px 10px 100px yellow;
  13. }

display和float

  1. <style>
  2.     /*display: block;盒子展示 块元素和非块元素的互相转换
  3.      float: right;盒子浮动
  4.      */
  5.     div{
  6.         width: 200px;
  7.         height: 200px;
  8.         border: 1px solid red;
  10.     }
  11.     span{
  12.         width: 200px;
  13.         height: 200px;
  14.         border: 1px solid red;
  15.         display: block;
  16.         float: right;
  17.     }
  18. </style>

定位

固定定位：位置不会改变

相对定位：位置随着参数gaib

绝对定位：父有定位相对父定位，父不在相对浏览器

  1. <style>
  2.     #f{
  3.         background: yellow;
  4.         border: 1px dashed rebeccapurple;
  5.         position: relative;/*相对定位*/
  6.         top: 120px;
  7.         left: 30px;
  8.         bottom: 0px;
  9.         right:0px;
  10.     }
  12. #son{
  13.             background: blueviolet;
  14.             border: 1px dashed rebeccapurple;
  15.             position: absolute;/*绝对定位 父有定位相对父定位，父不在相对浏览器*/
  16.             top: 0px;
  17.             left: 0px;
  18.             bottom: 0px;
  19.             right:0px;
  20.         }
  22.  #daughter{
  23.             background: green;
  24.             border: 1px dashed rebeccapurple;
  25.             position: fixed;/*固定定位 */
  27.         }
  28. </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. ImageKnife组件，让小白也能轻松搞定图片开发

    本期我们给大家带来的是开发者周黎生的分享,希望能给你的HarmonyOS开发之旅带来启发~ 图片是UI界面的重要元素之一, 图片加载速度及效果直接影响应用体验.ArkUI开发框架提供了丰富的图像处理能 ...

  2. [题解][ARC089D] ColoringBalls

    题目大意 有 \(n\) 个白色的小球排成一排,有一个长为 \(k\) 的字符串 \(S\).接下来进行 \(k\) 次操作. 第 \(i\) 个操作,选择一段连续的小球(可以为空),若 \(S\) ...

  3. this-2

    读起来使你有新认识或可以使你离更确切的定义更近时的文章不应该被忽略.thisthis既不指向函数自身,也不指向函数的词法作用域(ES6中箭头函数采用词法作用域).this实际上是函数被调用时才发生绑定 ...

  4. 0.1+0.2不等于0.3，微信小程序云开发如何解决JavaScript小数计算精度失准的问题

    先看图 这个是JavaScript语言自身存在的一个问题.说道这里不得不提一下网上流传的JavaScript搞笑图 我们在使用云开发来开发微信小程序的时候,会经常遇到JavaScript小数计算精度失 ...

  5. Ruby 趣学笔记（二）

    Ruby 趣学笔记(二) 本文写于 2020 年 5 月 7 日 类的继承 之前忘记写了,Ruby 的继承写法是: class IPhone < Phone def initialize(id, ...

  6. 一文带你读懂 Hbase 的架构组成

    hi,大家好,我是大D.今天咱们继续深挖一下 HBase 的架构组成. Hbase 作为 NoSQL 数据库的代表,属于三驾马车之一 BigTable 的对应实现,HBase 的出现很好地弥补了大数据 ...

  7. CenterNet和CenterNet2笔记

    CenterNet和CenterNet2笔记 CenterNet是基于anchor-free的一阶段检测算法 CenterNet2是CenterNet作者基于两阶段的改进 CenterNet(Obje ...

  8. 【Unity Shader学习笔记】Unity基础纹理-单张纹理

    1 单张纹理 1.1 纹理 使用纹理映射(Texture Mapping)技术,我们把一张图片逐纹素(Texel)地控制模型的颜色. 美术人员建模时,会在建模软件中利用纹理展开技术把纹理映射坐标(Te ...

  9. HashMap 中的 hash 函数

    1. 什么是 hash 函数 hash 函数,即散列函数,或叫哈希函数.它可以将不定长的输入,通过散列算法转换成一个定长的输出,这个输出就是散列值.需要注意的是,不同的输入通过散列函数,也可能会得到同 ...

  10. String、StringBuilder、StringBuffer——JavaSE基础

    String.StringBuilder.StringBuffer String不可变 StringBuilder与StringBuffer均可变 StringBuilder线程不安全,效率高,常用 ...