目录
块属性标签
特点:
1.独占一行
2.支持设置宽高,不设置宽高情况下,高度内容撑开,宽度撑满父容器
<body>
<!-- 快属性标签 -->
<!-- 无意义 最常用 常用来划分区域和布局-->
<div>Hello World</div>
<!-- 段落:放置文字 -->
<p></p>
<!-- 标题标签 -->
<!-- h1~h6
h1标签只能写一个 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 列表标签 li标签不单独使用-->
<!-- 无序列表 -->
<ul>
<li>水浒传</li>
<li>三国演义</li>
<li>西游记</li>
<li>红楼梦</li>
</ul>
<!-- 有序列表-->
<ol>
<li>久旱逢甘露</li>
<li>他乡遇故知</li>
<li>洞房花烛夜</li>
<li>金榜提名时</li>
</ol>
</body>
行属性标签
特点:
1.不支持设置宽高,宽高由内容撑开
2.排成一行(左右排列)
<body>
<!-- 行属性标签 -->
<!-- 放置文字 -->
<span>武松</span>
<span>打虎</span>
<!-- 超链接标签-->
<!-- href属性中写目标页面的地址
可以写服务器地址
也可以写本地文件的相对地址
./返回上一级目录
href属性为空会刷新页面
###无效果
#返回顶部
-->
<a href="http://www.baidu.com">百度</a>
<!-- ../返回上一级目录 -->
<a href="../html/test.html">跳转页面</a>
<!-- 刷新页面 -->
<a href=""></a>
<!-- 无效果-->
<a href="###">刷新</a>
<!-- 返回顶部 -->
<a href="#">返回顶部</a>
</body>
行快属性标签
特点:既可以设置宽高,又可以排在一行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 设置图片格式 */
img{
width: 100px;
height: 100px;
}
input{
height: 30px;
}
</style>
</head>
<body>
<!-- 图片
src属性是图片的路径 可以是服务器地址 也可以是相对路径
-->
<!-- alt属性:图片加载失败显示的内容 -->
<!-- title属性:鼠标悬停后显示的内容 -->
<img src="" alt="图片加载失败" title=""/>
<img src="" alt="图片加载失败" title=""/>
<!-- 输入框 -->
<input type="text" name="" id="" value="" />
</body>
</html>
行块属性转换
display
/* 把标签转化为块属性 */
display: block;
/* 把标签转换为行块属性 */
display: inline-block;
/* 把标签转换为行属性 */
display: inline;
/* 隐藏 */
display: none;
三种常用的选择器
1. 标签选择器
2.id选择器
3.class选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签选择器 选择页面中所有此类标签
权重为1
*/
div{
}
/* id选择器
权重为100
*/
/* id名是唯一的,一个标签只能有一个id ,不同标签id也不可以相同 */
#two{
}
/* class选择器
权重为10
不同标签可以使用相同的class名
一个标签可以有多个class名
*/
.three{
}
.four{
}
</style>
</head>
<body>
<div>one</div>
<div id="two">two</div>
<div class="three">three</div>
<div class="three four">four</div>
</body>
</html>