其他分享
首页 > 其他分享> > 初出茅庐——自学HTML(一)

初出茅庐——自学HTML(一)

作者:互联网

心血来潮,突然想学习前端技术,之前一直在做应用程序设计和嵌入式软件开发;

于是上网搜索教程,发现看不下去;

寻寻觅觅,蓦然回首,那人却在灯火阑珊处;偶然之间发现哔哩哔哩网站上资源挺多的;于是在上面搜索听了一下,发现绝对适合我这个在前端完全小白的新手;

偶怕跟着学习过后,又是一个从入门到放弃的一条不归路,因此把学习的内容记录下来;一是把老师讲的记录一遍,加深印象;二是也把课堂笔记做个归档;

 

言归正传:

先说一下一个html文档的结构;

其中<!DOCTYPE html>指定这里使用的是HTML5

整个网页是在<html></html>中的;

其中主要的内容分为<title></title>和<body></body>两部分;

title是不显示在网页内容里的;

body才是网页中显示的内容;

 

<!-- -->这是HTML语言中的注释部分;

<!-- 
        在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格

        在HTML中有些时候,我们不能直接书写一些特殊符号
            比如:多个连续的空格,比如字母两侧的大于和小于号

        如果我们需要在网页中书写这些特殊的符号,则需要使用html中的实体(转义字符)
        实体的语法:
            &实体的名字;
                &nbsp; 空格
                &gt; 大于号
                &lt; 小于号
                &copy; 版权符号


     -->

例子:一个简单的网页文件: 

<!DOCTYPE html>
<html lang = "zh_cn">
    <head>
        <meta charset = "UTF-8">
        <title>实体</title>
    </head>

    <!-- 这里是注释-->
    <body>
        <p>
            需要显示在&nbsp;&nbsp;浏览器中的内容;
        </p>

        <p>
            a&lt;b&gt;c
            &copy;
        </p>

    </body>
</html>

其中在<head>中还有一个是关键字是meta

比如:

<meta charset="UTF-8">

其中的meta不是给用户看的:meta主要用于设置网页中的一些元数据,元数据不是给用户看,并且包含一些关键字:

    ——charset 指定网页的字符集
    —— name 指定的数据的名称
    —— content 指定的数据的内容

    ——keywords 表示网站的关键字,可以同时指定多个关键字,关键字间使用,隔开;

    ——description 用于指定网站的描述

    ——http-equiv 将页面重定向到另一个网站

 

比如:

<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
<meta name="keywords" content="网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon">

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!"/>

 

说明:

                网站的描述会显示在搜索引擎的搜索的结果中

                title标签的内容会作为搜索结果的超链接上的文字显示


  <meta http-equiv="refresh" content="3;url=https://www.baidu.com"> 

        标识3秒后,网页刷新,将自动转到百度网页
       
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
     <meta name="keywords" content="HTML5,前端,CSS3">
     <meta name="description" content="这是一个非常不错的网站">
    
    <!-- <meta http-equiv="refresh" content="3;url=https://www.baidu.com"> -->
    <title>Document</title>

</head>
<body>
    
</body>
</html>

 

标签:网页,网站,指定,关键字,初出茅庐,HTML,meta,内容,自学
来源: https://blog.csdn.net/bxlover007/article/details/117075218