HTML初步学习

1.什么是HTML

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language

  1. 超文本:比普通文本更牛逼的文本 不仅仅可以展示文字 可以展示各种媒体内容
  2. 一般由前端工作人员来完成,后台研发人员不需要编写
  3. 标记:(标签/元素/标记)

标记通常被称为 HTML 标签 (HTML tag)

  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • 封闭类型标记(也叫双标记),必须成对出现,<p></p>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
  • 非封闭类型标记,也叫作空标记,或者单标记,如<br/>

总结:我们学习HTML就是学习各种各样的标签,可以达到比普通文本更厉害的功能。那么后续浏览器可以对html文件做解析,就可以在浏览器上展示好看的效果 。

2. HTML的作用

通过使用HTML的各种标签,然后生成一个HTML文件,这个文件可以被浏览器解析,浏览器内部有一个专门的HTML的解析器,解析后我们就可以看到炫酷的页面。

3. HTML的标准结构

<html>

    <head>         

    </head>

    <body>

        这是我第一个HTML页面,这就是最基本的结构

    </body>

</html>

根标签 html  最外层的标签  所有其他的标签都放入该标签中

html根标签有两个一级子标签  分别是head  body

head中一般放的是不显示在网页上 但是又比较重要的信息

body中一般放的是显示在页面上的内容

4.HTML标签

定义 HTML 文档,这个元素我们浏览器看到后就明白这是个HTML文档了,所以你的其它元素要包裹在它里面,标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。

<html>

        <head></head>

        <body></body>

</html>

5.head标签

Head标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分:

<title>、<meta>、<link>、<style>、 <script>

注意:应该把 <head> 标签放在文档的开始处,紧跟在 <html> 后面,并处于 <body> 标签之前。文档的头部经常会包含一些 <meta> 标签,用来告诉浏览器关于文档的附加信息。

① title标签

1.可定义网页的标题。

2.它显示在浏览器窗口的标题栏或状态栏上。

3.title写和你网页相关的关键词有利于SEO优化

<html>

        <head>

                 <title>这是一个显示在网页左上角的标题</title>

        </head>

        <body>...</body>

</html>  

SEO是搜索引擎优化的英文缩写。通过对网站内容调整,满足搜索引擎的排名需求,从而提高自己网站被搜索引擎平台录取的几率,从而把精准用户带到网站。

网站都有目标群体,通过title、meta标签可以让目标群体通过关键词找到你的网站,所以你定义的关键词决定了会吸引什么样的群体。

② meta标签

META标签用来描述一个HTML网页文档的属性,通过meta标签的属性定义页面的属性。

<标签名 属性一=" " 属性二=" "></标签名>

元素可提供有关页面的元信息(meta-information),用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。

常见的meta属性有:

charset属性  定义当前页面的字符集,告诉浏览器用什么样的字符集解析当前页面。

        HTML5中的写法<meta charset="utf-8"/>

        4.01版本写法<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

注意:此处的charset=”utf-8”是说当前使用的是utf-8编码格式,在开发中我们经常会看到utf-8,或是gbk,这些都是编码格式。国外一般会用gbk、gb2312,国内通常使用utf-8,一般乱码出现是由于用于解析的字符集不同所造成的。

Keywords(关键字) keywords用来告诉搜索引擎你网页的关键字是什么。

<meta name="keywords" content="在搜索引擎中被搜索的关键字">

description(网站内容描述)  description用来告诉搜索引擎你的网站的主要内容。

<meta name="description" content="网站主要描述内容">

author作者   标注网页的作者。

<meta name="author" content="作者名">

页面自动刷新/跳转    在**秒后对页面进行刷新。

<meta http-equiv="refresh" content="需要刷新等待的秒数;刷新后的网址>

6.注释

啥是注释:给人看的提示,不显示出来的内容,不执行的代码。
设置注释:选中文字 ,按  " ctrl +shift + / "  注释/取消注释。

7.我的主要练习代码: 

<html>

    <head>


        <title>第一个小网页</title>
      

         <meta charset="utf-8"/>
        <meta name="keywords" content="帅哥,大帅逼,天下第一"/>
        <meta name="author" content="没有昵称"/>
        <meta name="description" content="这是我练习使用瞎写的网页"/>
    
        <!--在5秒后对页面进行刷新,跳转到百度-->
        <meta http-equiv="refresh" content="5;http://www.baidu.com"/>
  
    </head>
    
     <!--
        有些标签也有属性,属性并不是所有标签都可以使用,有的标签具有特殊属性,有的属性只能让特定标签使用,比如体标签的背景颜色
    -->
    <body bgcolor="aqua">
        这是一个简陋的网页,它将在五秒后跳转。
    </body>
</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值