HTML基础与样式-优快云博客

本文链接：https://blog.youkuaiyun.com/Blog751196085/article/details/60874732

本文介绍了HTML的基本概念，包括标签的使用、语法结构及其与CSS样式的结合应用。通过实例展示了如何为HTML文档添加样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML的介绍和标签的认识

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

练习:为Hello World添加样式

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Html和CSS的关系</title>
        <style type="text/css">
        h1{
            font-size:12px;
            color:#930;
            text-align:center;
        }
        </style>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

认识Html标签

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>认识html标签</title>
        <style type="text/css">
        img{
            border-radius:100px;
            box-shadow:2px 2px 8px;
            }
        </style>
    </head>
    <body>
        <h1>勇气</h1>
        <p>三年级时，我还是一个胆小如鼠的小女孩。</p>
        <p>到了三年级下学期。</p>
        <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
    </body>
</html>

勇气是网页内容文章的标题,<h1></h1>就是标题标签，<p></p>是段落标签。图片由 img 标签来完成，网页上写成<img src = "图片点击">

标签的语法

1.标签由英文尖括号< 和 > 括起来，如 <html> 就是一个标签。

2.html中的标签一般都是成对出现的，分开始标签和结束标签，开始标签比结束标签多了一个 /。

（1） <p></p>
（2） <div></div>
（3） <span></span>

3.标签与标签之间是可以嵌套的,但是先后顺序必须保持一致，如：<div>里嵌套<p>，那么</p>必须放在</div>的前面。

<html>根标签   
    <head>...</head>头部标签
    <body>...</body>内容标签
</html>根标签

<html></html> 成为根标签，所有的网页标签都在 <html></html> 中。
<head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、<meta>等标签, 头部元素在下一节中会有详细介绍。
3.在 <body> 和 </body> 标签之间的内容是网页的主要内容, 如 <h1>、<p>、<a>、<img> 等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

head标签

 <head>
        <title>...</title>
        <meta>
        <link>
        <style>...</style>
        <script>...</script>
        </head>

<title>标签-定义了HTML文档的标题

<base>标签 - 定义了所有链接的URL 。

<meta>标签 - 提供了HTML文档的meta标记

HTML `<Head>` 元素

<head> 元素包含了所有的头部标签元素。在元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

<html></html>成为根标签，所有的网页标签都在<html></html>中。
<head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有 <title>、<script>、<style>、<link>、<meta>
在 <body> 和 </body> 标签之间的内容是网页的主要内容, 如 <h1>、<p>、<a>、<img> 等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

HTML `<title>` 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必须的。

<title> 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

HTML `<base>` 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

HTML `<link>` 元素

<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML `<style>` 元素

<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML `<script>` 元素

<script>标签用于加载脚本文件，如： JavaScript。

<script> 元素在以下章节会详细描述。

Html介绍

HTML的介绍和标签的认识

head标签

HTML <Head> 元素

HTML <title> 元素

HTML <base> 元素

HTML <link> 元素

HTML <style> 元素

HTML <script> 元素