蓝鸥零基础学习HTML5第七讲常见标签及标签类型的转换

来源：互联网发布：qt连接oracle数据库编辑：程序博客网时间：2024/06/05 17:43

1.常见标签-块属性的标签

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<!--

语义：你说的话到底是什么意思

权重：优先先考虑谁

title标签

写法:<title></title>

双标签

语义：网页标题

权重最大

div标签

写法：<div></div>

双标签

语义：无意义

默认样式：无

h标签

h1~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>

</li>

</ul>

<div>

<ul>

</ul>

</div>

<ol>

<li>

<ul>

</ul>

</li>

</ol>

<div>

<ol>

</ol>

</div>

dl标签

自定义列表字典标签

dl dt dd

写法：<dl></dl>

双标签

语义：自定义列表

默认样式：margin

写法：<dt></dt>

双标签

语义：列表标题

默认样式：无

写法：<dd></dd>

双标签

语义：列表说明

默认样式：margin-left

块标签

特性：

-->

<div>我是DIV</div>

<p>

我是P1

</p>

<ul>

</ul>

<ol>

</ol>

<dl>

<dd>古代用来形容女子很漂亮</dd>

</dl>

</body>

</html>

2.块标签的特性

<!DOCTYPE html>

<head>

<title>Document</title>

<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 id="box1">

</div> -->

</body>

</html>

3.常见标签-内联属性的标签

<!DOCTYPE html>

<head>

<title>Document</title>

<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="需要链接的网页地址" target="打开网页的方式"></a>

双标签

语义：超链接

默认样式：color text-decoration cursor

温馨提示：

href属性中

1.如果要链接一个网站地址的话，一定要加 http://

2. # 代表链接到当前页

target

_self 默认在当前窗口打开

_blank 在新窗口打开

内联块标签

内联块属性

特性：

1.同属性的标签排在同一排

2.内容撑开宽度

3.支持所有的css的样式

4.代码换行被解析，间距大小取决于父级的font-size大小

img标签

写法：<img src="图片的路径地址" 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>

<strong>我是strong1</strong>

<strong>我是strong2</strong>

<strong>我是strong3</strong>

<strong>我是strong4</strong>

<a href="http://www.baidu.com" target="_blank">链接到百度</a>

</html>

4.标签类型的转换

<!DOCTYPE html>

<head>

<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;

-->

<p>我是p标签</p>

<div>我是DIV</div>

</body>

</html>

0 0

蓝鸥零基础学习HTML5第七讲 常见标签及标签类型的转换

蓝鸥零基础学习HTML5第七讲常见标签及标签类型的转换