参考:https://www.w3school.com.cn/html/html5_intro.asp
HTML：
html是web界面的骨架成分 好比建筑物的钢筋混泥土 标签语义化
html的注释:
<!–这是一段注释。注释不会在浏览器中显示。–>
html文档声明类型 (声明必须是 HTML 文档的第一行，位于 标签之前)
<!DOCTYPE html>
html 标签 (根标签)
<html lang=‘en’> 标记文本
head 标签 (根标签)
包含 <base>,<link>,<meta>,<script>,<style>, 以及 <title>。
meta 标签 (根标签)
// http 网路请求 请求头的格式 http-equiv 内容编译 content charset 文本格式
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
// 描叙
<meta name="description"
content="HTML examples">
// 关机字
<meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
// 重定向
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
// 作者
<meta name="author"
content="w3school.com.cn">
// 日期
<meta name="revised"
content="David Yang,8/1/07">
// 软件
<meta name="generator"
content="Dreamweaver 8.0en">
// 过期
<meta http-equiv="expires" content="31 Dec 2008">
// 手机端 禁止缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// 搜索引擎
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
禁止iframe
<meta http-equiv="X-Frame-Options" content="DENY">
// 相关属性
content-type expires refresh set-cookie
title 标签 (导航标签内容)
<title>我是导航条</title>
style 标签 (行内标签)
// type 可以写 可以省略
<style type="text/css" media="screen">
p{
color:'#f00'
}
</style>
默认是 type
screen 计算机屏幕（默认值）。
tty 电传打字机以及使用等宽字符网格的类似媒介。
tv 电视类型设备（低分辨率、有限的屏幕翻滚能力）。
projection 放映机。
handheld 手持设备（小屏幕、有限的带宽）。
print 打印预览模式 / 打印页。
braille 盲人用点字法反馈设备。
aural 语音合成器。
all 适合所有设备。
link标签 (link导入)
// type 可以写 可以省略
<link rel="stylesheet" type="text/css" href="theme.css" media="screen" />
screen 计算机屏幕（默认值）。
tty 电传打字机以及使用等宽字符网格的类似媒介。
tv 电视类型设备（低分辨率、有限的屏幕翻滚能力）。
projection 放映机。
handheld 手持设备（小屏幕、有限的带宽）。
print 打印预览模式 / 打印页。
braille 盲人用点字法反馈设备。
aural 语音合成器。
all 适合所有设备。
script 标签 (js导入)
<script type="text/javascript" src="demo_async.js" async="async" defer="defer"></script>
async async 规定异步执行脚本（仅适用于外部脚本）。
charset charset 规定在外部脚本文件中使用的字符编码。 UTF-8 - Unicode 字符编码 ISO-8859-1 - 拉丁字母表的字符编码
defer defer 规定是否对脚本执行进行延迟，直到页面加载为止。
src
noscript 元素用来定义在脚本未被执行时的替代内容（文本）
base 。
<html>
<head>
<base href="http://www.w3school.com.cn" />
<base target="_blank" />
</head>
<body>
<img src="eg_smile.gif" /><br />
<p>请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：</p>
<p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>
<br /><br />
<p><a href="">W3School</a></p>
<p>请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p>
</body>
</html>
body标签
nav 标签定义导航链接的部分
header 标签定义文档的页眉（介绍信息）。
main 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<section>
<h1>WWF</h1>
<p>
The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.
</p>
</section>
footer 元素应当含有其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。您可以在一个文档中使用多个
文档主要展示的地方
a标签:
超链接 跳转到其他页面 <a hrer=‘www.baidu.com’>百度</a> 锚定跳转: <a hrer=’#one’>百度</a>
文件下载 <a href="/i/w3school_logo_white.gif" download=“w3logo”>下载</a>
h5 拨打电话: <a href=“tel:13828172679”>13622178579</a>
target="_blank"
abbr : 缩写有助于搜索引擎(悬浮)
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
address标签:(地址位置)
标签定义文档或文章的作者/拥有者的联系信息。如果
元素位于 元素内，则它表示文档联系信息。如果
元素位于<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
map area: 带有可点击区域的图像映射
<html>
<body>
<p>请点击图像上的星球，把它们放大。</p>
<img
src="https://www.w3school.com.cn/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="180,139,14"
href ="https://www.w3school.com.cn/example/html/venus.html"
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="https://www.w3school.com.cn/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="https://www.w3school.com.cn/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>
</body>
</html>
article: 标签规定独立的自包含内容
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
</article>
aside: 标签定义其所处内容之外的内容。
<p>Me and my family visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>
audio :标签定义声音，比如音乐或其他音频流。
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
muted muted 规定视频输出应该被静音。
preload preload
如果出现该属性，则音频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
src url 要播放的音频的 URL。
<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
b 标签规定粗体文本。
<b>这是粗体文本</b>
bdi 使其脱离其父元素的文本方向设置。
<bdi> 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。
bdo 使其脱离其父元素的文本方向设置。
<bdo dir="rtl">Here is some text</bdo>
big 大号字体
<big>字体</big>
small 标签呈现小号字体效果。
<small >字体</small >
blockquote 标签定义块引用。
<blockquote >字体</blockquote >
br 标签 换行。
你好:<br/>你是
button 标签按钮。
<button type="button">Click Me!</button>
canvas 标签画布。
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
。
cite 参考文献的引用，比如书籍或者杂志的标题
cite
code 定义计算机代码文本。
<code><div>我是div</div></code>
col 标签为表格中一个或多个列定义属性值。
<table width="100%" border="1">
<col align="left" />
<col align="left" />
<col align="right" />
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
table colgroup 签用于对表格中的列进行组合，以便对其进行格式化 caption、col、colgroup、thead、tfoot 以及 tbody caption 标签表格标题
<table width="100%" border="1">
<colgroup span="2" align="left"></colgroup>
<colgroup align="right" style="color:#0000FF;"></colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
datalist 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值
<input list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
select optgroup option 标签定义选项组。
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
dl, dt, dd 列表。标签用于结合 dt （定义列表中的项目）和 dd（描述列表中的项目）。
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
ul 无序列表 ol 有序列表
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
del文本删除 文本修改 十二
a dozen is <del>20</del> 12 <ins>pieces</ins> 你是
details summary 解释说明
<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
dialog 弹框
<dialog >这是打开的对话窗口</dialog>
dir标签定义目录列表。
<dir>
<li>HTML</li>
<li>XHTML</li>
<li>CSS</li>
</dir>
div 可定义文档中的分区或节（division/section）。
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
em 文本强调内容
strong 把文本定义为语气更强的强调的内容。
embed标签定义嵌入的内容，比如插件。
<embed src="/i/helloworld.swf" />
form 表单 fieldset 关联 legend 表头 input 输入 组合表单中的相关元素：表单还可以包含 textarea、label output 元素。keygen 公钥发送后台 私钥保留
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
<form action="/example/html5/demo_form.asp" method="get">
用户名：<input type="text" name="usr_name" />
加密：<keygen name="security" />
<input type="submit" />
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
<form οninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
textarea 标签定义多行的文本输入控件
<textarea rows="3" cols="20">
在w3school，你可以找到你所需要的所有的网站建设教程。
</textarea>
figure figcaption 用作文档中插图的图像
<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
frame 标签定义 frameset 中的一个特定的窗口（框架）。
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
noframes 标签不支持frame 的显示
<frameset cols = "25%, 25%,*">
<noframes>
<body>Your browser does not handle frames!</body>
</noframes>
<frame src ="venus.htm" />
<frame src ="sun.htm" />
<frame src ="mercur.htm" />
</frameset>
h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
hr被水平线分隔的标题和段落：
<h1>This is header 1</h1>
<hr />
<p>This is some text</p>
i 标签显示斜体文本效果。
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
<iframe id="child" src="http://iframe1.com/index2.html"></iframe>
img 图片展示 (注意图片比例 失真) width,height 设置一个会按比例适应
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
mark 标签定义带有记号的文本。请在需要突出显示文本时使用 m 标签。
<p>Do not forget to buy <mark>milk</mark> today.</p>
meter 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。
例子：磁盘用量、查询结果的相关性，等等。
<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter>
object param 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash
<object data="flashmovie.swf" width="600" height="800" type="application/x-shockwave-flash">
请安装Shockwave插件观看此电影。
</object>
<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1"
width="100" height="50">
<param name="BorderStyle" value="1" />
<param name="MousePointer" value="0" />
<param name="Enabled" value="1" />
<param name="Min" value="0" />
<param name="Max" value="10" />
</object>
p 标签定义段落。
picture 标签使 Web 开发人员在指定图像资源方面更具灵活性。
<picture>
<source media="(min-width:650px)" srcset="/i/photo/flower-4.jpg">
<source media="(min-width:465px)" srcset="/i/photo/tulip.jpg">
<img src="/i/photo/flower.gif" alt="Flowers" style="width:auto;">
</picture>
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
progress 标签标示任务的进度（进程）
<progress value="22" max="100"></progress>
q标签定义短的引用
<p>Here comes a short quotation: <q>This is a short quotation</q></p>
ruby rt rp 注释内容
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
类似拼音内容
<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>
source track 标签为媒介元素（比如 video 和 audio picture）定义媒介资源。
<video width="320" height="240" controls="controls">
<source src="forrest_gump.mp4" type="video/mp4" />
<source src="forrest_gump.ogg" type="video/ogg" />
<track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
<track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>
span 标签被用来组合文档中的行内元素。
sub 下标
sup 上标
<sub>下标</sub>
<sup>上标</sup>
svg 标签被用来矢量图形。
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14l9-5-9-5-9 5 9 5z"></path><path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path></svg>
svg-icon :https://heroicons.dev/
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="open-24-hours" viewBox="0 0 512 512"><title>open-24-hours</title><g><circle cx="256" cy="256" fill="#a4fcc4" r="159.04"/></g><g fill="#020288"><path d="m483.615 289.944c-5.432-1.048-10.668 2.505-11.712 7.927-19.878 103.161-110.679 178.035-215.903 178.035-103.007 0-192.191-71.753-214.552-171.553l2.61 2.61c1.953 1.953 4.512 2.93 7.071 2.93s5.118-.977 7.07-2.929c3.906-3.905 3.906-10.236.001-14.142l-20.565-20.566c-1.875-1.876-4.419-2.93-7.071-2.93s-5.196 1.054-7.071 2.93l-20.564 20.566c-3.905 3.905-3.905 10.236.001 14.142 3.904 3.906 10.237 3.905 14.142-.001l3.702-3.702c22.317 111.726 120.979 192.645 235.226 192.645 114.793 0 213.853-81.694 235.542-194.25 1.045-5.423-2.504-10.667-7.927-11.712z"/><path d="m509.07 205.036c-3.904-3.906-10.237-3.905-14.142.001l-3.702 3.702c-22.317-111.726-120.979-192.645-235.226-192.645-114.793 0-213.853 81.694-235.542 194.25-1.045 5.424 2.504 10.667 7.927 11.712 5.43 1.043 10.667-2.506 11.712-7.927 19.879-103.161 110.68-178.035 215.903-178.035 103.007 0 192.191 71.753 214.552 171.553l-2.61-2.61c-3.904-3.905-10.235-3.906-14.142-.001-3.906 3.905-3.906 10.236-.001 14.142l20.564 20.566c1.875 1.876 4.419 2.93 7.071 2.93s5.196-1.054 7.071-2.93l20.564-20.566c3.908-3.905 3.908-10.237.001-14.142z"/><path d="m266.552 300.082c1.212.483 2.462.711 3.692.711 3.976 0 7.736-2.388 9.295-6.308l27.675-69.579c2.041-5.132-.465-10.947-5.596-12.988-5.13-2.04-10.947.464-12.988 5.597l-27.675 69.579c-2.041 5.132.465 10.947 5.597 12.988z"/><path d="m323.063 231.21h22.96l-24.423 55.556c-2.223 5.056.074 10.956 5.13 13.179 1.31.576 2.675.849 4.02.849 3.846-.001 7.513-2.232 9.159-5.978l30.588-69.58c1.359-3.093 1.066-6.662-.78-9.49-1.847-2.829-4.996-4.534-8.374-4.534h-38.279c-5.522 0-10 4.478-10 10-.001 5.52 4.476 9.998 9.999 9.998z"/><path d="m195.058 275.338c1.799 3.047 5.073 4.916 8.611 4.916h24.728c-.028 3.686-.057 7.217-.085 10.45-.047 5.523 4.392 10.038 9.914 10.086h.088c5.482 0 9.95-4.421 9.998-9.914.023-2.617.053-6.331.087-10.675 5.036-.519 8.965-4.774 8.965-9.947 0-5.128-3.859-9.354-8.832-9.933.09-16.277.124-32.664-.08-35.118-.535-6.431-4.463-11.694-10.007-13.412-5.536-1.712-11.357.354-15.574 5.528-3.96 4.857-20.87 35.259-27.957 48.104-1.71 3.099-1.655 6.868.144 9.915zm33.533-29.048c-.015 4.319-.036 9.072-.063 13.964h-7.85c2.779-4.951 5.48-9.722 7.913-13.964z"/><path d="m189.009 301.31c5.522-.069 9.942-4.603 9.873-10.125-.068-5.479-4.532-9.874-9.996-9.874-.043 0-.086 0-.129.001-5.475.068-11.227.119-16.424.144 3.598-4.871 8.217-11.254 14.052-19.591 4.603-6.576 7.612-12.828 8.946-18.581.328-1.276.6-3.081.603-4.95.022-15.332-12.473-27.805-27.805-27.805-13.256 0-24.729 9.432-27.283 22.426-1.064 5.419 2.465 10.675 7.885 11.74 5.423 1.067 10.676-2.465 11.74-7.885.715-3.64 3.936-6.281 7.658-6.281 4.133 0 7.525 3.23 7.788 7.297l-.175 1.369c-.597 2.281-2.086 5.977-5.742 11.201-10.997 15.712-17.557 24.301-21.081 28.915-4.519 5.917-7.008 9.176-5.345 14.588.979 3.181 3.477 5.719 6.69 6.791 1.335.445 2.404.801 16.061.801 5.362-.001 12.664-.055 22.684-.181z"/></g></symbol></svg>
<svg class="icon">
<use xlink:href="#open-24-hours"></use>
</svg>
svg-icon:https://www.flaticon.com/
官网:https://www.w3school.com.cn/svg/index.asp
template 保留页面加载时隐藏的内容。使用 JavaScript 来显示
<button οnclick="showContent()">显示被隐藏的内容</button>
<template>
<h2>Flower</h2>
<img src="img_white_flower.jpg" width="214" height="204">
</template>
<script>
function showContent() {
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
time 如何定义时间和日期：
<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>
u标签为文本添加下划线：
<p>如果文本不是超链接，就不要<u>对其使用下划线</u>。</p>
wbr 如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 wbr 元素来添加 Word Break Opportunity（单词换行时机）。
<p>
如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
</p>
CSS：
video 样式修改
fullscreen 全屏 play 播放 time 时间
<video controls controlslist="nodownload nofullscreen noremoteplayback" disablePictureInPicture=true ></video>
nodownload // 禁止下载 nofullscreen //禁止全屏 noremoteplayback //回放 disablePictureInPicture 更多
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-mute-button {} // 静音按钮
video::-webkit-media-controls-toggle-closed-captions-button {} // 切换标题
video::-webkit-media-controls-volume-slider {} // 滑块
// // 播放按钮
video::-webkit-media-controls-play-button {
display: none !important;
}
// 当前播放时间
video::-webkit-media-controls-current-time-display {
display: none !important;
}
// 剩余时间
video::-webkit-media-controls-time-remaining-display {
display: none !important;
}
// 音量按钮
video::-webkit-media-controls-volume-control-container {
display: none !important;
}
// 全屏
video::-webkit-media-controls-fullscreen-button {
display: none !important;
}
// 时间轴
video::-webkit-media-controls-timeline {
display: none !important;
}
// 更多选项 --然而并不生效
video::-internal-media-controls-overflow-button {
display: none !important;
}
base.css
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
margin: 0;
padding: 0;
}
/*可选*/
html, body {
width: 100%;
height: 100%;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
/*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */
}
h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
/* 重置列表元素 */
ul, ol { list-style: none; }
/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */
border-bottom: 1px dotted;
cursor: help;
}
q:before, q:after { content: ''; }
/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 */
/* 注：optgroup 无法扶正 */
button, input, select, textarea {
font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}
/* 重置表格元素 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 重置 hr */
hr {
border: none;
height: 1px;
}
mixin.css
/* 主色 */
.mincolor{
color:'#F90'
}
/* 副色 */
.deputycolor{
color:'#A90'
}
/* 距离 */
.margin-bottom-32{
margin-bottom:32px
}
.margin-top-32{
margin-top:32px
}
.padding-bottom-32{
padding-bottom:32px
}
.padding-top-32{
padding-top:32px
}
/* 屏幕至适应 */
1.百分比 栅格布局 平均分相应的等分
2.rem html{font-size:100px} body{font-size:0.32rem //32px}
100vw==750px==>0.133vw=1px=> 13.3vw=100px
3.media 媒体查询
```css
@media screen and (min-width:1200px) {
.odiv {
background: #f00;
}
}
@media screen and (min-width:960px) and (max-width:1200px) {
.odiv {
background: #ff0;
}
}
@media screen and (max-width:960px) {
.odiv {
background: #f0f;
}
}
javaScript(设计图 750 font-size:100px)
document.documentElement.style.fontSize = ()document.documentElement.clientWidth||document.body) / 750 + 'px';
p{
font-size:0.32rem==>32px
}
scss https://editor.csdn.net/md/?articleId=117356547
JavaScript：
事件属性
onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
