template.html

曾经终败给现在 2022-04-10 04:52 170阅读 0赞

--------------------

### meta ###

<!DOCTYPE html>
    <html lang="en|zh">
    <head>
      <meta charset="utf-8">

1.  width=device-width // 应用程序的宽度和屏幕的宽度是一样的,如果是在电脑上的字显示正常，调为手机模式或者在手机上看字很小的话，就是因为没有写这个，写了之后就正常了。
2.  height=device-height / / 应用程序的高度和屏幕的高是一样的
3.  initial-scale=1.0 // 应用程序启动时候的缩放尺寸（1.0表示不缩放）
4.  minimum-scale=1.0 // 用户可以缩放到的最小尺寸（1.0表示不缩放）
5.  maximum-scale=1.0 // 用户可以放大到的最大尺寸（1.0表示不缩放）
6.  user-scalable=no // 用户是否可以通过他的手势来缩放整个应用程序，使应用程序的尺寸发生一个改变（yes/no，也可以用1/0）
7.  target-densitydpi=device-dpi|high-dpi|medium-dpi|low-dpi|value // 一般不写

1.  添加到主屏幕

1.  在iOS中有两个meta值，apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style，这两个会让网页内容以应用程序风格显示，并使状态栏透明。
2.  yes:不删除默认的苹果工具栏和菜单栏  
    no:删除默认的苹果工具栏和菜单栏
3.  当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示

1.  默认值为default（白色），可以定为black（黑色）和black-translucent(灰色半透明)
2.  若值为“black-translucent”将会占据页面位置，浮在页面上方（会覆盖页面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕为 40px ）

1.  忽略ios将页面中的数字识别为电话号码。

1.  忽略android对邮箱地址的识别

1.  winphone系统a、input标签被点击时产生的半透明灰色背景：除去

1.  站点内容是否希望被robots搜索机器人抓取。
2.  all:文件将被检索，且页面上的链接可以被查询；  
    none:文件将不被检索，且页面上的链接不可以被查询；  
    index:文件将被检索；  
    follow：页面上的链接可以被查询；  
    noindex：文件将不被检索，但页面上的链接可以被查询；  
    nofollow：文件将不被检索，页面上的链接可以被查询；

1.  每30秒刷新页面。
2.  应该慎用，因为这样会使页面不受用户控制。

--------------------

### link ###

1.  给title前面添加的图标

1.  设置web app的放置主屏幕上icon文件路径。图片尺寸可以设定为57*57（px）或者Retina可以定为114*114(px)，ipad尺寸为72\*72px；
2.  该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。

1.  设置启动时候的界面
2.  该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
3.  官方规定启动界面的尺寸必须为 320\*640（px），原本以为 Retina 屏幕可以支持双倍，但是不支持，图片显示不出来。

1.  ios用rel=“apple-touch-icon”,android用rel=“apple-touch-icon-precomposed”,这样就能在用户把网页存为书签时，在手机home界面创建应用程序样式的图标。

--------------------

### form表单 ###

##### form标签 #####

1.  form的target=\_self(提交到本页面) | \_blank（提交到新的页面）
2.  input type="submit"中的formtarget=\_self 和\_blank可以覆盖form的target属性
3.  autocomplete表示表单是否自动填充，input也有这个属性，可以为单个的input设置这个属性，则可以覆盖form中的这个属性

##### input标签 #####

1.  form 属性规定 元素所属的一个或多个表单。

1.  取消input在ios下，输入的英文首字母的默认大写

1.  readonly在ios点击有光标

##### textarea标签 #####

<textarea name="" id="" cols="30" rows="10" placeholder="placeholder只有在</textarea>紧跟在<textarea>的后面才会有效，只要这两者之间有空格，就会默认空格是文本域的内容，就不会显示placeholder的内容"></textarea>

--------------------

### table表格 ###

1.  cellpadding:单元格边距。（单元格td中文字与td的边框之间的间距）不是放在style中，是table的属性，属性值可以是10|10px,测试时发现不写px解释出来的也是10px
2.  cellspacing：单元格间距。（单元格td边框与table或者是其他td之间的间距）不是放在style中，是table的属性，属性值可以是10|10px,测试时发现不写px解释出来的也是10px
3.  caption-site：表格标题放置的位置：caption-site:top|bottom。

--------------------

### 列表 ###

1.  有序列表

1.  无序列表

<dl>
      <dt>coffee</dt> 
      <dd>-black hot drink</dd>   
      <dt>coffee</dt>
      <dd>-black hot drink</dd>
    </dl>

1.  定义列表

.css {
    	list-style-type:none|disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-alpha|upper-alpha|lower-greek|lower-latin|upper-latin|hebrew|armenian|georgian|cjk-ideographic|hiragana|katakana|hiragana-iroha|katakana-iroha
    }

1.  列表标记类型

--------------------

### 图片 ###

`<img src="" align="top/middle/bottom">`

1.  align不是放在style里面的，align本身就是一个属性，属性值可取top|middle|bottom

1.  图像映射

--------------------

### 音频 ###

<audio controls width="100" height="100">
      <source src="1.mp3" type="audio/mpeg">
      <source src="2.mp3" type="audio/ogg">
      您的浏览器不支持mpeg/ogg音频格式
    </audio>

--------------------

### 视频 ###

--------------------

### 基础html ###

<bdo dir="rtl">this paragraph weill go right-to-left</bdo>

1.  改变文字方向

`<a href="#" target="_blank/_parent/_top/_self"></a>`

1.  在数据周围绘制一个带标题的框。

1.  内联框架
2.  可对ifrmae标签进行样式设置。style=“width:100px;height:100px;”

1.  如果浏览器不支持script

##### html实体名称 #####

`‹`

1.  左单角引号用作左箭头
2.  通常不用小于号：`<`因为这个小于号之间的角度太小

`›`

1.  右单角引号用作右箭头
2.  通常不用大于号：>因为这个大于号之间的角度太小

`‸`

1.  插入符号用作朝上的箭头
2.  这是我看到箭头感觉可以用的，还没有看到有人这样用

--------------------

### 表单元素 ###

:-moz-placeholder{
    	color:#333; /*mozilla ff 4-18*/
    }
    ::-moz-placeholder{
    	color:#333; /*mozilla ff 19+*/
    }
    :-ms-input-placeholder{
    	color:#333; /*ie 10+*/
    }
    ::-webkit-input-placeholder{
    	color:#333; /*webkit browsers*/
    }

1.  placeholder颜色改变

input[type=text], input[type=search]{
      outline:none; 
    }

1.  点击之后出现黄框–无黄框

###### select ######

select{
      border:1px solid #000;  /* chorome和firefox里的边框不一样，所以复写了 */
      outline:none;   /* 点击之后出现黄框--无黄框 */
      /** 将select选择框样式清除 */
      appearance:none;
      -moz-appearance: none;
      -webkit-appearance:none;
    }
    /* 清除ie选择框默认样式，隐藏下拉箭头（aSuncat：发现好像没效果，再看看？）*/
    select::-ms-expand{
      display:none;
    }

###### textarea ######

textarea{
      border:none;      /*有内嵌的边框--无边框*/
      background-color:#fff;  /*背景颜色灰色--白色*/
      outline:none;   /*点击后出现黄框--无黄框*/
      resize:none;    /*右下角出现三角形--无三角形*/
    }

###### button ######

button, input[type="button"]{
      outline:none;   /*点击之后出现黄框--无黄框*/
      -webkit-appearance: none;   /*取消ios按钮会出现定制的样式*/
    }

###### checkbox ######

input[type="checkbox"]{
      -webkit-appearance: none;
      -moz-appearance: none;
      background:#fff url(images/1.png) 50% 50%;
      background-size:20px 20px;
      background:none\0;
      *background:none;
      width:22px;
      height:22px;
      vertical-align:middle;
    }
    input[type="checkbox"]:checked{
      background:url(images/1.png) 50% 50%;
      background-size:20px 20px;
      outline:none;
    }
    input[type="checkbox"][disabled]{
      background:url(images/1.png) 50% 50%;
      background-size:20px 20px;
      outline:none;
    }
    input[type="checkbox"][disabled]:checked{
      background:url(images/1.png) 50% 50%;
      background-size:20px 20px;
      outline:none;
    }

1.  改变左边选框的样式
2.  background背景图其实可以合成一个，然后通过background-position来根据需求放不同的图

input[type="checkbox"]:checked+label:before,input[type="checkbox"]:not(:checked)+label:before{
          background:#fff url(images/1.png);
          content:" ";
          height:22px;
          left:0;
          position:absolute;
          width:22px;
    }
    input[type="checkbox"]:not(:checked):focus+label:before,input[type="checkbox"]:not(:checked)+label:hover:before{
      background:url(images/1.png) 50% 50%;
      background-size:20px 20px;
      outline:none;
    }
    input[type="checkbox"]:checked+label:before{
      background:url(images/1.png) 50% 50%;
      background-size:20px 20px;
      outline:none;
    }
    input[type="checkbox"][disabled]:not(:checked)+label:before{
      background:url(images/1.png) 50% 50%;
      background-size:20px 20px;
      outline:none;
    }
    input[type="checkbox"][disabled]:checked+label:before{
      background:url(images/1.png) 50% 50%;
      background-size:20px 20px;
      outline:none;
    }
    <style>
    <script>
    // 如果不支持：checked伪类选择器则可以通过js来改变状态
    $('input[type="checkbox"]').on('change',function(){
        $(this)[$(this).prop('checked')?'addClass':'removeClass']('checked');
    });
    </script>

1.  以上是`input[type="checkbox]`用label做，兼容性更好的写法
2.  css部分`input[type="checkbox"].checked+label:before{...}`

--------------------

### 布局css ###

###### display(显示)与visibility(可见) ######

.css{
    	display: none;
    }

1.  display:none或visibility:hidden都可以隐藏一个元素，但是display:none隐藏的元素不会占用任何空间，visibility:hidden隐藏的元素扔占用与未隐藏之前一样的空间。

###### flex ######

div{
      display:flex;
      display:-webkit-flex;
    }
    div>div{
      flex:1 1 0;
    }

1.  让一行的div平均分布
2.  `align-items`:定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。可用于让文字上下居中。可取值：`strech|center|flex-start|flext-end|baseline`  
    （1）strech:项目被拉伸以适应容器。  
    center:项目位于容器的中心。  
    flex-start:项目位于容器的开头。  
    flex-end：项目位于容器的结尾。  
    baseline:项目位于容器的基线上。

--------------------

### font字体 ###

.css{
    	font-size: 12px;
    }

1.  `font`:简写时，属性值的顺序为：`font-style font-variant font-weight font-size/line-height font-family`  
    (1)font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。
2.  三大手机系统字体  
    （1）ios系统  
    ①默认中文字体是Heiti SC  
    ②默认英文字体是Helvetica  
    ③默认数字字体是HelveticaNeue  
    ④无微软雅黑字体  
    （2）android系统  
    ①默认中文字体是Droidsansfallback  
    ②默认英文和数字字体是Droid Sans  
    ③无微软雅黑字体  
    （3）winphone系统  
    ①默认中文字体是Dengxian(方正等线体)  
    ②默认英文和数字字体是Segoe  
    ③无微软雅黑字体  
    （4）总结  
    ①各个手机系统有自己的默认字体，且都不支持微软雅黑  
    ②如无特殊需求，手机端无需定义中文字体，使用系统默认  
    ③英文字体和数字字体可使用 Helvetica ，三种系统都支持

--------------------

### text文字 ###

p{
          text-transform:uppercase;
          text-indent:50px;
          letter-spacing:2px;
          word-spacing:5px;
          line-height:20px;
          direction:rtl;
          text-shadow:2px 2px #f00;
          vertical-align:middle;
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
        }

1.  `text-transform`:文本转换属性,用来指定在一个文本中的大写和小写字母。可取值：`uppercase|lowercase|capitalize`  
    （1）uppercase:所有字句变成大写字母  
    lowercase:所有字句变成小写字母  
    capitalize:每个单词的首字母大写
2.  `text-indent`:指定文本第一行的缩进。
3.  `letter-spacing`:指定字符之间的空间，允许使用负值。
4.  `word-spacing`:指定单词之间的空白空间。（只对英文单词之间的距离起作用，对中文和标点符号不起作用，不管是半角还是全角的标点符号都不起作用）
5.  `white-space`:文字换行。可取值：`normal|pre|nowrap|pre-wrap|pre-line|inherit`  
    （1)normal:默认。空白会被浏览器忽略。  
    pre：空白会被浏览器保留。其行为方式类似于html中的`<pre>`标签。  
    nowrap：文本不会换行，文本会再同一行继续，直到遇到  
    标签为止。  
    pre-wrap：保留空白符序列，但是正常地进行换行。  
    pre-line：合并空白符序列，但是保留换行符。  
    inherit：规定应该从父元素继承white-space属性的值。
6.  `word-wrap`:自动换行属性。允许对长的不可分割的单词进行分割并换行到下一行。可取值：normal|break-word。
7.  `break-word`,强制换行。如果是英文单词，则会强制分裂它中间的一个字。
8.  `word-break`:规定非中日韩文本的换行规则。opera浏览器不支持。可取值:normal|break-all|keep-all。
9.  `break-all`：允许在单词内换行。
10. `keep-all`：只能在半角空格或连字符处换行。
11. `line-height`:指定行与行之间的空间。可取值：`normal|number|length|%|inherit`  
    （1)normal：默认。设置合理的行间距  
    number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。  
    length：设置固定的行间距。  
    %：基于当前字体尺寸的百分比行间距。  
    inherit：规定应该从父元素继承line-height属性的值
12. `direction`:设置元素的文本方向。可取值：`ltr(默认)|rtl|inherit`
13. `text-shadow`:设置文本阴影
14. `vertical-align`:设置一个元素的垂直对齐。可取值：`baseline|sub|super|top|text-top|middle|bottom|text-bottom|length`  
    （1)baseline:元素设置在父元素的基线上。默认。  
    sub：垂直对齐文本的下标。  
    super：垂直对齐文本的上标.  
    top：把元素的顶端与行中最高元素的顶端对齐。  
    text-top：把元素的顶端与父元素字体的顶端对齐。  
    middle：把此元素放置在父元素的中部。  
    bottom：把元素的顶端与行中最低的元素的顶端对齐。  
    text-bottom：把元素的底端与父元素字体的底端对齐。  
    length  
    %：使用“line-height”属性的百分比值来排列此元素。允许使用负值。  
    inherit：规定应该从父元素继承vertical-align属性的值  
    15、`text-overflow`:指定当文本溢出包含它的元素，应该发生什么。可取值：`clip|ellipsis|string`  
    （1)clip:修剪文本.  
    ellipsis：显示省略符号来代表被修剪的文本。  
    string:使用给定的字符串来代表被修剪的文本。

{
    	white-space:nowrap;
    	overflow:hidden;
    	text-overflow:ellipsis;
    }

1.  让文字在一行显示，并且后面显示…
2.  white-space:nowrap可以让文字只在一行显示
3.  overflow:hidden可以让文字的溢出部分隐藏
4.  text-overflow:ellipsis可以让文字后面显示…

{
    	text-align:justify;
    	text-align-last:justify;
    }

1.  让文字左右对齐。text-align:justify和text-align-last:justify 结合可以让每行不相关的文字也可以左右对齐。如果只是text-align:justify是多行文字对齐。

--------------------

### background背景 ###

.css{
    	background:#fff url(img/1.png) no-repeat 50% 50%;   /* 1、50% 50%可以让图上下左右居中，也可以写成10px 10px等用像素表示。2、百分比表示的是图占这个div的空间 */
    	background-size:10px 10px;  /* 限定了背景图的大小 */
    }

1.  background简写时，属性值的顺序为：`background-color background-image background-repeat background-attachment background-position;`
2.  `background-attachment`设置背景图像是否款规定或者随着页面的其余部分滚动。可取值:`scroll|fixed|inherit`  
    （1）scroll：背景图片随页面的其余部分滚动。这是默认。  
    fixed：背景图像是固定的  
    inherit:指定background-attachment的设置应该从父元素继承
3.  `background-position`:设置背景图像的起始位置。
4.  `background-size`:指定背景图像的大小。可取值：`length|percentage|cover|contain`  
    （1）length:10px 10px|10px auto;  
    percentage:10% 10%|10% auto;  
    cover：此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小  
    contain:此时会保持图像的纵横比并将图像缩放成适合背景定位区域的最大大小
5.  `background-origin`:指定背景图像的定位区域（注意是背景图像，而不是背景色）。可取值：`border-box|padding-box|content-box;`  
    （1)border-box：背景图像边界框的相对位置  
    padding-box:背景图像填充框的相对位置  
    content-box:背景图像的相对位置的内容框  
    （2)如果background-attachment是fixed，则background-origin没有任何效果
6.  `background-clip`:指定背景绘制区域（注意是背景色，而不是背景图像）。可取值：`border-box|padding-box|content-box;`  
    （1）border-box：背景绘制在边框方框内（剪切成边框方框）  
    （2）padding-box（剪切成衬距方框）:  
    （3）content-box（剪切成内容方框）:

--------------------

### 图标 ###

1.  类似于书签的图标用css实现。

--------------------

### 图片 ###

`img{ pointer-events:none; }`

1.  只禁止图片被存储，可用，如果使用这个属性，则所有的图片点击事件都会失效。

txt, img{
    	-webkit-user-select: none;
    	-moz-user-select: none;
    	-ms-user-select: none;
    	user-select: none;
    }

1.  禁止复制文字。
2.  禁止文字和图片被存储。
3.  如果用`{pointer-events:none;}`，在iphone6上长按后会出现一个遮罩层。
4.  不想什么被选中就对哪个选择器进行user-select样式的设置。
5.  `user-select:none`会造成输入框不可输入，如果有输入框没有设置`readonly`或者`disabled`属性却不能输入，可能就是这个原因。

img{
      pointer-events:none; 
    }

1.  长按图片不会被选中提示存储图片，但是如果先选择旁边的文字，再覆盖选取图片，图片也会被copy。

html{
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

1.  可以让a链接在手机端点击的时候不出现背景颜色。

.weui_cells:after{
    	content: " ";
    	position: absolute;
    	left: 0;
    	width: 100%;
    	height: 1px;
    	color: #d9d9d9;
    	-webkit-transform: scaleY(.5);
    	transform: scaleY(.5);
    	bottom: 0;
    	border-bottom: 1px solid #d9d9d9;
    	-webkit-transform-origin: 0 100%;
    	transform-origin: 0 100%;
    }

1.  用after,before制作任意长度的边框。

img{
      opacity:0.4;    /*取值从0.0到1.0*/
      filter:alpha(opacity:40);   /*滤镜：for IE8 and earlier，取值从0到100*/
    }
    .css { /* image-set实现高清化 */
      background-image: url(1x.png);    /* 不支持image-set的情况下显示 */
      background: -webkit-image-set(
        url(1x.png) 1x, /* 支持image-set的浏览器的[普通屏幕]下 */
        url(2x.png) 2x, /* 支持image-set的浏览器的[2倍Retina屏幕] */
        url(3x.png) 3x /* 支持image-set的浏览器的[3倍Retina屏幕] */
      );
    }

.gray {
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
      filter: gray;
    }

1.  图片变灰

div:after{
          content:" ";
          display:inline-block;
          -webkit-transform:rotate(45deg);
          transform:rotate(45deg);/*控制箭头方向*/
          height:6px;
          width:6px;
          border-width:2px 2px 0 0;
          border-color:#c7c7cc;
          border-style:solid;
          position:relative;
          top:-2px;
          position:absolute;
          right:15px;
          top:50%;
          margin-top:-4px;
        }

1.  利用border制成列表向右的箭头（可以是任何方向）

.css{
      -webkit-touch-callout:none;
    }

1.  禁止ios和android长按时下载图片

--------------------

### table表格 ###

table{
    	border-collapse:collapse;
    	table-layout:fixed;
    }

1.  border-collapse:设置表格的边框是否被折叠成一个单一的边框或隔开。  
    border-collapse:collapse;
2.  table-layout:设置表格布局算法。  
    table-layout:fixed;
3.  （1）表格边框与表格单元格线的重叠,用border-collapse:collapse;  
    （2）嵌套表格与被嵌套表格边线重叠问题，用border-top|right|bottom|left;  
    （3）嵌套表格与被嵌套表格对不齐问题，用table-layout:fixed

--------------------

### 屏幕旋转事件和样式 ###

--------------------

### 手机适配 ###

/*中分辨率屏幕*/
    @media(-webkit-min-device-pixel-ratio:1){
      css代码；
    }
    /*高分辨率屏幕*/
    @media(-webkit-min-device-pixel-ratio:1.5){
      css代码；
    }
    /*超高分辨率屏幕（传说中的Retina屏）*/
    @media(-webkit-min-device-pixel-ratio:2){
      css代码；
    }

1.  手机屏幕适配

/**rem自适应*/
    html {
      font-size : 20px;
    }
    @media only screen and (min-width: 320px){
      html {
        font-size:88.89px !important;
      }
    }
    @media only screen and (min-width: 360px){
      html {
        font-size:100px !important;
      }
    }
    @media only screen and (min-width: 400px){
      html {
        font-size:111.11px !important;
      }
    }
    @media only screen and (min-width: 480px){
      html {
        font-size:120px !important;
      }
    }
    @media only screen and (min-width: 640px){
      html {
        font-size:177.78px !important;
      }
    }

--------------------

\#\#\# css变换

transition：translate()|rotate()|scale()|skew()|matrix(）

1.  2D转换、3D转换

transform

1.  过渡

animate
    @keyframes

1.  动画

--------------------

### 基础css ###

body{
    	-webkit-font-smoothing:antialiased; /*①none：对低像素的文本比较好;②subpixel-antialiased：默认值 ;③antialiased：抗锯齿很好*/
    }

/*快速滚动和回弹的效果，看上去和原生app的效率差不多*/
    .css{
    	-webkit-overflow-scrolling : touch;
    }
    /*加了这一条属性后遇到了向下滑动后页面变成空白的问题，实际上可以通过一条 CSS 属性把页面加载到内存来解决*/
    .css{
    	-webkit-transform: translate3d(0,0,0);
    }

column-count等

1.  css3多列，有点像报纸的那种排版

template.html

发表评论取消回复

还没有评论，来说两句吧...

相关阅读