Html
a标签
<a href="http://baidu/com" target="_blank">网络测试</a>
<a href="http://baidu/com" target="_self">网络测试</a>
# _blank :新建一个标签页打开
# _self :在当前页面打开
img标签
<img src="./image.png" alt="我是备胎">
# scr 可以引用网络图片地址和本地图片路径地址
# alt 意味这图片如果挂了可以给个提示
表格标签
<table border="1">
<thead>
<tr>
<th>
名字
</th>
<th>
心情
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Wang Huahua
</td>
<td>
:)
</td>
</tr>
<tr>
<td>
Li Ming
</td>
<td>
:D
</td>
</tr>
</tbody>
</table>
<header>
<h1>Hello World!</h1>
<small>ABCDEFGHIJK</small>
<hr>
</header>
极目新闻记者 周浩 见习记者 杨锦英
从5月21日至6月19日，广州市用近一个月的时间，正面迎战德尔塔变异株，并控制住疫情。
在宣布成立疫情防控问责联合调查组近两个月后，8月12日，广东省纪委监委发布《广州市新冠肺炎 疫情防控问责情况通报》，对20名领导干部严肃问责。其中，广州市常务副市长被诫勉处理，市卫健委主任被免，荔湾区委书记、区长双双被免职。
对于此次问责，有人表示力度很大，但也有人觉得是否用力过猛。暨南大学粤港澳大湾区应急管理教育促进会卢文刚会长认为，不能因问责否定广州市的疫情防控工作，相反，问责能更客观、全面、高标准地评价广州疫情防控工作。总体来看，问责客观、严格而适度，也为全国疫情防控注入“强心剂”，有震慑效应。
<hr>
<footer>
Contact | Terms | Privacy | About
</footer>
# header 定义文档的页眉
# footer 定义文档的页脚
link与script
<header>
<link rel="stylesheet" href="base.css">
</header>
<script src="base.js"></script>
<button>Signup</button>
abbr标签
The <abbr title="People's Repulic of China">PRC</abbr>
was founded in 1949
# 标记一个缩写
CSS
*{
margin: 0; => 内距
padding: 0; => 外距
box-sizing: border-box; => 元素指定的任何内边距和边框都将在已设定的宽度和高度进行绘制
font-family: 'Poppins',sans-serif; => 规定元素的字体系列
}
body{
background: #3498db; => 背景色
overflow: hidden; => 规定当内容溢出时发生的事情，hidden 是将溢出内容进行裁剪
}
.container{
max-width: 440px; => 设置段落最大的宽度
padding: 0 20px; => 内边距的属性 这里代表着 上边距为 0 右边距为 20px
margin: 170px auto; => 外边距的属性 这里代表着 上外边距为 170px 浏览器计算外距
}
.wrapper{
width: 100%; => 设置宽度百分比
background: #fff;
border-radius: 5px; => 设置元素的圆角边框
}
.wrapper .title{
line-height: 90px; => 设置行间的距离(行高)
background: #2980b9;
text-align: center; => 规定元素中的文字的水平对其方式
border-radius: 5px 5px 0 0;
color:#fff; => 设置文本颜色
font-size:30px; => 设置文本尺寸
font-weight: 600; => 设置文本粗细
}
.wrapper form{
padding:30px 25px 25px 25px; => 属性所有内边距
}
.wrapper form .row{
height:45px; => 设置元素的高度
margin-bottom:15px; => 设置元素的下外编剧
position:relative; => 生成相对定位的元素，相对于其他正常位置进行定位
}
.wrapper form .row input{
height: 100%;
width:100%;
outline: none; => 绘制元素周围的一条线 none意味着 outline-color、outline-style、outline-width 都不生效
padding-left: 60px; => 设置元素左内边距
border-radius: 5px;
border: 1px solid lightgrey; => 设置边框(像素、样式、颜色) solid 为实心的
font-size: 16px;
transition: all 0.3s ease; => 设置元素的过渡动画 这是 默认过渡 只将过渡延长至0.3s
}
.wrapper form .row i {
position: absolute; => 生成绝对定位的元素
width: 47px;
height:100%;
color:#fff;
font-size: 18px;
background:#2980b9;
border: 1px solid #2980b9; => 设置属性所有的边框属性
border-radius: 5px 0 0 5px;
display: flex; => 设置弹性布局
align-items: center; => 属性为弹性容器内项目指定默认对齐方式
justify-content: center; => 属性(水平)对齐弹性容器的项目，
}
.wrapper form .pass{
margin: -8px 0 20px 0; => 设置元素外边距的宽度
}
.wrapper form .pass a{
color: #2980b9;
font-size: 17px;
text-decoration: none; => 属性规定添加文本的修饰
}
.wrapper form .pass a:hover{
text-decoration: underline; => 属性添加到文本的修饰(定义文本下的一条线)
}
.wrapper form .button input{
color:#fff;
font-size:20px;
font-weight: 500;
padding-left: 0px;
background:#2980b9;
border: 1px solid #2980b9;
cursor: pointer; => 属性规定要显示的光标的类型(光标呈现为指示链接的指针 【一只手】)
}
form .row input:focus{
border-color: #3498db; => 属性设置四条边框的颜色
box-shadow: inset 0px 0px 2px 2px rgba(26, 188, 156, 0.25); =>属性向框添加一个或多个阴影
}
form .button input:hover{
background: #3498db;
}
.wrapper form .signup-link{
text-align: center;
margin-top: 20px; => 设置属性元素的上外边距
font-size: 17px;
}
.wrapper form .signup-link a{
color: #2980b9;
text-decoration: none; => 属性规定添加文本的修饰
}
form .signup-link a:hover{
text-decoration: underline; => 定义文本下的一条线
}
