day001——HTML初接触

最新推荐文章于 2025-12-02 22:10:11 发布

原创最新推荐文章于 2025-12-02 22:10:11 发布 · 151 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html

前端学习专栏收录该内容

7 篇文章

订阅专栏

本文介绍了HTML，它是超文本标记语言，用于描述网页内容。还阐述了静态与动态网页区别，列举了解释执行HTML的浏览器及其内核。此外，介绍了常用IDE，如Hbuilder等，最后详细说明了HTML常用标签，像div、hx、p等的功能。

1.HTML：超文本标记语言。（一种标示性语言，不是编程语言，是标记语言，不能使用逻辑运算。通过标签将文档格式进行统一，是分散网络资源连接为一个逻辑整体）

标记语言是一套标记标签 (markup tag)
HTML用标记标签来描述网页内容

2.静态网页和动态网页的区别：

静态：网页中没有程序代码，只有HTML（即：超文本标记语言），一般后缀为.html,.htm,或者.xml等。虽然静态网页的页面一旦做成，内容就不会再改变了。
动态：页面代码虽然没有变化，但是显示内容可以随着时间、环境或者数据库操作的结果而发生改变。

3.浏览器：解释和执行HTML源码的工具（IE、Firefox、Chrome、Opera、Safari）

4.内核：

IE浏览器内核：Trident内核，也是俗称的IE内核；
Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
Firefox浏览器内核：Gecko内核，俗称Firefox内核；
Safari浏览器内核：Webkit内核；
Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
360浏览器、猎豹浏览器内核：IE+Chrome双内核；
搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；

5.常用IDE：Hbuilder、Sublime test3、Visual Studio Code、WebStorm

1.HTML标签

<!DOCTYPE html><!--表申明的意思。表示下面文档标签将以html5规范去解析-->
<html>
<head xmlns:link="http://www.w3.org/1999/html">
<!--1.头部，主要用来完成一个网页的相关设置的。-->
    <meta charset="UTF-8"><!--汉字编码-->
    <!--meta：元，主要用来完成对应设置的-->
    <meta name="keywords" content=""><!--设置一个网站的搜索关键字-->
    <meta name="description" content=""><!--网站的描述内容-->
    <title>网页标题</title><!--标题-->
    <!--设置网站小图标-->
    <link rel="shortcut icon" href="https://static.runoob.com/images/icon/mobile-icon.png" type="image/x-icon">
    <style>
        /*书写样式的地方*/
    </style>
    <link rel="stylesheet" href="style.css"><!--用来引入外部样式文件-->
</head>

<!--2.主体部分-->
<body>
你好
<p>这是一个段落</p>
<script>
    //放脚本代码的地方
</script>
</body>
</html>

1.标签

div：层，用来布局，无具体含义
hx：标题，从一级到六级，自动加粗，有默认字号
p：段落
br：换行，单标签
hr：水平分界线，单标签
a：实现链接跳转。target属性值：

img：用来加载外部图片、图像。scr：用来设定加载的图片或图像的路径。art：当图片加载失败时的页面展示。title：鼠标悬停时提示内容
span：与div一样用来布局。不同点:div单独占据一行，而span不会.span用于行内布局，div用于块内布局
ul：无序列表；ol：有序列表。列表内容都是li标签
：快捷方式ctrl+/

<!doctype html><!--按!+tab或html:5+tab会自动生成文档结构-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div>
    <!--div：层，用来布局，无具体含义-->
    <!--hx：标题，从一级到六级，自动加粗，有默认字号-->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h6>六级标题</h6>
    <!--p：段落-->
    <!--br：换行符-->
    <p>10月份，规模以上工业增加值同比实际增长6.9％；前10月全国
        固定资产投资（不含农户）483292亿元，同比增长1.8％，增速比1—9月份提高1.0个百分点；
        前10月全国房地产开发投资116556亿元，<br>同比增长6.3％，增速比1—9月份提高0.7个百分点
        ；10月份，社会消费品零售</p>
    <p>总额38576亿元，同比增长4.3％，增速比上月加快1.0个百分点。</p>
    <!--hr：生成一条水平线，主要起装饰作用-->
    <hr>
    <hr width="80%" align="center" color="blue" height="2px">
    <a href="https://www.baidu.com/" title="百度" target="_blank">百度</a>
    <a href="https://www.baidu.com/" title="百度" target="_self">百度2</a>

    <!--img：用来加载外部图片、图像。scr：用来设定加载的图片或图像的路径。art：当图片加载失败时的页面展示-->
    <br>
    <img src="https://www.ruankao.org.cn/asset/image/public/logo.png" alt="" title="提示" />
    <img src="https://www.ruankao.org.cn/asset/image/public/l1ogo.png" alt="加载失败" />

    <!--span：与div一样用来布局。不同点:div单独占据一行，而span不会.span用于行内布局，div用于块内布局-->
    <div>div1</div>
    <div>div2</div>
    <span>span1</span>
    <span>span2</span>
    <!--ul：无序列表；ol：有序列表。列表内容都是li标签-->
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
    <ol>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ol>
    
</div>
</body>
</html>