HTML基础

最新推荐文章于 2022-11-14 16:39:29 发布

柯兴子

最新推荐文章于 2022-11-14 16:39:29 发布

阅读量168

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML基础 Python学习

本文链接：https://blog.youkuaiyun.com/weixin_42348718/article/details/87534303

Python学习同时被 2 个专栏收录

7 篇文章

订阅专栏

HTML基础

1 篇文章

订阅专栏

本文详细介绍了HTML的基本概念，包括HTML的定义、标记标签的使用、常见块级标签的应用，如标题、段落、图片、列表等，以及如何使用链接和特殊符号。

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

什么是HTML？
HTML是用来描述网页的一种语言。是一种超文本标记语言，而不是一种编程语言。标记语言即是一套标记标签，使用标记标签来描述网页。
HTML标记标签通常被称为HTML标签（元素），标签是由尖括号括起来的关键词，如，通常成对出现，包括开始（开放）标签和结束（闭合）标签。
HTML文档=网页，用HTML文档来描述网页。Web浏览器的作用是读取HTML文档，并以网页的形式显示出来，浏览器不会显示标签，而是使用标签来解释页面的内容。

一、常用标签之块级标签

1、标题标签

一般用在文章的标题，有h1-h6。

<!--h1一般只出现一次，类比文章的标题，h2-h6根据需要可出现多次-->
<!--ctrl+d快速复制一行-->
    <h1>今天是2019年2月17日</h1>
    <h2>今天是2019年2月17日</h2>
    <h3>今天是2019年2月17日</h3>
    <h4>今天是2019年2月17日</h4>
    <h5>今天是2019年2月17日</h5>
    <h6>今天是2019年2月17日</h6>
    <h1>
      标签套标签 <h2>今天是2019年2月17日</h2>
    </h1>

2、段落标签

会把HTML文档分割成若干段落

 <p>
        大家好，我叫柯兴子，是转行新手，写下此博客一方面为了做笔记，一方面也是为了有兴趣的童鞋一起讨论，2019年2月17日。
    </p>
   <h2>粗体标签</h2>
    <!--b标签只是物理加粗，strong还有色seo搜索功能-->
    <b>今天是2019年2月17日</b>
    <strong>今天是2019年2月17日</strong>

    <h2>斜体标签</h2>
 <!--i标签只是物理加粗，em还有色seo搜索功能,hr加下划线，br自动换行-->
    <i>今天是2019年2月17日</i><hr>
    <em>今天是2019年2月17日</em><br>

    <h2>a标签</h2>
    <a href="http://www.baidu.com" target="_blank">去百度</a><br>
    <a href="01-初识html.html">去html</a><br>
    <a href="#top">去上边那里</a><br>
    <!--只有拥有name属性的a标签才能实现锚点，其他标签要用id属性，id适合所有的标签-->

    <h2>特殊符号</h2>
    大于号：---&gt;<br>
    小于号：---&lt;<br>
    空格符号：---哈哈&nbsp;呵呵<br>
    空白符号：---哈哈&emsp;&emsp;&emsp;呵呵<br>
    版权符号：---&copy;<br>

3、图片标签

 <img src="https://res.shiguangkey.com/file/201811/05/20181105204605285105250.png" alt="" width="300" height="200">
    <img src="img/01.png" alt="">

4、列表标签

<h2>无序列表</h2>
    <!--ul>li{$}*4 tab-->
    <!--type
    disc 默认小黑圆点
    circle 空心圆
    square 小方框
    -->
    <ul>
        <li>哈哈</li>
        <li>哈哈</li>
        <li>哈哈</li>
        <li>哈哈</li>
    </ul>
    <h2>有序列表</h2>
    <ol>
        <li>呵呵</li>
        <li>呵呵</li>
        <li>呵呵</li>
        <li>呵呵</li>
    </ol>
    <h2>自定义列表</h2>
    <dl>
        <li>基础</li>
        <li>进阶</li>
        <li>爬虫</li>
        <li>项目</li>
    </dl>

5、div标签

用于分化一个一个的区域

在 <style>
        div{
            width:200px;
            height: 50px;
            background: red;
        }
        span{
            width:200px;
            height: 50px;
            background: blue;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <span>1</span>
    <span>2</span>这里插入代码片