• HTML+css基础


    以Demo进行复习
    Demo1

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h1>一号标题</h1>
    <!--标题标签-->
    <p>段落</p>
    <!--段落标签-->
    </body>
    </html>
    
    

    Demo2
    html共6个标签
    h1到h6
    段落标签 p
    超链接标签 a
    图像标签 img

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文档标题</title>
         <!--文档标题标签-->
    </head>
    <br>
    <h1>欢迎来到我的博客园</h1>
    <p>你将会看到一些很露比的文章</p>
    我的地址是啥呢???</br>
    <a href="https://blog.csdn.net/qq_41827511">想了解请点击</a>
    </br>
    本人丑逼照:</br>
    <img src="srcimga.jpg" width="60" height="80">
    </body>
    </html>
    
    

    Demo3

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    
    <body>
    
    <b>这个文本是加粗的</b>
    
    <br />
    
    <strong>这个文本是加粗的</strong>
    
    <br />
    
    <big>这个文本字体放大</big>
    
    <br />
    
    <em>这个文本是斜体的</em>
    
    <br />
    
    <i>这个文本是斜体的</i>
    
    <br />
    
    <small>这个文本是缩小的</small>
    
    <br />
    
    这个文本包含
    <sub>下标</sub>
    
    <br />
    
    这个文本包含
    <sup>上标</sup>
    
    </body>
    </html>
    

    Demo4

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <!--Html5新特性-->
    <!--section元素表示一个页面中的一个区域,相当于HTML4中使用<div>标签-->
    <section>
      <h2>
        section标记的使用
      </h2>
      <p>完成百分比:100%</p>
      <input type="button" value="请点击">
    </section>
    <!--<article>元素表示页面中的一块与上下文不相关的独立内容-->
    <article>
    <header>
      <h1>
        苹果美容
      </h1>
    </header>
      <p>
        越美越丑
      </p>
      <footer>
        <p>2019/9/3</p>
      </footer>
    </article>
    <!--<aside>元素用来表示当前页面或者页面中一个内容区域块的注脚,例如日期,作者信息等-->
    <aside>
      <nav>
      侧栏
      <ul>
        <li>院校选择</li>
        <li>查看院校排名</li>
      </ul>
      </nav>
    </aside>
    </body>
    </html>
    
    

    CSS

    Demo5

    <!DOCTYPE html>
    <html lang="en">
    <head>
    
        <meta charset="UTF-8">
        <title>Title</title>
      <!--在head标签内写的选择器为css的内嵌式-->
      <!--标记选择器-->
      <style>
        a{
          font-size:9px;
          color:#F93;
        }
        </style>
      <!--类别选择器,又成类选择器-->
      <style>
        .one{
          font-family:宋体;
          font-size:24px;
          color:red;
        }
        .tow{
          font-family:宋体;
          font-size:16px;
          color:red;
        }
        .three{
          font-family:宋体;
          font-size:12px;
    
        }
        .four{
          color:blue;
        }
        </style>
      <!--id选择器-->
      <style>
        #first{
          font-family: 楷体;
        }
        #second{
          font-family: 宋体;
        }
      </style>
    </head>
    <body>
    <p>
      <a href="https://blog.csdn.net/qq_41827511">我的博客</a>
    </p>
    <h2 class="one">此标题用了选择器one</h2>
    <h2 class="tow">此标题用了选择器tow</h2>
    <h2 class="three">此标题用了选择器three</h2>
    <h2 class="three four">此标题用了选择器three和fou</h2>
    <strong><p id="first">此段落选择了选择器fist</p></strong>
    <strong><p id="second">此段落选择了选择器second</p></strong>
    <hr>
    <p style="color:red;font-size: 50px">行内样式</p>
    </body>
    </html>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
      <link href="/Css.css"/>
    </head>
    <body>
    <p>a</p>
    </body>
    </html>
    
    

    Css.ss

    
    p{
      color: #FF9933;
    }
    
    

    JavaScript

  • 相关阅读:
    《软件架构设计》温昱著读后感(一)
    质量属性II(信息领域热词分析)
    质量属性
    2020寒假学习进度报告16
    2020寒假学习进度报告15
    Nginx运行报错unknown directive ""
    使用ajax的几种方式
    Shiro中@RequiresAuthentication等等注解介绍
    shiro自定义异常无法被捕获总是抛出AuthenticationException解决方案
    java中String和int相互转换常用方法详解
  • 原文地址:https://www.cnblogs.com/gaochunhui/p/11700621.html
Copyright © 2020-2023  润新知