常用标签和样式笔记整理

Posted 2020-07-03

注释：html<!--内容-->

　　　css/*内容*/

图片：<img src="#" title="鼠标滑过显示的文本" alt="图片替换文本">title是专门做提示信息的，alt是碰到图片加载不出来的情况会有文字替代。

　　　图片可以自己设置宽高，致谢高或者宽，图片会等比例缩放。

链接：<a href="#" target="_blank">是新页面的打开

　　　　<a href="javascript":;">是阻止任何跳转

锚链接的跳转(可实现返回顶部的功能）：<a name="abc" id="abc">aaa</a>

　　　　　　<a href="#abc">跳转到aaa</a>

表格：colspan是合并列 rowspan是合并行 cellspacing是单元格间距 cellpadding是填充单元格

表单：<form name="表单名称" method=“post/get” action=“需要提交到的处理信息的地址”>

　　文本框<input type="text" />

     密码框<input type="password" />

　　提交按钮<input type=“submit" />value可以输入默认值，placeholder可以输入灰色的提示信息，比方“请输入密码”

　　单选按钮<input type="radio" name="属性值比方说sex" checked="checked"(默认选中) />

　　多选按钮<input type=“checkbox”  disabled="disabled"(禁选) />

　　下拉列表<select>

　　　　　　　　　　<option></option>

　　　　　　　　　　　　　　...

　　　　　　</selct>

　　文本区域<textarea cols="字符宽度" rows=“行数”>

　　上传文件<input type="file" />

　　重置<input type="reset" value="重填" />

　　按钮<input name=“名称” type="button" value="按钮内容" />

外部样式表：1）<link rel="stylesheet" type="text/css" href="css/css文件" />

　　　　　　2）<style type="taxt/css">

　　　　　　@import url(目标文件路径）；

　　　　　　</style>

常见的重置样式：*{margin=0;padding=0;}          列表里： list-style:none       a里 text-decoration:none

链接伪类选择器：link超链接的初始状态

　　　　　　　　visited超链接被访问后的状态

　　　　　　　　hover鼠标悬停超链接的状态

　　　　　　　　active超链接被激活时的状态

　　　　　　　　属性cursor:point可以把箭头变手指

文字：font-weight文字加粗 font-style可以设置文字的倾斜  font-variant：small-caps 小写字母大写化

　　　text-aligin水平对齐 vertical-align垂直对齐 text-indent：首行缩进，可以取负值

　　　line-height设置行高，注：倍行高直接写倍数的数字不用加单位。行高和容器一样可以实现垂直居中

　　　说明：font顺序：style/variant/weight/size/line-height

　　　text-decoration可以设置下划线上划线和删除线等，这些可以并列存在

　　　border-style可以设置边框虚线实线或者点状线

　　　letter-spacing控制每一个字符的间距

　　   word-spacing控制词与词之间的间距

　　　layout-flow：horizontal自左向右文本/vertical-ideographic自上而下显示文本

列表：

　　list-style-img:url使用图片作为列表符号

　　list-style-position：outside、inside定义列表符号的位置

　　html里有序列表可以用type来确定前面的列表符号的样式

背景图片：background-color背景颜色

　　　　　background-repeat图片重复

　　　　　background-position图片位置

　　　　　background-attachment:scroll/fixed图片固不固定