one 过
<!--
vs code 安装插件
Chinese 简体中文
HTML Snippets 智能提示HTML标签，以及标签的含义
HTML CSS Support 智能提示css类名以及id
Bracket Pair Colorizer 给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色
Auto Close Tag 自动闭合HTML/XML 标签
Auto Rename Tag 自动闭合HTML/XML 标签
Beautify 格式化 html js css
open in browser 快速打开网页
-->
<!-- shift+! -->
<!-- -->
<!DOCTYPE html> <!--声明 按照html5 去解析页面 -->
<html lang="en"> <!--en 英文 "zh-CN" 中文网站-->
<head>
<meta charset="UTF-8"> <!--网站的编码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>xxxxxx</title> <!--浏览器上方显示的内容 -->
<base target="_blank"/> <!--base 控制 链接标签打开的方式 -->
</head>
<body>
<h1> </h1>到 <h6> <!--标题标签 从大到小-->
<p></p> <!-- 段落标签-->
<hr/> <!--水平线标签 -->
<br/> <!-- 单标签 换行-->
<div></div> <!--盒子 独占一行 -->
<span></span> <!--盒子 共占一行 -->
<strong></strong> <!--文字粗体 -->
<em></em> <!-- 斜体-->
<del></del> <!--删除线 -->
<ins></ins> <!--加下划线 -->
<img src="路径" alt="图片不存在显示的内容" title="鼠标放在图片上显示的内容"
width="宽度" height="高度" border="10"> <!-- 图片标签 border="10" 边框-->
<a href="https://www.baidu.com/" target="_blank">去百度</a><!-- 链接标签 _blank 创建一个新的窗口到指定网址-->
<!-- 表示空格-->
< <!--表示符号 < -->
> <!--表示符号 > -->
<pre> </pre> <!-- 格式化文本标签 里面的内容按照文本显示 -->
</body>
</html>
<head></head> <!--头部 -->
<title></title> <!--浏览器上方显示的内容 -->
<base target="_blank"/> <!--base 控制 链接标签打开的方式 -->
<body> </body> <!-- 身体-->
<h1> </h1>到 <h6> <!--标题标签 从大到小-->
<p></p> <!-- 段落标签-->
<hr/> <!--水平线标签 -->
<br/> <!-- 单标签 换行-->
<div></div> <!--盒子 独占一行 -->
<span></span> <!--盒子 共占一行 -->
<strong></strong> <!--文字粗体 -->
<em></em> <!-- 斜体-->
<del></del> <!--删除线 -->
<ins></ins> <!--加下划线 -->
<img src="路径" alt="图片不存在显示的内容" title="鼠标放在图片上显示的内容"
width="宽度" height="高度" border="10"> <!-- 图片标签 border="10" 边框-->
<a href="https://www.baidu.com/" target="_blank">去百度</a><!-- 链接标签 _blank 创建一个新的窗口到指定网址-->
<!-- 表示空格-->
< <!--表示符号 < -->
> <!--表示符号 > -->
<pre> </pre> <!-- 格式化文本标签 里面的内容按照文本显示 -->
<!--..........................................................-->
<!--头部 -->
<!--浏览器上方显示的内容 -->
<!--base 控制 链接标签打开的方式 -->
<!-- 身体-->
<!--标题标签 从大到小-->
<!-- 段落标签-->
<!--水平线标签 -->
<!-- 单标签 换行-->
<!--盒子 独占一行 -->
<!--盒子 共占一行 -->
<!--文字粗体 -->
<!-- 斜体-->
<!--删除线 -->
<!--加下划线 -->
<!-- 图片标签 border="10" 边框-->
<!-- 链接标签 _blank 创建一个新的窗口到指定网址-->
<!-- 表示空格-->
<!--表示符号 < -->
<!--表示符号 > -->
<!-- 格式化文本标签 里面的内容按照文本显示 -->
two 过
1
2
3
4
5
6
************************************************************************
<table border="1" width="300" height ="200" align="center" cellspacing="10" cellpadding="20"> //表格标签
<caption>老子操尼玛逼</caption> //文字居中
<tr> //代表行
<th>表头</th>
<td>单元格</td> //代表单元格
<td rowspan="2">合并行</td>
<td colspan="3">合并列</td>
</tr>
</table>
<!--无序列表-->
<ul>
<li>香蕉</li>
<li>火龙果</li>
<li>车离子</li>
<!--有序列表-->
<ol>
<li>中国</li>
<li>美国</li>
<li>加拿大</li>
</ol>
<!--自定义列表-->
<dl>
<dt>湖北</dt>
<dd>武汉</dd>
<dd>黄刚</dd>
</dl>
<!--form 表示重置的范围-->
<form>
<!--输入-->
<input type="text" value="单行文本输入框" > <br>
<input type="password" ><br>
<!--radio 单选框 name相同的话表示一个组-->
<input type="radio" name="表示一个组" >
<!--checkbox 复选框 name相同的话表示一个组-->
<input type="checkbox" name="y"> <br>
<!--button 按钮-->
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
<!--reset 从置按钮-->
<input type="reset" value="重置按钮">
<input type="image" src="图像形式的提交按钮《路径》">
<input type="file" value="文件域"> //上传文件
</form>
<label>相当于快捷键<input type="text"/></label>
<label for="ha">相当于快捷键:</label> <input type="text" id="ha"/>
<textarea cols="30" rows="10"></textarea> //文本域
<!--下拉菜单-->
<select>
<option value="">请选择</option>
<option value="" selected="selected">a</option> //默认选项
<option value="">b</option>
<option value="">c</option>
<option value="">d</option>
</select>
************************************************************************
three 过
1
2
3
4
5
<h2 style="color :red;">啊啊啊 </h2> //行类样式表
<link rel="stylesheet" href="路径"/> //引用外部样式表
<style>
h2{ //内联样式表
}
.aa{ //类选择器 //内联样式表
}
<div id="s1 "></div>
#s1{ //id 选择器 //内联样式表
}
*{ //选择全部
}
.bw1 a ui li{ // 选择class bw1 再选择里面的 a 标签 和 li 标签
}
div>a{ //选择div标签里面的第一个出现div包含的a标签
}
p.bw1{ //选择p标签里面的class bw1
}
p,span,.bw1{ //选择p span .bw1 标签
}
</style>
样式表的语法：
font-size: 18px; /*字体大小*/
color:brown;/*字体颜色*/
font-family: "微软雅黑";
font-weight: 200; /*加粗*/
font-style: italic; /*倾斜*/
font-style: normal; /*字体正常*/
text-align: center; /*文字水平居中*/ span 标签不能居中
text-align: right; /*文字向右显示*/
text-align: left; /*文字向左显示*/
text-indent: 2em; /*首行缩进*/
text-decoration: none; /*去掉修饰*/
text-decoration: line-through; /*加入删除线*/
line-height:25px; // 行的高度
************************************************************************
four 过
1
2
3
4
5
a:link { /*未访问的超链接颜色*/
color: red;
}
a:visited{ /*以访问的超连接颜色*/
color:green;
}
a:hover{ //鼠标移动到链接上
}
a:active{//选定链接
}
text-decoration:none; //取消链接的下划线
//块元素
width: 200px; /*盒子的宽度*/ 只适用于块元素
background-color: red //背景颜色
background: yellow; // 背景颜色
background-image: url("路径");/*背景图片*/
background-repeat: repeat; /*图像平铺*/background: rgba(0,0,0,0.3) //背景透明度
background-position: right top; /*指定位置*/ 右边的顶点
background-position: left bottom; 左边的顶点
background-position: top; 居中对齐
background-attachment: fixed; /*背景固定*/
background-attachment: scroll; /*背景滚动*/
background-position: 30px 30px; /*移动图片在边款内的位置*/
/*将行类元素转化成块元素*/
display: block;
/*将块元素转化成行类元素*/
display: inline;
/*将元素转化为行类块元素*/
display:inline-block;
************************************************************************
five
1
2
3
4
5
css
从上到下加载 以最后一个样式表为准
css
样式表的继承性
css
样式表的权重
继承->标签选择器->类，伪类->唯一ID->行内样式表 style=" " ->limportant
border-width:5px; /*边框的宽度*/
border-style:solid; /*边框线的风格*/
border-color: orange; /*边框线的颜色*/
padding : 30px; /*盒子里面的内容离边缘线的距离*/margin: 100px; /*盒子离外部的距离*/
margin:auto; //盒子居中对齐
/*移动块的位置*/
float:left ;
/*定位 移动块的位置*/
position: absolute;
浙公网安备 33010602011771号