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

原文地址:https://www.cnblogs.com/gaochunhui/p/11700621.html