html的基础元素、各种标签

最新推荐文章于 2025-04-11 19:27:13 发布

Hello YDL

最新推荐文章于 2025-04-11 19:27:13 发布

阅读量147

点赞数

分类专栏： html5+css 文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/ydl1128/article/details/126468692

版权

html5+css 专栏收录该内容

2 篇文章

订阅专栏

HTML 简介

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落</p>
 
</body>
</html>

元素解释:

声明为 HTML5 文档元素是 HTML 页面的根元素元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。元素描述了文档的标题元素包含了可见的页面内容 <h1> 元素定义一个大标题 <p> 元素定义一个段落 </p></h1>

元素：

标签元素

元素定义了整个 HTML 文档。

标签元素

元素定义了 HTML 文档的主体。

-

标签元素

从1-6大小依次递减

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

标签元素

声明一个段落

 <!--style设置样式-->
 <p style="color:red;" >哈哈哈哈</p>

标签元素

定义水平线

 <p style="color:red;" >哈哈哈哈</p><hr>
  <p style="color:red;" >哈哈哈哈2</p>

标签元素

换行

文本格式化标签元素

标签	描述
b	定义粗体文本
em	定义着重文字
i	定义斜体字
small	定义小号字
strong	定义加重语气
sub	定义下标字
sup	定义上标字
ins	定义插入字
del	定义删除字

标签元素

src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics7.baidu.com%2Ffeed%2F2cf5e0fe9925bc31a19293177f1058bbc9137048.jpeg%3Ftoken%3D92e90a207b6a41c3ea25055686f26d32&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1661274000&t=e0ada1a2a7ec9d4626ed370549f3ef84" alt="new" width="304" height="228">

标签元素

HTML 链接是通过标签来定义的。

<a href="https://www.baidu.com">百度一下</a>

a 元素的属性：

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

a标签的锚点链接

	 <a href="#ti">跳转到标题</a>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <h1 id="ti">我是标题</h1>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>
    <p>我是内容</p>

a元素和img元素结合

<a href="www.baidu.com">
        <img src="">
    </a>

span标签元素

用于对文档中的行内元素进行组合。一般是对普通文本进行操作

      <span class="haha" style="color: blue; font-size: 30px;"> 
   		<p>哈哈哈哈2</p>
    	<p>哈哈哈哈2</p>
    	<p>哈哈哈哈2</p>
    </span>

div标签元素

实现对一块内容元素的样式变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lightly-HTML-Project</title>
    <style>
        .box1{
            float: left;
        }
        .box2{
            float: right;
        }
    </style>
</head>
<body>
    <div class="box1">
        <h1>sssss</h1>
        <p>xixixi2</p>
    </div>

     <div class="box2">
        <h3>dddd</h1>
        <p>呵呵呵</p>
    </div>
</body>
</html>