首页 > 代码库 > 蓝鸥零基础学习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第七讲 常见标签及标签类型的转换