1,CSS 笔记:
点击链接后退页面:
<a href="javascript:history.go(-1)">回到上一个网页</a>
-- 修改 placeholder 提示的样式:
1. 除 IE 外通用写法
类名或标签名::placeholder {color: red;}
2. 加兼容前缀写法
CSS 超出一行显示省略号:
给定宽度(width:100px),
超出隐藏(overflow:hidden),
强制在同一行显示(white-space: nowrap),
省略号(text-overflow:ellipsis)
-- 常见字体单位 --
1.em
移动端常用的字体尺寸单位, 相当于 "倍", 比如设置当前的 div 的字体大小为 1.5em, 则当前的 div 的字体大小为: 当前 div 继承的字体大小 * 1.5.
但当 div 进行嵌套时, em 始终按当前 div 继承的字体大小来缩放.
2.rem
r 是 root 的意思, 即相对于根节点 html 的 font-size 进行缩放, 当有嵌套关系时, 嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放.
3.vh
vh 就是当前屏幕可见高度的 1%, 即 height:100vh == height:100%;
它的好处是当元素没有内容时候, 设置 height:100% 该元素不会被撑开,
但设置 height:100vh, 该元素会被撑开屏幕高度一致.
4.vw
viewpoint width, 视窗宽度, 1vw = 视窗宽度的 1%.
vw 就是当前屏幕宽度的 1%,
当设置 width:100%, 被设置元素的宽度是按照父元素的宽度来设置,
但 100vw 是相对于屏幕可见宽度来设置, 所以会出现 50vw 比 50% 大的情况.
2,HTML5 笔记
5. 在网页中, HTML 决定结构和内容, CSS 设定网页的表现样式, JavaScript 控制网页的行为.
6.<!DOCTYPE HTML > 必须位于 HTML 文档第一行.
- <video controls>
- <source src="video/video.webm" />
- <source src="video/video.mp4" />
- 你的浏览器不支持 video 标签
- <video>
- header(头部),footer(脚部),
- section(独立区域),article(独立文章内容),
- aside(相关内容或应用, 常用于侧边栏),nav(导航类辅助内容)
- <iframe name="mainFrame" src="框架引用的页面地址" />
- <a href="链接路径" target="mainFrame">
- 点击在框架中打开
- </a>
- <input type="file" name="files" />
- <input type="submit" name="upfiles" value="上传" />
- <label for="female">
- 女
- </label>
- <input type="radio" name="sex" id="female" />
- <form>
- 供用户输入的表单
- <input>
- 输入域
- <textarea>
- 文本域 (多行输入)
- <label>
- 定义
- <input>
- 元素的标签, 一般为输入标题
- <fieldset>
- 定义一组相关的表单元素, 并使用外框包含起来
- <legend>
- 定义
- <fieldset>
- 元素的标题
- <select>
- 下拉选项列表
- <optgroup>
- 选项组
- <option>
- 下拉列表中的选项
- <button>
- 点击按钮
- <datalist>
- 指定一个预先定义的输入控件选项列表
- <keygen>
- 定义了表单的密钥对生成器字段
- <output>
- 计算结果
- <style type="text/css">
- h1{ font-size : 12px; color : red; }
- </style>
- <head>
- <link href="外部样式表路径" rel="stylesheet" type="text/css" />
- </head>
- repeat(沿水平和垂直方向),no-repeat(不平铺, 只显示一次),
- repeat-x(只沿水平方向),repeat-y(只沿垂直方向),
- padding-left,padding-right,padding-top,padding-bottom,
- padding"上右下左"
- left(左侧不允许浮动元素),right(右侧不允许),
- both(左右都不允许, 常用于文本在图片下方显示),
- none(允许浮动元素出现在两侧)
- div{
- position: relative;
- top:-20px;
- left:20px;
- }
- 100%{
- //CSS 样式
- }
- }
- <!--HTML 注释 -->
- // 空格 > // 大于号
- < // 小于号 " // 双引号
- © // 版本符号
- <em></em > 斜体
- <img src="地址 " alt="图片代替文字 " title="鼠标悬停提示 " width=" "height=" "/>
- <a href="链接网址 " target="目标 ">页面间链接</a>
- <!--1. 页面间链接: A 页到 B 页 主要运用于网页导航 -->
- <a name=wo></a>
- <a href=#wo > 锚链接</a>
- <!--2. 锚链接: A 页甲位置到 A 页的乙位置或 A 页甲位置到 B 页的乙位置 # 跳其他页面要为 href="页面名. html#
- 锚链接 "-->
- <a href="mailto:bdqnWebmaster@bdqn.cn " target="_blank ">功能性链接</a>
- <!--3. 功能性链接: 在页面中调用其他软件功能, 电子邮件 "mailto: @bdqn.cn
- " qq msn-->
- ----
- <table border="边距宽度">
- <tr>
- <td rowspan="跨行数量" colspan="跨列数量" align="文本状态">
- </td>
- </tr>
- </table>
- ----
- <table summary="表格简介">
- <caption>
- 标题文本
- </caption>
- <tr>
- <td>
- ...
- </td>
- </tr>
- </table>
- ----
- <frameset>
- </framset>
- <form method="提交方式" action="提交地址">
- 隐藏域: type="hidden" 只读: readonly="readonly 禁用: disabled="disabled"
- <input type="text" name=" 名称 " size=" 长度 " maxlength=" 最大长度 " />
- //password 密码
- <input type="radio" name="sex" value="男" id="nan" />
- <label for="nan">
- 男
- </label>
- <input type="radio" name="sex" value="女" id="nv" />
- <label for="nv">
- 女
- </label>
- <select name="名称">
- <optoin value="值">
- 1
- </option>
- </select>
- mc
- <link type="text/css" rel="stylesheet" href="css/style.css" />
- 链接式导入外部链接
- <style type="text/css">
- opacity:(范围 0~1)
- filter:aplha(opcitive = 透明度<(100)>);
- :fouc-last-type:
- :blur-first-type;
- location.reload();
- location.replay(.HTML);
- history.back forward
- ----
- margin:10px 20px 30px;
- --
- <b>
- 文本加粗
- <strong>
- 文本加粗(加重语气)
- <i>
- 斜体字
- <em>
- 斜体(强调文字)
- <big>
- 字体放大
- <small>
- 字体缩小
- <sub>
- 定义下标字
- <sup>
- 定义上标字
- <ins>
- 插入字(字体下划线)
- <del>
- 字体删除线
- <code>
- 定义计算机代码
- <kbd>
- 键盘输入
- <samp>
- 定义计算机代码样本
- <var>
- 定义变量
- <pre>
- 预格式化文本(会保留文本的多个空格)
- <abbr>
- 缩写
- <address>
- 地址联系信息
- <bdo>
- 文字方向(设置 dir="rtl" 为从右到左显示)
- <blockquote>
- 长文本引用(不会自带双引号, 但会两边自动缩进)
- <q>
- 短句引用语(自带双引号)
- <cite>
- 定义引用, 引证
- <dfn>
- 定义一个定义项目.
- --
- <base > 元素:
- <head>
- <base href="//www.w3cschool.cn" target="_blank" />
- </head>
- <embed>
- 定义内嵌对象. HTML4 不赞成, HTML5 允许.
- <object>
- 定义内嵌对象.
- <param>
- 定义对象的参数.
- <audio>
- 定义声音内容
- <video>
- 定义视频或者影片
- <source>
- 定义 media 元素的多媒体资源(
- <video>
- ,
- <audio>
- )
- <track>
- 规定 media 元素的字幕文件或其他包含文本的文件 (
- <video>
- ,
- <audio>
- ) --
- <audio controls height="100" width="100">
- <source src="horse.mp3" type="audio/mpeg">
- <source src="horse.ogg" type="audio/ogg">
- <embed height="50" width="100" src="horse.mp3">
- </audio>
- <a href="音频路径">
- 音乐 1
- </a>
- <a href="horse.mp3">
- 音乐 2
- </a>
- <script src="http://mediaplayer.yahoo.com/latest">
- </script>
- <a href="horse.mp3">
- 音乐 1
- </a>
- --
- <video width="320" height="240" controls>
- <source src="movie.mp4" type="video/mp4">
- <source src="movie.ogg" type="video/ogg">
- <source src="movie.webm" type="video/webm">
- <object data="movie.mp4" width="320" height="240">
- <embed src="movie.swf" width="320" height="240">
- </object>
- </video>
- <embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"
- width="480" height="400" type="application/x-shockwave-flash">
- </embed>
- <a href="https://www.w3cschool.cn/html/intro.swf">
- 播放该视频
- </a>
- --
- $("#id").innerHTML += " ";
- --
- a:link {
- color:#FF0000;
- } /* 未访问的链接 */
- a:visited {
- color:#00FF00;
- } /* 已访问的链接 */
- a:hover {
- color:#FF00FF;
- } /* 鼠标划过链接 */
- a:active {
- color:#0000FF;
- } /* 已选中的链接 */
来源: http://www.jianshu.com/p/07c694c3b8dd