1基本结构
<!DOCTYPE html>
<html><head><title>this is a good website</title></head><body><h1>hello!</h1></body>
</html>运行效果如下
（编辑器提示waings:"缺少所需的 'lang' 特性"是因为没有指定语言，以简体中文为例，把<html>改成<html lang="zh-CN">即可）
字符编码：<meta charset="UFT-8">
双标签：有开始标签和结束标签，内容写在开始标签和结束标签之间
单标签：只有开始标签没有结束标签
属性：格式：<标签名 属性名1=“属性值1” 属性名2=“属性值2”...>
属性定义在开始标签或者单标签之中，通过属性设置标签效果
<!DOCTYPE html><!--文档声明 --><html><!--根标签 -->内容
</html><head>，<!--头部标签，放在<html>..</html>中 -->内容
</head><body><!--主体标签，在<html>..</html>之中 -->内容
</body><title>你的网页的名字</title><!--网页标题,放在<head>..</head>之中 --><h1></h1> ... <h6></h6> <!-- 标题（h1最大，h6最小） -->
<p></p> <!-- 段落 -->
<strong></strong> <!-- 加粗（语义化强调） -->
<em></em> <!-- 斜体（语义化强调） -->
<span></span> <!-- 行内容器（无默认样式） -->
<a href="URL" target="_blank">....</a> <!-- 创建超链接，href指定连接目标地址，target设置链接打开方式，_blank表示在新窗口打开，_self表示在当前窗口打开 -->
<div></div> <!-- 块级容器 -->
<audio></audio> <!-- 音频 -->
<video></video> <!-- 视频 --><img src="image.jpg" width="160" height="160" alt="描述"> <!-- 插入图片，src指定路径，alt为图像添加替代文本 -->
<br> <!-- 换行 -->
<hr> <!-- 水平分割线 -->
<input type="text"> <!-- 输入框（类型可选：text/password/checkbox等） -->
<meta charset="UTF-8"> <!-- 文档元数据（如字符编码） -->
<link rel="stylesheet" href="style.css"> <!-- 引入CSS --><!--一些通用的属性
属性 作用 示例
id 唯一标识 <div id="header">
class 类名 （CSS/JS 钩子） <p class="text-red">
style 内联样式 <span style="color: red;">
title 悬停提示文本 <a title="点击查看">
data-* 自定义数据属性 <div data-user-id="123">
hidden 隐藏元素 <p hidden>隐藏内容</p>
-->2页面美化
方法1：在<head>中添加<style>标签，统一管理样式
方法2：编写css文件，把样式单独存为.css文件，然后在html中引入
color: #333; /* 文字颜色（十六进制/RGB/颜色名） */
font-family: "Arial", sans-serif; /* 字体栈（优先使用Arial，无则用系统无衬线字体） */
font-size: 16px; /* 字体大小（px/rem/em） */
font-weight: bold; /* 字重（normal/bold/100-900） */
text-align: center; /* 对齐（left/center/right/justify） */
line-height: 1.5; /* 行高（无单位表示字体倍率） */
text-decoration: none; /* 去除链接下划线 */background-color: #f8f8f8; /* 背景颜色 */
background-image: url("bg.jpg"); /* 背景图片 */
background-size: cover; /* 背景图覆盖方式（cover/contain） */
border: 1px solid #ddd; /* 边框（粗细 样式 颜色） */
border-radius: 8px; /* 圆角（可单独设置top-left等） */
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 盒子阴影（X偏移 Y偏移 模糊 颜色） */width: 100%; /* 宽度（%/px/vw等） */
height: 200px; /* 高度 */
padding: 10px 20px; /* 内边距（上右下左/缩写） */
margin: 0 auto; /* 外边距（auto可居中块级元素） */
box-sizing: border-box; /* 盒模型计算方式（推荐） */卡片效果
.card {background: white;border-radius: 10px;box-shadow: 0 3px 10px rgba(0,0,0,0.1);padding: 20px;transition: transform 0.3s;
}
.card:hover {transform: translateY(-5px); /* 悬停上浮 */
}按钮
.btn {display: inline-block;background: #3498db;color: white;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;
}
.btn:hover {background: #2980b9;
}导航栏
.navbar {display: flex;justify-content: space-between;background: #2c3e50;padding: 15px;
}
.nav-link {color: white;text-decoration: none;margin: 0 10px;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head><style>body{color:black;background-color:pink;font-weight: bold;text-align:center;}.card{background:white;width:40%;margin:auto;border-radius:8px;box-shadow:0 3px 10px rgba(0,0,0,0.1);padding:20px;transition: transform 0.3s;}.card:hover{transform:translateY(-5px);}.btn {display: inline-block;background: #3498db;color: white;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;}.btn:hover {background: #2980b9;}.button-group-h {justify-content: center;display: flex;gap:88px;}</style><title>this is a good website</title>
</head><body><h1>hello!</h1><h1>欢迎使用本网页！</h1><div class="card"><div class="button-group-h"><button class="btn">登录</button><button class="btn">注册</button></div></div></body>
</html>
运行结果
