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="src\img\a.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
posted on 2019-09-03 18:52 一颗小白杨站在哨所旁 阅读(68) 评论(0) 编辑 收藏 举报