html+css学习记录

HTML标签:

基本框架:
<html>
 <head></head>
 <body>
  
 </body>
</html> 
注释:
<!-- -->
头标签内:
<title></title>
<meta></meta>可以设置页面跳转以及设置页面相关内容
<base></base>设置超链接基本设置
块状:<div></div>
内联:<span></span>
段落:<p></p>
标题:<h1-6></h1-6>
图片:<img src="图片地址" alt="图片说明" title="鼠标停留效果"/>
列表
列表:<dl></dl> <dt></dt><dd></dd>
有序<ol></ol> 无序<ul></ul> 
表格:<table></table>
行:<tr></tr>
列:<td colspan="n(跨n列)" rowspan="n(跨n行)"></td>
列(加粗居中)<th></th>
超链接:<a href="链接地址" target = "_blank(另开网页)" title="鼠标停留效果"></a>
锚点:<a name="名称"></a>
伪类:(所有标签都能用)
a:link(a):当前
a:visited:访问后
a:hover:鼠标放上去瞬间
a:active:点击瞬间(不常用)
顺序不能乱:lvha
字符实体: &+实体名+;
表单:<from action="发送地址" method="post | get" ></from>
表单输入标记:<input type="类型" name="名称"/>
type类型:text | password | file | radio |checkbox |submit | hidden等
text默认值:value="默认值"
radio | checkbox默认选中 :checked=“checked”
多行文本标记:<textarea></textarea>
下拉列表标记:<select name="名称"></select>
(选项):<option value="默认值" selected="selected"></option>
框架集:<frameset rows="n(n行)" cols="m(m列)"></frameset>
<frame src="地址" name="名称"></frame>

其他常用标签:
b:加粗
s:删除线
u:下划线
i:斜体
pre:原样输出
sub:下标
sup:上标
button:按键

css:

css选择器:控制的越精细,优先级越高
css4种使用方式:
1,外联式样式表(<link rel="stylesheet" href="/css/default.css">)
2,内嵌样式表(<style></style>)
3,元素内定(<p style="font-size:10.5pt">)
4,导入样式表(@import url(css/home.css);)
部分设置名词
height 高
width 宽

段落控制:
text-indent //首行缩进
text-align//水平文本方向
text-decoration//文本装饰线
letter-spacing//字符间距
text-transform//字母大小写转换

文字控制:
font-style//文本样式
font-weight//文字粗细
font-size//文字大小
line-height//行高
font-family//字体(可设置多个,优先级从左到右)
sans-serif //无衬线字体
serif //有衬线字体

背景控制:
background-color//背景颜色
background-image//背景图
background-repeat//图片是否重复
background-attachment//背景图粘贴方式
background-position:(x,y)//背景图位置

color   //字体色
margin  //外边距
padding //内边距
border  //外边框
display //显示
float   //浮动
clear   //清除浮动

列表
list-style-type //列表类型
表格
border-spacing //表格间距
border-collapse:collapse //取消表格间距
border-radius //画圆角

overflow //溢出
hidden | scroll | auto | visible
position//定位
static|relative|absolute|fixed
z-index//高度
如何让一个div在其他div之上显示:给这个div固定定位
  position:fixed(脱离文档流);

猜你喜欢

转载自blog.csdn.net/sm20170867238/article/details/89760973