阅读目录

一、 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>中。

#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. HTML标签不区分大小写,`<h1>`和`<H1>`是一样的,但是我们通常建议使用小写,大部分程序员都以小写为准。

#2. 标签之间是可以嵌套的。例如:<div><p>段落</p></div>,但不能交叉<div><p></div></p>

#3、不是所有标签都支持互相嵌套。 

三、 HTML中标签分类

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

#1、容器类标签
容器类标签可以简单的理解为能嵌套其它所有标签的标签。
常见容器级的标签:
h系列
ul>li
ol>li
dl>dt+dd
div #2、文本类标签
文本级的标签对应容器级标签,只能嵌套文字/图片/超链接的标签。
常见文本级的标签:
p
span
strong
em
ins
del

四、 HTML注释

无论我们学习什么编程语言,一定要重视的就是注释,我个人一直把注释看成是代码之母。 HTML中注释的格式:

<!--这里是注释的内容-->

注意: 注释中可以直接使用回车换行。

并且我们习惯用注释的标签把HTML代码包裹起来。如:

<!-- xx部分 开始 -->
这里放你xx部分的HTML代码
<!-- xx部分 结束 -->

HTML注释的注意事项:

#1、HTML注释不支持嵌套。
#2、HTML注释不能写在HTML标签中。

前端基础-HTML标记语言的更多相关文章

  1. Java学习-033-JavaWeb_002 -- 网页标记语言JSP基础知识

    JSP 是 Sun 公司提倡的一门网页技术标准.在 HTML 文件中,加入 Java 代码就构成了 JSP 网页,当 Web 服务器访问 JSP 请求的时候,首先执行其中的 Java 程序源码,然后以 ...

  2. Html就是超文本标记语言的简写,是最基础的网页语言

    Html就是超文本标记语言的简写,是最基础的网页语言. Html是通过标签来定义的语言,代码都是由标签所组成. Html代码不用区分大小写. Html代码由<html>开始</htm ...

  3. 关于XML(可扩展标记语言)的基础知识与写法------2017-05-18

    XML(Extensible Markup Language) HTML:超文本标记语言,主要用来展示   XML:可扩展标记语言,用来做数据传输XML特点: 1.树状结构,有且只有一个根 2.标签名 ...

  4. 关于XML(可扩展标记语言)的基础知识与写法

    XML(Extensible Markup Language) HTML:超文本标记语言,主要用来展示   XML:可扩展标记语言,用来做数据传输XML特点:1.树状结构,有且只有一个根2.标签名自定 ...

  5. web前端基础知识-(八)Ajax

    Ajax即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,AJAX = 异步 Ja ...

  6. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  7. HTML+DIV+CSS+JSweb前端基础

    HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2 ...

  8. 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...

  9. 前端基础:HTML标签(上)

    前端基础:THML HTML初始 1.web服务本质 import socket sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) so ...

随机推荐

  1. [Book Content]Python进阶

    python进阶 原书内容https://github.com/eastlakeside/interpy-zh 通过记录书本目录和大概内容做一个记录,方便以后回顾检索. Chapter Title B ...

  2. Flex UI刷新后保持DataGrid中的ScrollBar的位置不变

    这是之前我发的一个贴子问题描述:http://q.cnblogs.com/q/53469/

  3. 【STSRM13】花六游鸟小

    [题意]给定n个节点的树,每个节点有一个m位二进制数,数字可以随时按位取反,每个数位有一个价值,定义每个点的最大价值是从根到这个点路上的数字(可以取反)或起来的数字中,1有价值0无价值,加起来得到的最 ...

  4. bzoj 2662&bzoj 2763 SPFA变形

    我们用dis[i,j]代表到i这个点,用j张票的最短路程,那么我们只需要在SPFA更新 的时候,用dis[i,j]更新dis[p,j]和dis[p,j+1]就行了 /***************** ...

  5. bzoj 1009 DP+矩阵加速

    我们用DP来解决这个问题 W[I,J]表示准考证的第I位,和不吉利的数匹配到了第J位的方案数,这个状态的表示也可以看成 当前到第I位了,准考证的后J位是不吉利的数的前J位,的方案数 那么我们最后的an ...

  6. git web 服务器的搭建【转】

    转自:http://blog.csdn.net/transformer_han/article/details/6450200 目录(?)[-] git服务器搭建过程 需求 硬件需求一台Ubuntu或 ...

  7. jQuery-niceScroll使用中父子div都存在滚动条导致错位的问题

    1.做项目时因为客户要求改变了项目的整体样式,所以导致浏览器自带的滚动条样式与项目的样式风格格格不入,所以要使用一个滚动条插件来替换浏览器自带的滚动条,我在网上搜了下,发现niceScroll这个滚动 ...

  8. JDK+Tomcat+MySql环境配置—linux

    Yum安装和jsp安装环境搭建 Yum安装手册: 第一步:在root用户下解压Yum安装包 ,输入命令: unzip yum.zip.

  9. Delphi Socket通信及多线程编程总结

    http://cxhblog.blog.sohu.com/41930676.html 一.Socket通信: Delphi在ScktComp单元中对WinSock进行了封装,该单元提供了TAbstra ...

  10. EA(Enterprise Architect) UML 建模之活动图

    一.活动图的概念作用 活动图本质上是一种流程图,它描述活动的序列,即系统从一个活动到另一个活动的控制流. 活动图的作用:描述用例  .   描述类的操作.描述算法(单独使用) 二. 活动图的基本符号 ...