前端_HTML_02:HTML入门

一、什么是HTML

在这里插入图片描述

  • HTML 是用来描述网页的一种语言
  • HTML 指的是 超文本标记语言:HyperText Markup Language
    1. 超文本:比普通文本更牛逼的文本,不仅仅可以展示文字,还可以展示各种媒体内容

    2. 一般由前端工作人员来完成,后台研发人员不需要编写

    3. 标记:(标签/元素/标记)
      ——标记通常被称为 HTML 标签 (HTML tag)。

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

    4. HTML 作用:通过使用 HTML 的各种标签,然后生成一个 HTML文件,这个文件可以被浏览器解析,浏览器内部有一个专门的HTML的解析器,解析后我们就可以看到炫酷的页面。(编写网页的超文本标记语言)

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

二、HTML的标准结构

  • 代码

    <html><!--根标签-->
    	<head><!--头标签-->
    		<meta charset="utf-8">
    		<title>head是头标签</title>
    	</head>
    	<body><!--体标签-->
    		<h1>body是体标签</h1>
    	</body>
    </html>
    
    • <html>是根标签,最外层的标签 ,所有其他的标签都放入该标签中
      ——<html>根标签有两个一级子标签,分别是<head> <body>
    • <head>中一般放的是不显示在网页上 但是又比较重要的信息
    • <body>中一般放的是显示在页面上的内容

  • 效果
    在这里插入图片描述


三、HTML基本结构

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

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

      • 下面这些标签可用在 head 部分:
        <title>——标题

        1. title 可以定义文档的标题
        2. 它显示在浏览器窗口的标题栏或状态栏上。
        3. title写和你网页相关的关键词有利于SEO优化
          ——SEO是搜索引擎优化的英文缩写。通过对网站内容调整,满足搜索引擎的排名需求,从而提高自己网站被搜索引擎平台录取的几率,从而把精准用户带到网站。

        <meta>——标签的优化,元信息标签

        • 文档的头部经常会包含一些 标签,用来告诉浏览器关于文档的附加信息。
        • meta 标签用来描述一个HTML网页文档的属性,此处的charset="utf-8"是说当前使用的是utf-8编码格式,在开发中我们经常会看到utf-8,或是gbk,这些都是编码格式。国外一般会用gbk、gb2312,国内通常使用utf-8。
        • 元素可提供有关页面的元信息(meta-information),用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。
        • 常见的 meta 标签属性:
        1. charset属性 定义当前页面的字符集 告诉浏览器以什么字符集解析当前页面
        2. name属性 一般用于定义当前网页的一些简单描述 便于在搜索引擎上根据描述搜索到当前网页
          1. Keywords(关键字) keywords用来告诉搜索引擎你网页的关键字是什么。
          2. description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。
          3. author作者 标注网页的作者
        3. content属性 上述name属性元素的内容

        <link>——链接(引入外部CSS样式文件)
        <style>——样式、风格、款式
        <script>——脚本(引入脚本语言文件)

      • 示例:
        <!DOCTYPE html>
        <html>	
        	<head>
        		<!-- title 标题标签,定义显示在网页左上角的标题 -->
        		<title>耳东Dr.园</title>
        		<!-- 
        		meta  一般定义一些当前网页的特殊属性
        		通过meta标签的属性定义当前网页页面的特征
        		
        		meta标签常见的属性:
        			charset属性  定义当前页面的字符集,告诉浏览器以什么字符集解析当前页面
        			name属性	 一般用于定义当前网页的一些简单描述,便于在搜索引擎上根据描述搜索到当前网页
        				keywords————关键字
        				author————作者
        				description————描述,一段陈述文字,描述当前网页
        		-->
        		<meta charset="UTF-8"/>
        		<meta name="author" content="耳东Dr."/>
        		<meta name="keywords" content="耳东,博士,家园"/>
        		<meta name="description" content="这是耳东Dr.的网页,家园,创造基地,未来可期"/>
        		<!-- refresh——刷新,在5秒后,刷新到百度网页 -->
        		<!-- <meta http-equiv="refresh" content="5,https://www.baidu.com" /> -->
        		
        		<!-- 
        			link 学习CSS样式的,引入外部CSS样式文件
        			script 学习JS脚本语言,引入脚本语言文件
        		 -->
        		 <link />
        		 <script></script>
        		 
        	</head>
        
        	<body bgcolor="aquamarine">
        		<!-- 注释,Ctrl+Shift+/ -->
        		<h2 align="center">耳东Dr.</h2>
        		
        		
        	</body>
        </html>
        
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值