第一个html
<!DOCTYPE html>
<html>
<head>
<title>第一个程序</title>
</head>
<body>
<h1>七里香</h1>
<!--h1是大标题，还有h2h3h4h5h6-->
<h6>哈哈哈</h6>
<p>是一种鸡屁股</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>七里香-周杰伦</title>
<meta charset="utf-8">
<!--一般写在head里面-->
</head>
<body>
<h1>七里香</h1>
<img alt="Amma" src="fff.jpg" width="390px" height="256px">
<a href="https://baike.baidu.com/item/%E4%B8%83%E9%87%8C%E9%A6%99/12009481?fr=aladdin" target="_blank">七里香</a>
<!--target="_blank"表示在新标签中打开-->
<p>窗外的麻雀，在电线杆上多嘴</p>
<p>你说这一句，很有夏天的感觉</p>
<p>手中的铅笔，在纸上来来回回</p>
<p>我用几行字来形容你是我的谁</p>
<p>秋刀鱼的滋味，猫跟你都想了解</p>
<p>初恋的香味就这样被我们寻回</p>
<p>那温暖的阳光，像刚摘的鲜艳草莓</p>
<p>你说你舍不得吃掉这一种感觉</p>
</body>
</html>
meta
<!DOCTYPE html>
<html>
<head>
<title>meta的用法</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--实现自适应-->
<meta http-equiv="refresh" content="5; http://man.fishc.com/html5"
</head>
<body>
<h1>"自适应"演示</h1>
<p>请分别在手机和PC上=打开</p>
<img id="target" src="fff.jpg" alt="amma" width="390px" height="256px" />
<p>《哈利·波特》（Harry Potter）是英国作家J.K.罗琳（J. K. Rowling）于1997～2007年所著的魔幻文学系列小说，共7部。其中前六部以霍格沃茨魔法学校（Hogwarts School of Witchcraft and Wizardry）为主要舞台，描写的是主人公——年轻的巫师学生哈利·波特在霍格沃茨前后六年的学习生活和冒险故事；第七本描写的是哈利·波特在第二次魔法界大战中在外寻找魂器并消灭伏地魔的故事。</p>
</body>
</html>
style
style后面如果是空的那么就没有指定，有什么内容说明指定了什么内容
style media="screen and (min-width:512px) and (max-width:1024px)"表示符合media后面的条件就用另一张图片作为背景
<html>
<head>
<meta charset="utf-8" />
<title>异灵术老师</title>
<style type="text/css">
body{
background-image: url("../image/异灵术老师.png")
}
h1{
text-align: center;
color: red;
}
h2{
margin-left: 60%;
color:aqua;
}
p{
color: deeppink;
text-indent: 32px;
font-size: 16px;
line-height: 32px;
}
a{
color: yellow;
background: black;
font-size: 55px;
}
</style>
<style media="print">
h1{
color: black;
}
h2{
color: aqua;
}
p{
color:deeppink;
}
</style>
<style media="screen and (min-width:512px) and (max-width:1024px)">
body{
background-image: url("image/fff.jpg");
}
</style>
</head>
<body>
<h1>铲车人，集合！</h1>
<h2>异灵术老师</h2>
<p>老师退出直播圈时，整个炉石界都沸腾了，人们纷纷在问：“谁是戴佳伟？”</p>
<p>有人说老师越来越菜了，在这里我澄清一下，老师一直都那么菜。</p>
<p>有人说戴佳伟是世界第一术士， 我查了一下，是老师自己说的。</p>
<p>新来的观众可能没见过老师厉害的时候，这里说明一下，老观众也没有。</p>
<p>有谣言说老师是彩笔，我澄清一下，这不是谣言。</p>
<p>直播间一半的弹幕都在说老师菜逼，我非常不解，另外一半弹幕干嘛去了。</p>
<p>戴佳伟问大师自己术士玩的怎么样，大师指着旁边烧开的水壶低头不语，戴佳伟问大师：“大师是说我术士的造诣已经炉火纯情？”大师说：“铁沸物。”</p>
<p>戴佳伟问大师自己猎人玩得和术士相比如何，大师指了指旁边的一副印象派油画和写实派水彩画，戴佳伟欣喜若狂：“您是说我的造诣就像这水彩画，比起油画来不可谓不细致？”大师闷哼一声：“油变彩了。”</p>
<p>听说叔叔要删游戏退游了，我当场就哭了，这样我心爱的老师不就是全炉石最菜的了吗</p>
<p>我在直播间看到你们编段子对老师大放厥词我都要急哭了，我怎么就想不出来这些段子呢。</p>
<a href="https://www.douyu.com/93589" target="_blank">老师在看着你哦~</a>
</body>
</html>
css
把style里面的文件拿出来，可以让html文件看起来简洁
<html>
<head>
<meta charset="utf-8" />
<title>异灵术老师</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width:512px) and (max-width:1024px)" href="screen512to1024.css"/>
<link rel="icon" type="image/x-icon" href="../image/favicon.ico" />
</head>
下面是.css文件
body {
background-image: url("../image/异灵术老师.png")
}
h1 {
text-align: center;
color: red;
}
h2 {
margin-left: 60%;
color: aqua;
}
p {
color: deeppink;
text-indent: 32px;
font-size: 16px;
line-height: 32px;
}
a {
color: yellow;
background: black;
font-size: 45px;
}
<link rel="icon" type="image/x-icon" href="../image/favicon.ico" />这句话用来设置页面左上角标记
base
<html>
<head>
<meta charset="utf-8" />
<title>异灵术老师</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width:512px) and (max-width:1024px)" href="screen512to1024.css" />
<base href="https://www.douyu.com" target="_blank" />
<link rel="icon" type="image/x-icon" href="../image/favicon.ico" />
</head>
<body>
<a href="93589">老师</a>
<a href="93590">test2</a>
<a href="93591">test3</a>
<!--这里相当于是打开了绝对路径是https://www.douyu.com/93589和https://www.douyu.com/93590等的网址-->
</body>
</html>
script
<!DOCTYPE html>
<html>
<head>
<title>定义文档内嵌脚本</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="炉石传说,狂野天梯,国服战士" />
<meta name="description" content="狗贼嘘嘘" />
<meta name="author" content="Sermiscry" />
<script type="text/javascript" src="patch.js" defer></script>
<noscript>
<p>浏览器不支持JavaScript会显示这个</p>
</noscript>
</head>
<body>
<!--defer属性，延迟执行脚本只能用于外部脚本文件-->
<!--async属性，异步执行脚本-->
<p>狗贼嘘嘘</p>
<p>是一个人</p>
<p>啊</p>
</body>
</html>
.js文件内容：
var x = document.getElementsByTagName("p");
for(var i = 0; i < x.length; i++)
{
x[i].innerText = "萌萌哒的鸡蛋饼到此一游";
}
注释
html5
<!--注释的内容在这里-->
css
/* 注释的内容 */
javascript
//单行注释
/*
多行
的注释
*/
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
