zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    linux下shell显示-bash-4.1#不显示路径解决方法
    update chnroute
    An error "Host key verification failed" when you connect to other computer by OSX SSH
    使用dig查询dns解析
    DNS被污染后
    TunnelBroker for EdgeRouter 后记
    mdadm详细使用手册
    关于尼康黄的原因
    Panda3d code in github
    Python实例浅谈之三Python与C/C++相互调用
  • 原文地址:https://www.cnblogs.com/gaochunhui/p/11700621.html
Copyright © 2011-2022 走看看