template.html

最新推荐文章于 2024-06-29 10:47:50 发布

aSuncat

最新推荐文章于 2024-06-29 10:47:50 发布

阅读量3.4k

点赞数

文章标签： html css js 前端

本文链接：https://blog.csdn.net/aSuncat/article/details/85287853

版权

html、css 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

head

link

<link rel="shortcut icon" href="images/1.jpg" type="image/x-icon">

给title前面添加的图标

<link rel="apple-touch-icon-precomposed" href="http://spion.blog.163.com/blog/iphone_milanoo.png">

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

<link rel="apple-touch-startup-image" href="logo_startup.png">

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

<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png">
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png">

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

<link rel="stylesheet" href="" media="screen">

media:设备。可取值：all|aural|braille|handheld|projection|print|screen|tty|tv
all：默认，适应所有设备
aural：语音合成器
braille：盲人用点字法反馈设备
handheld：手持设备（小屏幕、有限的带宽）
projection：放映机
print：打印预览模式/打印页
screen：计算机屏幕（默认值）
tty：电传打字机以及使用等宽字符网络的类似媒介
tv：电视类型设备（低分辨率、有限的屏幕翻滚能力）

html

form表单

form标签

<form action="" target="_self" autocomplete="off" id="form1">

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

input标签

<input type="file" name="img" id="img" accept="image/*,audio/*">
<input type="submit" formtarget="_blank">

<input type="text" name="lname" form="form1">

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

<input type="" autocapitalize="off" autocorrect="off">

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

<input readonly unselectable="on" onfocus="this.blur()">

readonly在ios点击有光标

textarea标签

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

table表格

<table cellpadding="10px" cellspacing="10px">
	<caption>表格标题</caption>
	<tr>
	<th>表头</th>
	</tr>
	<tr>
	<td>内容</td>
	</tr>
</table>

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

列表

<ol style="list-style-type:none">
  <li></li>
  <li></li>
  <li></li>
</ol>

有序列表

<ul style="list-style-type:none">
  <li></li>
  <li></li>
  <li></li>
</ul>

无序列表

<dl>
  <dt>coffee</dt> <!--自定义列表项目-->
  <dd>-black hot drink</dd>   <!--定义自定义列表的描述-->
  <dt>coffee</dt>
  <dd>-black hot drink</dd>
</dl>

定义列表

.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
}

列表标记类型

图片

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

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

<img src="planets.gif" width="145" height="126" alt="planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="sun" href="sun.html">
  <area shape="circle" coords="90,58,3" alt="mercury" href="mercury.html">
  <area shape="circle" coords="90,58,8" alt="venus" href="venus.html">
</map>

图像映射

音频

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

视频

<video width="320" height="240" controls>
  <source src="1.mp4" type="video/mp4">
  <source src="2.mp4" type="video/ogg">
  <source src="3.mp4" type="video/webm">
</video>

基础html

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

改变文字方向

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

<fieldset>
  <legned>标题</legned>
  <!--内容start，里面可以放输入框，div，p等各种内容-->
  <div>内容</div>
  <!--内容end-->
</fieldset>

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

<iframe src="http:www.baidu.com">
  <p>您的标签不支持iframe标签</p>
</iframe>

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

<noscript>您的浏览器不支持javaScript</noscript>

如果浏览器不支持script

html实体名称

&lsaquo;

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

&rsaquo;

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

‸

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

css

表单元素

:-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*/
}

placeholder颜色改变

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

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

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;
}

改变左边选框的样式
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>

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

布局css

display(显示)与visibility(可见)

.css{
	display: none;
}

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

flex

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

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

font字体

.css{
	font-size: 12px;
}

font:简写时，属性值的顺序为：font-style font-variant font-weight font-size/line-height font-family
(1)font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。
三大手机系统字体
（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;
    }

text-transform:文本转换属性,用来指定在一个文本中的大写和小写字母。可取值：uppercase|lowercase|capitalize
（1）uppercase:所有字句变成大写字母
lowercase:所有字句变成小写字母
capitalize:每个单词的首字母大写
text-indent:指定文本第一行的缩进。
letter-spacing:指定字符之间的空间，允许使用负值。
word-spacing:指定单词之间的空白空间。（只对英文单词之间的距离起作用，对中文和标点符号不起作用，不管是半角还是全角的标点符号都不起作用）
white-space:文字换行。可取值：normal|pre|nowrap|pre-wrap|pre-line|inherit
（1)normal:默认。空白会被浏览器忽略。
pre：空白会被浏览器保留。其行为方式类似于html中的<pre>标签。
nowrap：文本不会换行，文本会再同一行继续，直到遇到
标签为止。
pre-wrap：保留空白符序列，但是正常地进行换行。
pre-line：合并空白符序列，但是保留换行符。
inherit：规定应该从父元素继承white-space属性的值。
word-wrap:自动换行属性。允许对长的不可分割的单词进行分割并换行到下一行。可取值：normal|break-word。
break-word,强制换行。如果是英文单词，则会强制分裂它中间的一个字。
word-break:规定非中日韩文本的换行规则。opera浏览器不支持。可取值:normal|break-all|keep-all。
break-all：允许在单词内换行。
keep-all：只能在半角空格或连字符处换行。
line-height:指定行与行之间的空间。可取值：normal|number|length|%|inherit
（1)normal：默认。设置合理的行间距
number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length：设置固定的行间距。
%：基于当前字体尺寸的百分比行间距。
inherit：规定应该从父元素继承line-height属性的值
direction:设置元素的文本方向。可取值：ltr(默认)|rtl|inherit
text-shadow:设置文本阴影
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;
}

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

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

让文字左右对齐。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;  /* 限定了背景图的大小 */
}

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

图标

<style>
.book{
	width:100px;
	height:50px;
	background-color:#f00;
	position:relative; /* 不要忘了写 */
}
.book:after{
	content:" ";
	position:absolute;
	left:0;
	bottom:0;
	width:0;
	height:0;
	border-left:50px solid transparent;
	border-right:50px solid transparent;
	border-bottom:10px solid #fff;
}
<style>
<body>
	<div class="book"></div>
</body>

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

图片

img{ pointer-events:none; }

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

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

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

img{
  pointer-events:none; 
}

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

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

可以让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%;
}

用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;
}

图片变灰

    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;
    }

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

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

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

table表格

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

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

屏幕旋转事件和样式

<style>
    /* 竖屏时使用的样式，@media后面的all，也可以是screen */
    @media all and (orientation:portrait){
      .css{}
    }
    /* 横屏时使用的样式，@media后面的all，也可以是screen */
    @media all and (orientation:landscape){
      .css{}
    }
</style>
<script>
    window.onorientationchange=(window.orientation){
      -90:
      90:
      alert("横屏"+window.orientation);
      0:
      180:
      alert("竖屏"+window.orientation);
    }
</script>

手机适配

/*中分辨率屏幕*/
@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代码；
}

手机屏幕适配

/**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(）

2D转换、3D转换

transform

过渡

animate
@keyframes

动画

基础css

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

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