首页 > 代码库 > 蓝鸥零基础学习HTML5第七讲 常见标签及标签类型的转换
蓝鸥零基础学习HTML5第七讲 常见标签及标签类型的转换
蓝鸥零基础学习HTML5第七讲 常见标签及标签类型的转换
1.常见标签-块属性的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://www.mamicode.com/css/reset.css">
</head>
<body>
<!--
语义：你说的话到底是什么意思
权重：优先先考虑谁
title标签
写法:<title></title>
双标签
语义：网页标题
权重最大
div标签
写法：<div></div>
双标签
语义：无意义
默认样式：无
h标签
h1~h6
写法：
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
双标签
语义：标题
默认样式：font-size font-weight margin
权重 ：h1 最大 h2 次之 h3更次之 。。。。。。。
h1页面中最好不要超过一个
h2页面中最好不要超过12个
h3之后的h标签就随便了
样式初始化文件 reset.css
群组选择器 , 例 :
h1,h2,h3,h4,h5,h6{
margin:0;
}
p标签
写法：<p></p>
双标签
语义：段落
默认样式：margin
p标签在嵌套时不要包含块元素的标签
ul标签
写法：<ul></ul>
双标签
语义：无序列表
默认样式：margin padding-left list-style-type
li标签
写法：<li></li>
双标签
语义：列表项
默认样式：list-style-type
ol标签
写法：<ol></ol>
双标签
语义：有序列表
默认样式：margin padding-left list-style-type
ul,ol和li 是组合标签
ul,ol的第一层子级一定是li li的父级一定是ul或ol
<ul>
<li>
<h2></h2>
</li>
</ul>
<div>
<ul>
<li></li>
</ul>
</div>
<ol>
<li>
<ul>
<li></li>
</ul>
</li>
</ol>
<div>
<ol>
<li></li>
</ol>
</div>
dl标签
自定义列表 字典标签
dl dt dd
写法：<dl></dl>
双标签
语义：自定义列表
默认样式：margin
dt
写法：<dt></dt>
双标签
语义：列表标题
默认样式：无
dd
写法：<dd></dd>
双标签
语义：列表说明
默认样式：margin-left
块标签
特性：
-->
<div>我是DIV</div>
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
<p>我是p</p>
<!-- -->
<p>
我是P1
<!-- <p>我是P2</p> -->
<!-- <div>我是DIV</div> -->
</p>
<ul>
<li>我是li 1</li>
<li>我是li 2</li>
<li>我是li 3</li>
<li>我是li 4</li>
</ul>
<ol>
<li>我是li 1</li>
<li>我是li 2</li>
<li>我是li 3</li>
<li>我是li 4</li>
</ol>
<dl>
<dt>美女</dt>
<dd>古代用来形容女子很漂亮</dd>
<dd>打招呼</dd>
</dl>
</body>
</html>
2.块标签的特性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://www.mamicode.com/css/reset.css">
<style>
div {
/*border:1px solid red;*/
}
/*#box1 {
width:500px;
height:400px;
background: red;
}
#box2 {
height:100px;
background: yellow;
}*/
#box1 {
width:400px;
height:200px;
background: red;
}
#box2 {
width:200px;
height:300px;
background: yellow;
}
</style>
</head>
<body>
<!--
块属性的标签 特性：
1.默认是父级100%的宽
2.支持所有CSS样式
3.独占一行
-->
<!-- <div>1</div>
<div>2</div>
<div>3</div>
<div>4</div> -->
<!-- <div id="box1">
<div id="box2"></div>
</div> -->
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
3.常见标签-内联属性的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://www.mamicode.com/css/reset.css">
<style>
img {
/*width:300px;
height:300px;*//*
padding:10px;
margin:20px;*/
border:1px solid red;
}
</style>
</head>
<body>
<!--
内联属性的标签
内联标签
特性：
1.同属性的标签排在同一排
2.内容撑开宽度
3.不支持宽高，不支持上下的padding和margin
4.代码换行被解析 间距大小取决于父级的font-size的大小
span标签
写法：<span></span>
双标签
语义：无意义
默认样式：无
strong标签
写法：<strong></strong>
双标签
语义：强调
默认样式：font-weight
权重比较高
em标签
写法：<em></em>
双标签
语义：强调
默认样式：font-style
权重比较高
a标签
写法：<a href="http://www.mamicode.com/需要链接的网页地址" target="打开网页的方式"></a>
双标签
语义：超链接
默认样式：color text-decoration cursor
温馨提示：
href属性中
1.如果要链接一个网站地址的话，一定要加 http://
2. # 代表链接到当前页
target
_self 默认 在当前窗口打开
_blank 在新窗口打开
内联块标签
内联块属性
特性：
1.同属性的标签排在同一排
2.内容撑开宽度
3.支持所有的css的样式
4.代码换行被解析，间距大小取决于父级的font-size大小
img标签
写法：<img src="http://www.mamicode.com/图片的路径地址" alt="图片说明">
单标签
语义：图片
默认样式：低版本浏览器中有默认的边框
温馨小提示：
1.路径地址一定要正确
2.alt属性一定要写
-->
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
<div>我是div4</div>
<span>我是span1</span><span>我是span2 我比较宽</span><span>我是span3</span>
<span>我是span4</span>
<!-- <div>我是下面的DIV</div> -->
<strong>我是strong1</strong>
<strong>我是strong2</strong>
<strong>我是strong3</strong>
<strong>我是strong4</strong>
<em>我是em1</em>
<em>我是em2</em>
<em>我是em3</em>
<em>我是em4</em>
<a href="http://www.baidu.com" target="_blank">链接到百度</a>
<a href="http://www.mamicode.com/#">我是A2</a>
<a href="http://www.mamicode.com/#">我是A3</a>
</html>
4.标签类型的转换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*div {
border:1px solid red;
display: inline;
width:100px;
height:100px;
}*/
span {
border:1px solid red;
height:100px;
display: block;
}
h2 {
border:1px solid red;
display: inline-block;
width:100px;
height:100px;
}
p {
border:1px solid red;
display: none;
}
</style>
</head>
<body>
<!--
标签类型的转换
显示为无：display:none;
块属性 display:block;
内联属性
内联 display:inline;
内联块 display:inline-block;
-->
<div>1</div>
<div>2</div>
<span>span1</span>
<span>span2</span>
<h2>我是h2</h2>
<h2>我是h2</h2>
<p>我是p标签</p>
<div>我是DIV</div>
</body>
</html>
蓝鸥零基础学习HTML5第七讲 常见标签及标签类型的转换