html学习1

木有童年

已于 2023-07-28 15:05:14 修改

阅读量104

点赞数

分类专栏： HTML学习文章标签： html 前端

于 2023-07-28 14:42:47 首次发布

本文链接：https://blog.csdn.net/Natuly/article/details/131963920

版权

HTML学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了HTML的基本结构和元素，包括DOCTYPE的作用、字符编码的设定、HTML元素的定义和属性的使用，如class、id和href。此外，还提到了标题标签h1-h6、段落、换行、链接以及样式设置等概念。

摘要由CSDN通过智能技术生成

1、<!DOCTYPE html>用来告知 Web 浏览器页面使用了哪种 HTML 版本。

2、对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。

3、html的结构图，<body> </body>之间的部分可以显示。

4、HTML元素

html元素以开始标签开始，以结束标签结束。
元素的内容都是开始标签与结束标签之间的内容。
某些元素具有空内容，没有内容的html元素称为空元素，空元素在开始标签中进行关闭。
在开始标签中加入/，是关闭空元素的正确方法。
html元素可拥有属性。
html标签对大小写不敏感，推荐使用小写。

5、html属性

html元素可通过属性添加附加信息
属性一般放在开始标签
属性以key-value的形式出现。name=“abc”
html链接用<a>标签表示，用href属性表示链接地址。
<a href="http://www.google.com"> 谷歌</a>

6、常用属性

class 为元素定义一个或多个类名，类名从样式文件中引入，可以多个
id定义元素的唯一id
style规定元素的唯一样式
title描述元素的额外信息

7、html标签

标题通过h1-h6标签设置
<hr>用来设置水平线
段落用<p>定义，浏览器会自动的在段落前后添加空行
在段落内换行用<br/>，在不用自封闭的元素后加 / 来表示自行封闭，以保障兼容性。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。
<pre>用来按预览的格式来显示

8、html<head>元素

<head>元素包含了所有的头部标签元素。
在头部区域可以添加的标签元素为：<titile>、<style>、<meta>、<link>、<script>、<noscript>、<base>
<title> 元素：定义了浏览器工具栏的标题、当网页添加到收藏夹时，显示在收藏夹中的标题、显示在搜索引擎结果页面的标题
<base>标签定义了html文件的基准链接，一个html文档只能有一个基准链接。
<link>定义了文档与外部资源的联系，通常用于链接到样式表。
<style>标签定义了html文档的样式文件引用地址，也可以在其中直接添加样式来渲染html文件。
<meta>元素用于指定网页的描述、关键词、文件的最后修改时间、作者等。
<header>标签用于定义文档的页眉，注意与<head>的区别。

<!DOCTYPE html><!--声明为HTML5文档-->
<html>
    <head>
        <meta charset="utf-8"><!--定义网页编码格式为UTF-8以支持中文-->
        <meta name="author" content="PHP"><!--定义网页的作者为PHP-->

        <title>团看ztkdemo.com</title><!--页面标题以显示在浏览器上部-->
        <style type="text/css">
            body{
                background-color: yellowgreen;
            }
            p{
                color: red;
            }
        </style>
    </head>
    <body>
        <header>文档的页眉
            <h1>页眉里嵌套的标题1</h1>
            <p>页眉里的段落</p>
        </header>
        <h1>我的第一个标题</h1><!--h1-h6为标题，共6级-->
        <h5>h5级标题</h5>
        <p>我的第一个段落<br/>要换行了</p><!--段落-->
        <b>粗体</b>
        <i>斜体<br/></i>
        这是<sub>下标漂移</sub>
        这是<sup>上标</sup>
        <strong>高亮显示，与标题不同<br/></strong>
        <a href="index" target="_blank">团看</a><!--定义链接，在href属性中指定链接的地址-->
        <pre>原封不动的输出
             空格    也能显示
             换行也能显示
        </pre>
    </body>
</html>