web前端基础（HTML）

一、web基础知识

网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript；

1）HTML是什么？

HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言

2）CSS

CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。

3）JavaScript

JavaScript是一门脚本语言。

HTML、CSS和JavaScript的区别我们都知道前端技术最核心的是HTML、CSS和JavaScript这三种。但是这三者究竟是干嘛的呢？

“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为

如果我们把前端开发的过程比喻成“建房子”，做一个网页就像盖一栋房子

1、先把房子结构建好（HTML）

2、建好房子之后给房子装修（CSS），例如往窗户安上窗帘、往地板铺上漂亮的瓷砖

3、最后呢，装修完了之后，当夜幕降临的时候，我们要开灯（JavaScript），这样才能看得见里面。

二、 HTML简介（超文本标记语言）

“超文本”指的是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本，

标记”指的是在编辑文本时用特殊的记号标记一下各部分内容的意义，该记号称之为标签，比如用标签h1标记标题，用标签p标签段落，如此我们标记一首唐诗就成了如下格式；

<h1>鹅鹅鹅</h1>
<p>鹅鹅鹅</p>
<p>曲项向天歌</p>
<p>白毛浮绿水</p>
<p>红掌拨清波</p>
这样浏览器在接收到文本内容后，就可以按照事先规定好的记号去显示各部分的内容.在网页显示如下：

超文本标记语言（第一版）：在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准），后来陆续由w3c制定标准

#IETF简介
IETF是英文Internet Engineering Task Force的缩写, 翻译过来就是"互联网工程任务组"
IETF负责定义并管理因特网技术的所有方面。包括用于数据传输的IP协议、让域名与IP地址匹配的域名系统（DNS）、用于发送邮件的简单邮件传输协议（SMTP）等

#W3C简介
W3C是英文World Wide Web Consortium的缩写， 翻译过来就是W3C理事会或万维网联盟, W3C是全球互联网最具权威的技术标准化组织.
W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee
W3C负责web方面标准的制定，像HTML、XHTML、CSS、XML的标准就是由W3C来定制的。 
Tim Berners-Lee（蒂姆·伯纳斯-李），万维网之父、html设计者、w3c创始人

三、HTML标签与文档结构

一个网页可以没有样式，可以没有交互，但是必须要有网页需要呈现的内容，而HTML作为一门标记语言，是通过各种各样的标签来标记网页内容的，所以HTML部分是整个前端的基础，我们学习HTML主要就是学习的HTML标签。

那什么是标签呢？

#1、在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如`<html>`、`<head>`、`<body>`都是标签，

#2. HTML中标签通常情况下是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个`/`，开始标签和结束标签之间的就是标签的内容。

#3、有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭和标签，例如:<br/> <hr/> <input/> <img/>

HTML中的标签存放于文本文件中，需要按照下述固定的文档结构组织：

<!DOCTYPE HTML>
<html>
    <head>...</head>
    <body>...</body>
</html>

各部分解释

#1、<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。

#2、<html></html> 称为根标签，所有的网页标签都在<html></html>中。
    HTML的lang属性可用于网页或部分网页的语言。通常用于搜索引擎和浏览器     
    的统计分析,不定义也没什么影响
    根据 W3C 推荐标准，您应该通过 <html> 标签中的 lang 属性对每张页面    
    中的主要语言进行声明，比如：
    <html lang="en"></html>

#3、<head></head> 标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签，头部标签在下一节中会有详细介绍，<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。

#4、在<body>和</body>标签之间的内容是网页的主要内容，最终会在浏览器中显示出来。

标签间关系

#1、并列（兄弟／平级）
    head与body
#2、嵌套（父子／上下级）
    html内有body

HTML标签详细语法与注意点

标签的语法：

<标签名 属性1=“值1” 属性2=“值2” ......>内容部分</标签名>
<标签名 属性1=“值1” 属性2=“值2” ....../>

标签注意事项!!!

#1、记号/标签是不会显示出来的。
#2、标签只是用来做记号而不负责控制样式：虽然用<h1>标记的文本在显示时会被加大加粗，但请务必记住，HTML的作用只有一个它是专门用来对文件做记号来标识其语义的（语义指的是该文本是做什么用的），加大和加粗这种为文本添加样式的操作并不是HTML擅长的，虽然早期的时候确实也用HTML来制作样式，但以后我们专门用CSS来做这件事，这也是一种解耦合的思想
#3. HTML标签不区分大小写，`<h1>`和`<H1>`是一样的，但是我们通常建议使用小写，大部分程序员都以小写为准。
#4. HTML中有部分标签是可以嵌套的。例如：<div><p>段落</p></div>,但不能交叉<div><p></div></p>

四、HTML中标签分类

单从是否可以嵌套子标签的角度去分，标签分为两类

#1、容器类标签
    容器类标签可以简单的理解为能嵌套其它所有标签的标签。
    常见容器级的标签: 
    h系列 
    ul>li
    ol>li
    dl>dt+dd
    div

#2、文本类标签
    文本级的标签对应容器级标签，只能嵌套文字/图片/超链接的标签。
    常见文本级的标签:
    p
    span
    strong
    em
    ins
    del

posted @ 2021-03-02 20:03 yzmxcj 阅读(478) 评论(0) 收藏举报

刷新页面返回顶部

web前端基础（HTML）

一、web基础知识

二、 HTML简介（超文本标记语言）

三、HTML标签与文档结构

四、HTML中标签分类

公告