html+css
Posted yuyuanwen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html+css相关的知识，希望对你有一定的参考价值。
1.页面基础元素：<html>
<html>是页面的基础元素，主要用来定义页面的开始和结束部分。元素语法结构如下<html>....</html>（开头标记为<>,结束标记为</html>）先介绍一下完整的HTML文件的基本结构
<html> 文件开始标记
<head> 文件头开始标记
......... 文件头部分的内容
</head> 文件头结束标记
<body> 文件主体开始标记
......... 文件主题部分的内容
</head> 文件主题结束标记
</html> 文件结束标记
2.基本标签
①头部元素：<head></head>
②标题元素 <title></title>
③超链接 <a href=" "></a>
④标题标签 <h1></hi1>
3.
<span></span> 无语义，标识作用
<br/>换行
 空格
<hr/>横线
<address></address>地址，斜体格式
<pre></pre>加一段代码
<ul>
<li></li>无序列表
</ul>
<ol>
<li></li>有序列表
</ol>
<div></div> 块
<table>
<tr>
<th></th>
<td></td>
</tr>
</tbody>
</table>
<style type="text/css"></style>
<a href="目标连接" title="" target="">链接显示的文本</a> 其中target=""表示打开的网页在新的标签页打开
<img src="图片链接" alt="图片加载失败时显示的文字" title="鼠标滑过图片时显示的文字">
<form method="post/get" action="数据被传送到的地方">
<input type="password" name="pass"/> 密码框
<textarea cols="50" rows="30">在这里输入内容</textarea> 介绍框
<input type="radio" value="值" name="somename" checked="checked"/> 单选框
<input type="checkbox" value ="值" name="somename" checked="checked"> 复选框
<select>/<select multiple="multiple">
<option value="值">显示的值</option>
<option value="值" selected = "selected">显示的值</option>
</select>
<input type="submit" value="确定" name="submit"/>
<input type="reset" value="重置" name="reset"/>
</form>
3.
<span class="name"></span>
.name{CSS样式}
<span id="name"></span>//一个名字只允许使用一次
#name{CSS样式}
子选择器 >
.first>secod{CSS样式}//只能是第一代子标签
后代选择器 （空格）
.father child{CSS样式}
通用选择器 *
伪类选择器：
例如 a:hover{color:red}
鼠标滑过显示红色
分组选择器
h,span{color:red}
CSS样式分为内联式、嵌入式、外部式
内联式：<p style="color:red"></p>
嵌入式：<style type="text/css"></style>
外部式：<link href="base.css" rel="stylesheet" type="text/css">
优先级：内联式>嵌入式>外部式
CSS样式权重：
标签权值为1
class选择器为10
id选择器为100
设置最高权值!important
盒子模型：
div{padding:1px 2px 1px 2px}//上，右，下，左
div{padding:1px}//全部
div{padding:1px 2px}//上下，左右
CSS布局模型
1）浮动模型（float）
可以实现块状元素在同一行
div{float:left/right}
2）
有三种定位方式：
绝对定位：position:absolute
相对定位：position:relative
固定定位：position:fixed
div{position:relative;
top:50px;
left:50px;}//相对于原位置向下向右移动50px，但偏离前的位置保持不变
div{
position:absolute;
top:50px;
left:50px;}//定位于父块距上和左50px
div{position:fixed;
bottom:0;
right:0;
}//定位于窗口
假设父块box1,和子块box2,要使得box2相对于box1定位，需要在box1设置position:relative,box2中设置position:absolute
3.
文字排版-字体设置body{font-family:"Microsoft Yahei";} 将字体设置为微软雅黑
文字排版-粗体
p span{font-weight:bold;} 将span指向的元素设置为粗体
下划线
p a{text-decotation:underline;} 将a标签下划线去掉
段落排版-对齐
h1{text-align:center/left/right;} /*设置块状元素为居中/居左/居右*/
以上是关于html+css的主要内容，如果未能解决你的问题，请参考以下文章