您的位置:首页 > Web前端

前端简单入门第一讲 HTML基础概念

2018-12-29 22:14 633 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yerenyuan_pku/article/details/85345779

HTML概述

HTML(Hyper Text Markup Language)是一种超文本标记语言。

  • 超文本比普通文本功能更加强大,它可以添加各种样式;
  • 标记语言是通过一组标签来对内容进行描述的,更通俗点理解,一大段文本内容,毫无重点,毫无结构,让人不好理解。所以,HTML就通过大伙约定俗成的规范,利用一些标签来指明,这一段文本是标题,这一段文本是个表格,这一段文本是个列表,这一段文本是导航菜单,这里需要分段,这里需要分行,这几个词是关键词,需要重点标记一下等等等等。每一份HTML文档都是由浏览器来解释执行的。

HTML标签的基本概念

<a class="ddd" href="index.html">点击跳转</a>
  • 标签:
    <>
    带有这种符号的称为标签,一般分开始标签和结束标签。标签不区分大小写,官方建议使用小写;
  • 内容:即文本内容,如上述的点击跳转四字;
  • 属性:每个标签有自己的一些属性,另外,HTML有一些全局属性,比如上述的class,这个属性所有标签都可以用;
  • 元素:标签 + 内容。

HTML的主要作用

HTML是设计网页的基础,它主要表示某个标签在页面中是什么角色。通俗的讲,HTML只负责文档的语义和结构,它描述了网页的内容和结构。

HTML的文档结构

我们可以使用HBuilder IDE编辑器来编写代码,下面的HTML文档就是用该编辑器来编写的。

<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>前端简单入门——HTML</title>
</head>
<body>
Hello World!这是前端简单入门第一讲——HTML
</body>
</html>

从上面的HTML文档中可以知道HTML大体上的文档结构如下:

以上这些标签用途基本就是用于构建一份基本的HTML文档,下面我再来具体介绍。

<!DOCTYPE>

准确的说,

<!DOCTYPE>
并不是HTML标签,它是声明web浏览器关于页面使用哪个HTML版本进行编写的指令。
在HTML 4.01中,
<!DOCTYPE>
声明引用DTD,因为HTML 4.01基于SGML。DTD规定了标记语言的规则,这样浏览器才能正确地呈现内容。HTML5不基于SGML,所以不需要引用DTD。

  • H5中用法:

    <!DOCTYPE html>
  • HTML 4.01中用法:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

每一份HTML文档内容的根节点,表示文档内容的开始。文档内容包括两部分:

  1. 头部声明
    <head>
  2. 文本内容
    <body>

<head>

HTML文档的头部声明,用于声明该文档的一些属性以及一些元数据,

<head>
内部的内容是用于给浏览器看的,并不是用于给用户看的,浏览器通过
<head>
内的信息,知晓这份文档引用了哪些外部资源文件,使用了哪些属性。可在
<head>
中使用的标签并不多:

<head>
<meta charset="UTF-8">             		  <!--声明文档所使用的编码-->
<title>前端简单入门——HTML</title>      	  <!--声明文档的标题-->
<base href="http://www.baidu.com" />	  <!--声明文档全局的基准URL-->
<style type="text/css"></style>           <!--声明内嵌类型的css样式-->
<link rel="stylesheet" href="cart.css" /> <!--引用外部css文件-->
<script></script>                         <!--JavaScript脚本-->
<noscript></noscript>                     <!--浏览器不支持JavaScript情况下的处理-->
</head>

<meta>

元数据标签,可用于声明文档所使用的一些元数据,用途蛮多,如下:

<meta charset="UTF-8">             		  		<!--声明文档所使用的编码-->
<meta http-equiv="refresh" content="5" /> 		<!--往http头部中增加key-value-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<link>

<link>
标签用于指定HTML文档使用了哪些外部资源文件,可以是外部的CSS文件,或者网页图标,或者说明文档等等,如下:

<link rel="stylesheet" href="cart.css" /> 							<!--引用外部css文件-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <!--引用外部网页图标-->
<link rel="prefetch" href="/readme.html" />                         <!--预先加载readme.html文件-->

<body>

<body>
标签用于声明文本内容,该标签内的内容都是用于展示给用户看的,所以基本所有标签都可以在
<body>
内,浏览器解析相应的标签,并根据CSS作用到每个对象上,生成网页呈现给用户。

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: