1 HTML篇
HTML
Visual Studio Code关于写html的快捷键 这几天写html，找别人学了一些有趣的快捷键，作用不一定很大，但还是记录一下。 1多个平级标签 输入 div*5 会有提示，按回车，出现下面的代码 <div></div> <div></div> <div></div> <div></div> <div></div> 2多个平级排序标签 输入 div{$}*4 出现提示后，按回车，出现下面的代码 <div>1</div> <div>2</div> <div>3</div> <div>4</div> 3给标签加id和class 输入 div#tagId 提示，回车 <div id="tagId"></div> 输入 div.tagClass 提示，回车 <div class="tagClass"></div> 4多层嵌套标签 多层嵌套标签用>右尖括号，还可以任意组合。 span>div>section <span> <div> <section></section> </div> </span> span>div*3>section <span> <div> <section></section> </div> <div> <section></section> </div> <div> <section></section> </div> </span> span>div{$}*3>section <span> <div> 1 <section></section> </div> <div> 2 <section></section> </div> <div> 3 <section></section> </div> </span> span>div*3>section{$}*3 <span> <div> <section>1</section> <section>2</section> <section>3</section> </div> <div> <section>1</section> <section>2</section> <section>3</section> </div> <div> <section>1</section> <section>2</section> <section>3</section> </div> </span> 5 ! + 回车 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html> 6 Ctrl+/ （注释） <!-- --> 7 快速多次复制同一行代码 crtl +c --->ctrl+v
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>头部</div>
<div>身体</div>
<div>脚</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>标题标签</title>
</head>
<body>
<h2>女人越这样和男人说话，他就越<em>喜欢你</em></h2>
<h4>01</h4>
<p>很多情侣或夫妻之所以很难走到最后，有时候是因为他们不懂得好好说话。换句话说，一段感情要想长久地维持下去，需要双方懂得用心交流和沟通。</p>
<p>尤其是当你们生活在同一个屋檐下，低头不见抬头见，你们更要懂得好好说话。你不要小瞧语言的魅力和说话的力量。
</p>
<p>有时候，你可能只是随口一说，但是<strong>说者无心，听者有意</strong>，伴侣听了之后，可能会产生<em>各种各样</em>的联想。</p>
<strong>02</strong>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>body标签中常用标签</title>
</head>
<body>
<h2>《 琵琶行》</h2>
一道 残阳铺水中，<br>
半江瑟瑟 半江红。<br>
可怜九月初三夜，<br>
露似珍珠月似弓。<br>
©CopyRight 2002-2019
♣7 ♥8
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>火车飞驰过暗夜里的村庄，月光，总是太容易让思念寂寞，太容易让人觉得孤独。</p>
<hr>
<p>每一枚被风吹起的蒲公英，都载满了一双眼睛的深情告别与一个目光的依依不舍。
那天，我拿着行李，带上一个背影的祝福与惆怅，挥手告别了这片土地。我不知道，我何时会回来。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>无序列表</title>
</head>
<body>
<!-- unordered list -->
<h2>热门要闻</h2>
<ul>
<li>政府工作报告极简版来了！只有600字 全程回放</li>
<li>政府工作报告:继续推动中美经贸磋商
积极参与世贸组织改革</li>
<li>新增高速铁路运营里程4100km
2年基本取消高速省界收费站</li>
<li>高血压糖尿病门诊用药纳入医保 报销比例提高到60%</li>
</ul>
<h2>web前端课程排行榜</h2>
<ol>
<li>vue框架学习</li>
<li>Javascript高级编程</li>
<li>React全家桶</li>
</ol>
<!-- definition list:定义列表 -->
<dl>
<dt>帮助中心</dt>
<!-- definition description -->
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>制作表格</title>
</head>
<body>
<table border="1" cellspacing="0">
<caption>商品清单</caption>
<thead>
<tr>
<th>产品名称</th>
<th>品牌</th>
<!-- 横向合并：合并的列数 -->
<th colspan='2'>数量和入库时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>电冰箱</td>
<td>海尔</td>
<td>300</td>
<td>2014-09</td>
</tr>
<tr>
<td>电视机</td>
<!-- 纵向合并： 合并的行数 -->
<td rowspan="3">小米</td>
<td>200</td>
<td>2018-09</td>
</tr>
<tr>
<td>电风扇</td>
<td>400</td>
<td>2017-09</td>
</tr>
<tr>
<td>电脑</td>
<td>400</td>
<td>2017-09</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="mailto:zhaoxu@tedu.cn">联系我们</a>
</body>
</html>
<!-- a anchor 锚点 超链接 -->
<!DOCTYPE html>
<html>
<head>
<title>超链接</title>
</head>
<body>
<p id="top"></p>
<a href="http://www.baidu.com" title="点击一下,了解更多" target="_blank">百度一下</a>
<p>小猿圈</p>
<p>小猿圈</p>
<p>小猿圈</p>
<p>小猿圈</p>
<p>小猿圈222222</p>
<p>小猿圈</p>
<p>小猿圈</p>
<p>小猿圈</p>
<a href="#top">回到顶部</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>img标签(行内块状标签)</title>
</head>
<body>
<!-- 相对路径：
./1.png =1.png
../1.png
.../1.png
绝对路径:
file:///Users/majinju/Desktop/1.png
-->
<img src="file:///Users/majinju/Desktop/1.png" width="400" alt="一个耿直的微笑" title="瞅你的损色">
<img src="https://i1.mifile.cn/a4/xmad_15516710851918_wMDAo.jpg" alt="小米9同名尊享版" width="100">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>form标签</title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<p>
<input type="text" placeholder="请输入用户名">
</p>
<p>
<input type="password" placeholder="请输入密码">
</p>
<p>
男：<input type="radio" name="sex" checked="checked">
女：<input type="radio" name="sex">
</p>
<h4>购买的课程：</h4>
<p>
web前端：<input type="checkbox" checked="checked">
python开发：<input type="checkbox">
Java编程：<input type="checkbox">
</p>
<p>
<select name="class">
<option value="a">HTML</option>
<option value="b">CSS</option>
<option selected="selected">JavaScript</option>
<option>Vue</option>
</select>
</p>
<!-- <h1>下拉列表实现单选 </h1> -->
<p>
<select name="class" >
<option value="css" >html</option>
<option value="python">css</option>
<option value="vue" selected>python</option>
</select>
</p>
<!-- <h2>下拉列表实现多选 --></h2> -->
<p>
<select name="class" id="" multiple>
<option value="css" >html</option>
<option value="python">css</option>
<option value="vue" selected>python</option>
<option value="go" selected>golang</option>
<option value="go" selected>小程序</option>
<option value="go" selected>java</option>
</select>
</p>
<!-- <h3>个人描述(文本域)</h3> -->
<textarea name="" id="" cols="20" rows="10"></textarea>
<!-- 按钮 -->
<p>
<input type="submit" name="btnsbt" value="提交">
<input type="reset" name="btnrst" value="重置">
<input type="button" name="btnbtn" value="普通按钮">
</p>
<p>
请上传文件：
<input type="file" name="txtfile">
</p>
</form>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action=""> <p> <label for="username"> 用户名：</label> <input type="text" name="" id="username" placeholder="请输入用户名" > </p> <p> <label for="pwd"> 密码： </label><input type="password" name="" id="pwd" placeholder="请输入密码"></p> <p><input type="submit" value="立即注册"></p> <p><input type="reset" name="" value="重置"> </p> <button>按钮</button> <p> 男：<input type="radio" name="sex" id="" checked> 女：<input type="radio" name="sex" id=""> </p> <p> web前端 <input type="checkbox" name="" id="" checked> python <input type="checkbox" name="" id=""> java <input type="checkbox" name="" id=""> </p> <h1>下拉列表实现单选 </h1> <p> <select name="class" id=""> <option value="css" >html</option> <option value="python">css</option> <option value="vue" selected>python</option> </select> </p> <h2>下拉列表实现多选 --></h2> <p> <select name="class" id="" multiple> <option value="css" >html</option> <option value="python">css</option> <option value="vue" selected>python</option> <option value="go" selected>golang</option> <option value="go" selected>小程序</option> <option value="go" selected>java</option> </select> </p> <h3>个人描述</h3> <textarea name="" id="" cols="20" rows="10"></textarea> </form> <form action="http://www.baidu.com" method="POST"> <p> 用户名称： <input type="text",name="txtUsename" value="请输入用户名称" readonly> </p> <p> 用户密码： <input type="password" name="txtUsepwd"> </p> <p> 确认密码： <input type="password" name="txtcfmpwd" disabled> </p> <p> 用户性别： <input type="radio" name="sexrdo" value="男">男 <input type="radio" name="sexrdo" value="女" checked=''>女 <input type="radio" name="" id="sba"> </p> <p> 用户爱好：吃 <input type="checkbox" name="chkhobby" value="吃"> 喝 <input type="checkbox" name="chkhobby" value="喝"> 玩 <input type="checkbox" name="chkhobox" value="玩"> 乐 <input type="checkbox" name="chkhobox" value="乐" checked> <!-- 按钮 --> <p> <input type="submit" name="btnsbt" value="提交"> <input type="reset" name="btnrst" value="重置"> <input type="button" name="btnbtn" value="普通按钮"> </p> <p> 请上传文件： <input type="file" name="txtfile"> </p> <p> 自我介绍： <textarea name="txt" cols="20" rows="5"></textarea> </p> <p>籍贯： <select name="sel" size="3" multiple> <option value="深圳">深圳</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州" selected>广州</option> </select> </p> <p>意向工作城市： <select name="sel"> <option value="深圳">深圳</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州" selected>广州</option> </select> </p> <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,<span>金融分析</span>,<span>人工智能</span>等互联网最前沿技术,开启职业生涯新可能</p> </form> </body> </html>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<p>
<label for="username">用户名：</label>
<input type="text" id="username">
</p>
<p>
<label for="pwd">密码：</label>
<input type="password" id="pwd">
</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
span{
color: red;
}
</style>
</head>
<body>
<div id="content">
<p>
女生眼中的男生：长得一般的<span">叫帅哥</span>，长得好看的<span">叫小哥哥</span>，长的超帅的<span">叫老公</span>，长的不好看的<span">叫那个男的</span>
</p>
</div>
</body>
</html>
小米结构分析： <head></head> <body> <div id="top"> 顶部栏 <div id="top_list"> left 顶部栏目 <a href="">链接*10 a</a> </div> <div id="top_shop"> right 购物车 <a href=""> 链接*1 a</a> </div> <div id="top_user"> right 用户操作 <a href=""> 链接*3 a</a> </div> </div> <div id="nav"> 导航栏 <div> left logo <a href=""> <img src="" alt=""> </a> </div> <div> left 导航链接 <ul> <li> <a href=""></a> </li> <li> <a href=""></a> </li> <li> <a href=""></a> </li> <li> <a href=""></a> </li> </ul> </div> <div> right 搜索 <form> <input type="text" name=""> <input type="submit"> </form> </div> </div> <div id="wrap"> 主体内容 </div> <div id="footer"> 脚部 </div> </body>
HTML 标签分类
HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。
常用的块状元素：
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>常用的行内元素
<a> <span> <br> <i> <em> <strong> <label>
常用的行内块状元素：
<img> <input>
块级元素特点：display:block; 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 行内元素特点：display:inline; 1、和其他元素都在一行上； 2、元素的高度、宽度及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。 行内块状元素的特点：display:inline-block; 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置
注意
我们可以通过display属性对块级元素、行内元素、行内块元素进行转换，为页面布局做准备。
HTML 应用
1 进入编辑模式
console--> document.designMode="on"
2 修改布局
padding-bottom:16px; padding-left:16px; border:1px solid; background:green;
3 修改图片宽度，高度，滤镜（filter）
width:300px;
height:100px；
filter:blur(2px);
4 P图--添加文字(参考属性)，修改文字(backface-visibility)，马赛克处理（blur），拼图（float）
element.style { font-size: 25px; font-weight: bold; text-align: center; letter-spacing: 5px; background: white; backface-visibility: hidden; margin-top: -39px; filter: blur(5px); border: 10px solid #3b3422 }
钉钉修改日期示例 { width: 511px; text-align: center; font-size: x-small; color: grey; margin-top: -351px; background-color: #f1f2f3 }
常用样式-参考：
其他：
。。。
作者：华王
博客：https://www.cnblogs.com/huahuawang/
