HTML常用标签

程序员文章站 2022-05-31 20:44:08

...

HTML文档结构

HTML文档是由HTML元素定义的，元素指的是从开始标签到结束标签内的所有代码。元素分为两大类：一是用于确定超文本在浏览器内的显示方式，二是用于超文本在浏览器内的显示内容。基本的HTML结构标签有<html>、<head>、<body>、<title>等。

如下：

<html>
<head>
<title>first html</title>
</head>
<body>
welcome
</body>
</html>

HTML常用标签

1、基本标签

1）注释：

关于HTML注释，客户端可以查看到，当客户打开网页查看源码时，都可以看到JSP代码中的HTML注释，虽然浏览器会忽略他(不在浏览器显示)，但注释如果包含动态内容代码，jsp表达式将会被执行给浏览器，会被浏览器解析，动态码会报错。

2）标题：h1~h6有6种，从大到小。

3）换行：HTML通常是由<p>进行分段，但如果不想产生新的段落，就用

4）样式：style。

5）超链接：《a href="链接地址">xxxx</a>

6）图片：《img src="图片名字" alt="简单说明" width="" heigth="" broder="边框宽度" />

2、表格

3、表单

4、块级标签

特点：独占一行，对高度、宽度、行高以及顶和底边距都可设置的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；

典型的块级标签有：<div> ，h系列，<li>，<dt>，<dd>，<p> ，<form>，<ul>

5、行内标签

特点：可以多个标签存在一行，不可以自动换行，不能直接设置行内标签的高度、宽度、行高以及顶和底边距，完全靠内容撑开宽高！

典型的行内标签有：u（下划线），em(强调)，i(斜体)，sub(下标),sup(上标)<span>，<a>（多用于超链接），<b>，<strong>，<label>，

6、行内快标签

特点：结合的行内和块级的优点，可以自动换行，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；

典型的行内标签有：<img>，<input>

那么有的同学就会想了，难道我就不可以控制span或者font的宽高了吗？可以的，那么我们这次抛开浮动和定位不说，就说通过display属性来将它们互相转换：

1、块级标签转换为行内标签：display:inline;

2、行内标签转换为块级标签：display:block;

3、转换为行内块标签：display：inline-block;

只要给对应的标签使用这个display这个属性，取相应的值，就可以将显示模式互相转换。

下面请看如下示例：

1：将行内标签转换为块级标签

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>行内标签转块级标签</title>
 5         <style type="text/css">
 6             a{
 7                 width: 200px;
 8                 height: 200px;
 9                 background-color: red;
10                 display: block; 
11             }
12         </style>
13     </head>
14     <body>  <!--正常情况a标签作为一个行内标签你设置长和宽是没有效果的-->
15         <a href="https://www.baidu.com">百度</a>
16     </body> <!--而当你用display: block;代表行内标签转为块级标签-->
17 </html>

HTML常用标签

2：将行内标签转换为行内块标签

上面已经讲过行内块级标签和块级标签的区别，我在强调一遍：块级标签和行内块级标签都是可以设置长和宽的，但块级标记当你设置好后它是自动换行的，你不能在这一行再放其它东西，而行内块级标签在同一行中可以放置多个行内标签，具体我有案例来解释。

 1 <html>
 2     <head>
 3         <title>块级和行内块级</title>
 4         <style type="text/css">
 5             a{
 6                 width: 100px;
 7                 height: 100px;
 8                 background-color: green;
 9                 display: inline-block;  
10             }
11             div{
12             width:100px;
13             height:100px;
14            background-color: red;
15            margin-top:10px;  /* margin-top是来设置上下两个块的上下间距*/
16            }
17         </style>
18     </head>
19     <body>
20         <a href="https://www.baidu.com">百度</a>   
            <!--通过 display: inline-block;就可以将行内标签转为行内块级标签-->
21         <a href="https://www.baidu.com">百度一下</a>
22         <div>我是div1</div>   <!--这个是一般的块级标签，会上下分行-->
23         <div>我是div2</div>
24     </body>
25 </html>

HTML常用标签

3.将块级标签转换为行内标签

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>块级标签转行内标签</title>
 5         <style type="text/css">
 6             div{
 7                 width: 100px;
 8                 height: 100px;
 9                 background-color: red;
10                 display: inline;
11             }
12         </style>
13     </head>
14     <body>
15          <div>谷歌</div>  <!--按道理div是块级可以设置长和宽当通过display: inline;它已            经是行内标签了，所以长和宽失效-->
16          <div>https://www.google.com</div>
17     </body>
18 </html>

HTML常用标签