HTML CSS整理笔记（路过不要错失，你没法记住的笔记，意见保藏）
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">点击链接后退页面：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a href="javascript:history.go(-1)">回到上一个网页</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">——修改placeholder提示的样式：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;"><span style="color: black;"><span style="color: black;">程序猿的生活：前端只<span style="color: black;">必须</span><span style="color: black;">把握</span>这些，你<span style="color: black;">亦</span>能拿8K！（最完整面试题含答案）</span><span style="color: black;">25 赞同 · 2 评论<span style="color: black;"><span style="color: black;">文案</span></span></span></span></a></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.除IE外通用写法</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">类名或标签名::placeholder {color: red;}</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.加兼容前缀写法</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">css超出一行<span style="color: black;">表示</span>省略号：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">给定宽度(width:100px)、</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">超出<span style="color: black;">隐匿</span>（overflow:hidden）、</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">强制在同一行<span style="color: black;">表示</span>（white-space: nowrap）、</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">省略号（text-overflow:ellipsis）</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">——<span style="color: black;">平常</span>字体单位——</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.em</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">移动端常用的字体尺寸单位，相当于“倍”，<span style="color: black;">例如</span>设置当前的div的字体<span style="color: black;">体积</span>为1.5em，则当前的div的字体<span style="color: black;">体积</span>为：当前div继承的字体<span style="color: black;">体积</span>*1.5。但当div进行嵌套时，em始终按当前div继承的字体<span style="color: black;">体积</span>来缩放。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.rem</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">r是root的意思，即相<span style="color: black;">针对</span>根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体<span style="color: black;">体积</span>始终<span style="color: black;">根据</span>根节点的字体<span style="color: black;">体积</span>进行缩放。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.vh</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">vh<span style="color: black;">便是</span>当前屏幕可见高度的1%，即 height:100vh == height:100%;</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">它的好处是当元素<span style="color: black;">无</span>内容时候，设置height:100%该元素不会被撑开，</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">但设置height:100vh，该元素会被撑开屏幕高度一致。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4.vw</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">viewpoint width，视窗宽度，1vw = 视窗宽度的1%。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">vw<span style="color: black;">便是</span>当前屏幕宽度的1%，</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当设置width:100%，被设置元素的宽度是<span style="color: black;">根据</span>父元素的宽度来设置，</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">但100vw是相<span style="color: black;">针对</span>屏幕可见宽度来设置，<span style="color: black;">因此</span>会<span style="color: black;">显现</span>50vw 比50%大的<span style="color: black;">状况</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">从<span style="color: black;">这儿</span>往下是<span style="color: black;">归类</span>整理</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">——1.HTML5<span style="color: black;">基本</span>——</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">5.在网页中，HTML决定结构和内容，CSS设定网页的表现样式，JavaScript<span style="color: black;">掌控</span>网页的<span style="color: black;">行径</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">6.<!DOCTYPE html><span style="color: black;">必要</span><span style="color: black;">位置于</span>HTML文档<span style="color: black;">第1</span>行。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">7.<meta>标签：用于方便浏览器解析或搜索引擎搜索，<span style="color: black;">通常</span><span style="color: black;">安置</span>于<head>中，用"名<span style="color: black;">叫作</span>/值"方式：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(1)<span style="color: black;">暗示</span>文档内容类型、字符串编码信息 如：<meta charset="UTF-8"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(2)为搜索引擎定义<span style="color: black;">重要</span>词:</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(3)为网页定义描述内容:</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><meta name="description" content="Free Web tutorials on HTML and CSS"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(4)定义网页作者:</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><meta name="author" content="Hege Refsnes"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(5)每30秒中刷新当前页面:</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><meta http-equiv="refresh" content="30"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">8.字体样式标签：<strong>字体变粗、<em>字体倾斜</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">9.注释 <!--内容--></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">10.特殊符号：空格&nbsp; >大于号&gt; <<span style="color: black;">少于</span>号&lt; "引号&quot; 版权符号&copy;</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">片格式：JPG、GIF、PNG、BMP</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">12.<span style="color: black;">照片</span>标签，<span style="color: black;">必要</span>要有src和alt属性：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="<span style="color: black;">照片</span><span style="color: black;">位置</span>" alt="<span style="color: black;">照片</span>的替代文字" title="鼠标悬停提示文字" width="<span style="color: black;">照片</span>宽度" height="<span style="color: black;">照片</span>高度" /></p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;"><span style="color: black;"><span style="color: black;">程序猿的生活：打造全网web前端全栈资料库（总目录）看完学的更快，<span style="color: black;">把握</span>的更加<span style="color: black;">牢靠</span>，你值得<span style="color: black;">持有</span>（<span style="color: black;">连续</span>更新）</span><span style="color: black;">154 赞同 · 6 评论<span style="color: black;"><span style="color: black;">文案</span></span></span></span></a></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">13.超链接标签(target指定在哪个窗口打开 值有_self<span style="color: black;">自己</span>窗口、_blank新建窗口)</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a href="链接<span style="color: black;">位置</span>" target="<span style="color: black;">目的</span>打开窗口位置">附连接的文本或图像</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">14.链接<span style="color: black;">位置</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(1)绝对路径(指向<span style="color: black;">目的</span><span style="color: black;">位置</span>的完整描述 多指向本站点外的文件</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">如<a href="<a style="color: black;">百度一下，你就<span style="color: black;">晓得</span></a>">百度</a>)、</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">(2)相对路径(<span style="color: black;">通常</span>指向本站点内的文件,如<a href="login/</p>
楼主的文章深得我心，表示由衷的感谢！ 百度seo优化论坛 http://www.fok120.com/ 可以发布外链的网站 http://www.fok120.com/ 楼主发的这篇帖子，我觉得非常有道理。
页:
[1]