<!DOCTYPE html>
<!-- html5的标识，告诉浏览器这是一个html5的页面
请按解析html5的方式解析 -->
<html><!-- 开标签 -->
<head>
<meta charset="utf-8">
<!-- meta:元标签 -->
<!-- charset:属性 utf-8:属性值 -->
<!-- charset：编码格式 -->
<!-- utf-8：几乎包含了200多种语言里的所有字符 -->
<!-- GB-2312国家标准 -->
<!-- GBK国家标准扩展包 -->
<title>hello world</title>
</head>
<body>
<!-- 主体 -->
<div>无实意标签</div>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<p>段落标签</p>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F19%2F03%2F15%2F75076c485081d15ed9c224ad3e4ce4a1.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638409640&t=f92ba2c347633842bf700f96e1053ce8">
<input type="text" name="">
<input type="number" name="">
<input type="password" name="">
<br>
性别：
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<br>
兴趣爱好:
<input type="checkbox" name="">
玩游戏
<input type="checkbox" name="">
睡觉<!-- 复选框 -->
<input type="checkbox" name="">
学习
<ul type="square"><!-- circle 圆圈-->
<!-- 无序列表 -->
<li>aaaa</li>
<li>cccccc</li>
<li>aaaa</li>
<li>cccccc</li>
<li>aaaa</li>
<li>cccccc</li>
</ul>
<ol type="a"> <!-- A,i,I -->
<li>aaaa</li>
<li>cccccc</li>
<li>aaaa</li>
<li>cccccc</li>
</ol>
<a href="https://www.baidu.com">
百度一下
</a>
</body>
</html><!-- 闭标签 -->
最后效果：
![]()
css基础
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- css:层叠样式表
特点：
1.继承性，继承父级的某些样式
2.层叠性，可被后来者覆盖 -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">/*尖头括号是html*/
/*头部样式表*/
ul{
background: yellow;
}/*此为css*/
</style>
</head>
<body>
<div style="width:100px;height:100px;background:lightblue;">
![]()
<!-- 行内样式表，极差，不允许使用 在项目中绝对不允许这样使用-->
</div>
<ul>
<li>aaaaaa</li>
<li class="aaa">bbbbbb</li>
<li class="aaa" id="li3">cccccc</li>
<li class="aaa">dddddd</li>
<!-- class名可以重复，id名不可以重复，当需要选中多个时用class -->
<li>eeeeee</li>
</ul>
</body>
</html>
最终效果
![]()
由此得到一个命名的方法
<!-- 驼峰命名法
大驼峰命名法XiaoMing
小驼峰命名法xiaoMing
xiao_ming
xiao-ming -->
css外部链接
li{
color: red;
}
#li3{
background: green;
color: red;
}
.aaa{
background: pink;
color: purple;
}
li{
color: lightblue !important;
}
css特征
/*css优先级：
1.后来者居上，越往后越说了算；
2.id>class>标签；
3. !important优先级最最高，不可能被后者覆盖，不到最迫不得已不要使用；
4.头部样式和外部样式
*/
/*.代表class*/
/*#代表id*/
浙公网安备 33010602011771号