总体内容演示
<!-- 文本类型为HTML -->
<!-- 文本类型为HTML -->
<!DOCTYPE html>
<!-- lang是language缩写 en是English缩写 -->
<html lang = "en">
<head>
<!-- 字符集为UTF-8 -->
<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>Oguri Cap</title>
<style>
#时间{
color:blue;
/* 字体大小 */
font-size:10px;
}
a{
color:black;
text-decoration: none;
}
p{
text-indent: 20px;
}
#center{
width:65%;
margin:0 auto;
}
</style>
</head>
<body>
<div id="center">
<!-- 用a标签实现超链接,_self在当前页面 -->
<a href = "https://www.cnblogs.com/whynot-ne/" target="_self">我的博客：https://www.cnblogs.com/whynot-ne/</a>
<br action="" method="post">
用户名:<input type="text" name="username";>
密码:<input type="password" name="password";>
年龄:<input type="text" name="age";>
<input type="submit" value="提交";><br><br>
性别:<label><input type="radio" name="gender" value="1" id="male">男</label>
<label><input type="radio" name="gender" value="2" id="female">女</label><br><br>
爱好:<label><input type="checkbox" name="hobby" value="java">java</label>
<label><input type="checkbox" name="hobby" value="game">game</label>
<label><input type="checkbox" name="hobby" value="laugh">laugh</label>
</form>
<!-- h1~h6标题大小改变 -->
<h5>小栗帽</h5>
<!-- 行内定义文本样式 -->
<h6 style ="color:black;">Oguri Cap</h6>
<p> 1990年5月夺得安田纪念赛冠军后，小栗帽获得的赏金已经达到了日本历代第一名。
但是后半年由于脚伤，小栗帽陷入了低迷，连续大败，秋季天皇赏第6，日本杯第11。
赛后让小栗帽引退的声音越来越多，马主甚至收到了威胁信，最终决定让小栗帽在年底的有马纪念赛之后引退。
就在所有人都不看好的情况下，小栗帽在12月的有马纪念赛上奇迹般地夺冠。
这场比赛被称为<b>“奇迹的复活”</b>、“让人感动的last run”等，为小栗帽的生涯划上了完美的句号</p>
<!-- 图片的引入方式 -->
<img src = "C:\Users\Lenovo\Desktop\html\20220220120837_9fdfe.png" width="200px">
<!-- 下划线 -->
<hr>
<h3 id="时间">
时间
</h3>
<table border="1" cellspacing ="0" width="200px">
<tr>
<th>这是</th>
<th>一个</th>
</tr>
<tr>
<th>意义不明的</th>
<th>表格</th>
</tr>
</table>
</div>
</body>
</html>
部分细节
在CSS中，有三种方式来引入样式表：行内样式、内部样式和外部样式。
行内样式：直接在HTML元素的style属性中指定CSS样式
<p style="color: blue; font-size: 16px;">这是一个行内样式的段落。</p>
优点是可以针对特定的元素进行样式设置
缺点是样式与内容混合在一起，不易维护和复用
内部样式：使用style标签在HTML文档的head部分定义CSS样式
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>这是一个内部样式的段落。</p>
</body>
优点是样式与内容分离
缺点是限制在当前HTML文档中使用
外部样式：将CSS样式定义在一个独立的外部文件中，并通过link标签引入到HTML文档中
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>这是一个外部样式的段落。</p>
</body>
优点是优点是可以在多个HTML文档中共享样式，易于维护和复用
CSS三种选择器：元素选择器，id选择器，类选择器(优先级:id,类,元素)
span{}//用<span>标签
.cls{}//<span class="cls">时操作
#time{}//<span id="time">时操作
其他标签
<a href = "https://www.cnblogs.com/whynot-ne/" target="_self">我的博客</a>//超链接
<video src=" " controls></video>//视频
<audio src=" " controls></audio>//音频
<p>//段落标签
<b>或<strong>//文本加粗
盒子模型
用div标签包裹文本，进行设置(例如给定div标签名字为center)
#center{
width:65%;
margin:0 auto;
}