html
网页索引：index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="文字显示在网页点击的介绍">
<meta name="keywords" content="算法，计算机">
<title>Web应用课</title>
<!-- logo -->
<link rel="icon" href="images\acwing图标.jpg">
</head>
<body>
<!--这是一个标题 【注释快捷键 Ctrl + /】-->
<span>行内元素</span>
<span>多个span标签内容显示都在同一行</span>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
<i>i斜线</i>
<d>d加粗</d>
<p>p分段,dr回车</p>
<p>其实就是加了前后行间距</p>
<p>再分段</p>
<p>再再分段</p>
<p>
段落的内容里面回车p标签没有响应<br>大部分标签也会忽略回车的作用，但是
br标签可以实现回车效果
</p>
<p>挑选你的老婆</p>
<img src="images\倪豆子1.jpg" alt="">
<img src="images\蕾姆4.jpg" alt="">
<img height="380" src="images\紫罗兰2.jpg" alt="">
<!-- type格式 ， 相对路径从/开始写,好习惯 ,controls给了一个控制方式，可以放大、暂停 -->
<!-- 一个感叹号+Tap直接补全初始模板 -->
</body>
</html>
<!-- 树形结构 : html两个子节点:head和body标签 -->
<!--默认习惯:网站的入口创建一个index -->
<!-- 图片只设置高度，宽度同比压缩 -->
<!-- 链接'?'后面的都是参数，且形式为 参数 = -->
<!-- required必须填写 -->
<!-- 相同ridio的勾选按钮互斥 -->
<!-- 前端后端互传为字符串 -->
<!-- textarea 可以拖动放缩的输入文本框 -->
<!-- ol有序 ul无序 列表li 可嵌套新分ol在li里面 -->
<!-- dl dt ：t理解为title dd数据 -->
html习题
1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web应用课作业</title>
<meta name="keywords" content="acwing,web,html">
<meta name="description" content="本课程为【AcWing工程课系列——Level-3 第一篇】《Web应用课》，讲解Web相关知识。">
<link rel="icon" href="/images/logo.jpg">
<!-- 存疑：写成png出不来图标 -->
</head>
<body>
</body>
</html>
<!-- 发现复制的相对路径为反斜杠 ， 但y总写的时候都是斜杠/ -->
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>春江花月夜</h2>
<h5>张若虚</h5>
<p>
春江潮水连海平，海上明月共潮生。<br>
滟滟随波千万里，何处春江无月明！<br>
江流宛转绕芳甸，月照花林皆似霰；<br>
空里流霜不觉飞，汀上白沙看不见。<br>
江天一色无纤尘，皎皎空中孤月轮。<br>
江畔何人初见月？江月何年初照人？<br>
人生代代无穷已，江月年年望相似。
</p>
<hr>
<pre>
int main()
{
int a, b;
scanf("%d%d", &a, &b);
printf("%d %d\n", a, b);
return 0;
}
</pre>
<p>
<i>春眠不觉晓，</i>
<b>处处闻啼鸟。</b>
<del>夜来风雨声，</del>
<ins>花落知多少。</ins>
</p>
</body>
</html>
<!-- pre预处理格式 -->
3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img width="600" src="/images/mountain.jpg" alt="山">
</body>
</html>
4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio controls src="/audios/bgm.mp3"></audio>
<video width="600" controls src="/videos/video2.mp4"></video>
</body>
</html>
5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="/about.html">About</a>
<a href="https://www.acwing.com" target="_blank">
<img width="50" src="/images/logo.png" alt="logo">
</a>
<!-- 链接跳转页面 ： 链接提示内容 -->
</body>
</html>
6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="/login.html">
<label for="username">用户名</label>
<input type="text" name="username" id="username" required minlength="3" maxlength="15" placeholder="用户名">
<label for="age">年龄</label>
<input type="number" name="age" id="age" required placeholder="年龄">
<label for="email">邮箱</label>
<input type="email" name="email" id="email" required placeholder="邮箱">
<label for="password">密码</label>
<input type="password" name="password" id="password" required placeholder="密码">
<label for="resume">个人简介</label>
<textarea name="resume" id="resume" cols="30" rows="10" placeholder="个人简介"></textarea>
<label for="lang">语言</label>
<select name="lang" id="lang">
<option value="Cpp">Cpp</option>
<option value="Java">Java</option>
<option value="Python">Python</option>
</select>
<button type="submit">提交</button>
<!-- 需要多敲熟练 -->
</form>
</body>
</html>
7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>第一讲</li>
<li>
第二讲
<ul>
<li>第一小节</li>
<li>第二小节</li>
<li>第三小节</li>
</ul>
</li>
<li>
第三讲
<ol>
<li>第一小节</li>
<li>第二小节</li>
<li>第三小节</li>
</ol>
</li>
</ol>
</body>
</html>
<!-- 多级标题ol有序显示序号 ， ul无序不显示序号 li标题 -->
<!--
<ol>
<li>第一点</li>
<li>第二点</li>
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</ol>
-->
8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<caption>成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>100</td>
<td>99</td>
<td>98</td>
</tr>
<tr>
<td>Bob</td>
<td>99</td>
<td>98</td>
<td>97</td>
</tr>
<tr>
<td>Tom</td>
<td>98</td>
<td>97</td>
<td>96</td>
</tr>
</tbody>
</table>
</body>
</html>
<!--table ： caption表格标题 thead表格第一行 tr包含一行 ： th加粗单元格 ，tbody表格内容 td不加粗单元格 -->
9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<h3>我的收藏夹</h3>
</header>
<section>
<h4>图片</h4>
<figure>
<img width="100" src="/images/logo.png" alt="logo">
<figcaption>logo</figcaption>
</figure>
<figure>
<img width="100" src="/images/mountain.jpg" alt="山">
<figcaption>山</figcaption>
</figure>
</section>
<section>
<h4>古诗</h4>
<article>
<h5>春晓</h5>
<p>
春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。
</p>
</article>
<article>
<h5>咏柳</h5>
<p>
碧玉妆成一树高，万条垂下绿丝绦。不知细叶谁裁出，二月春风似剪刀。
</p>
</article>
</section>
<footer>
©2018-2022 Me 版权所有
</footer>
</body>
</html>
<!--figcaption添加描述 section每个部分 ©2018-2022 Me 版权所有 -->
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
©<Web>版权所有
</body>
</html>
<!--版权© 左括号< 右括号> -->
版权声明：本文为m0_58466526原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。