目录

一、初识HTML

二、HTML的定义

三、HTML5

四、HTML整体结构

1、头部内容 :

1.1  元数据标签:

1.2   网页标题标签:

1.3  头部内容的其他标签

2、实体内容:

2.1  六个标题等级标签

2.2  换行标签:

2.3  段落标签:

2.4  字体标签:斜体,斜体

2.5  字体标签:加粗,加粗

2.6  字体标签:上标标签,下标标签


一、初识HTML

HTML(Hyper Text Markup Language)的全称为超文本标记语言,是一种标记语言。它包括一系列的标签。通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等

用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX,Windows等)。使用HTML,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件“翻译”成可以识别的信息,即我们所见到的网页。

二、HTML的定义

超文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。

三、HTML5

HTML5是公认的下一代Web语言,极大地提升了Web在富媒体、富内容和富应用等方面的能力,被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。

HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进,虽然技术人员在开发过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性,网站开发技术人员是必须要有所了解的

四、HTML整体结构

一个网页对应多个HTML文件,超文本标记语言文件以.htm或.html(外语缩写)为扩展名(其中.htm是因为之前的文件系统只支持最多三位扩展名)。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件,只用修改文件后缀即可。标准的超文本标记语言文件都具有一个基本的整体结构,标记一般都是成对出现(部分标记除外例如:<br/> <img/>),即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部实体两大部分。有三个双标记符用于页面整体结构的确认。

部分标记也可以不成对出现,如<p>,但是一般并不赞同这样做。

新建一个HTML文件,看一下HTML文件的初始页

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body></body>
</html>

<!DOCTYPE html>:写在代码的最前面,他是文档声明,告诉浏览器,以下所有代码都是按照html规范编写的,浏览器编译的时候就按照html规范编译,防止浏览器编译时会陷入怪异模式 。

标记符<html>,说明该文件是用超文本标记语言来描述的,它是文件的开头;而</html>,则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记。

1、头部内容 :<head></head>

<head></head>:这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。头部中最常用的标记符是标题标记符meta标记符,其中标题标记符用于定义网页的标题,它的内容显示在网页窗口的标题栏中,网页标题可被浏览器用做书签和收藏清单

1.1  元数据标签:<meta>

这个标签了解一下就好,别较真

meta是HTML语言head区的一个辅助性标签,位于文档的头部,不包含任何内容。

<meta>标签的属性定义了与文档相关联的名称/值对。

meta元素可提供相关页面的元数据,比如针对搜索引擎和更新频度的描述和关键词。

(1)name属性

name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

语法格式:

<meta name="参数" content="具体的参数值">;

--->参数:keywords、descript、root、author

a、设置网页关键字:keywords

说明:用来告诉搜索引擎网页的关键字

举例:<meta name="keywords" content="明星,歌曲,吃瓜">

b、网站内容描述:description

说明:用来告诉引擎网站的主要内容

举例:<meta name="description" content="吃歌手的瓜">

c、机器人向导:root

说明:用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引

content的参数有all,none,index,noindex,follow,nofollow。默认是all。

举例:<meta name="robots" content="none">

d、网页作者:author

说明:标注网页作者

举例:<meta name="author" content="张三">

(2)http-equiv属性 

http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值

语法格式:

<meta http-equiv="参数" content="参数变量值">

--->参数:expires、Pragma、Refresh、Set-Cookie、Window-target、content-Type、content-Language

a、设置网页期限:expires

说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输

举例:<meta http-equiv="expires" content="Fri,12 Jan 2001 18:18:18 GMT">

注意:必须使用GMT的时间格式。

b、cache模式:Pragma

说明:禁止浏览器从本地计算机的缓存中访问页面内容

用法:<meta http-equiv="Pragma" content="no-cache">

注意:这样设定,访问者将无法脱机浏览。

c、刷新:Refresh

说明:自动刷新并转到新页面。

用法:<meta http-equiv="Refresh" content="2;URL">;(注意后面的分号,分别在秒数的后面和网址的前面,URL可为空)

注意:其中的2是指停留2秒钟后自动刷新到URL网址。

d、cookie设定:Set-Cookie

cookie:网络或互联网使用者发给中央服务器信息的计算机文件

说明:如果网页过期,那么存盘的cookie将被删除。

用法:<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/">

注意:必须使用GMT的时间格式。

e、显示窗口设置:Window-target

说明:强制页面在当前窗口以独立页面显示。

用法:<meta http-equiv="Window-target" content="_top">

注意:用来防止别人在框架里调用自己的页面。

f、显示字符集的设定:content-Type

说明:设定页面使用的字符集。

META标签的http-equiv=Content-Type content="text/html

http-equiv=Content-Type代表的是HTTP的头部协议,提示浏览器网页的信息,

写法为:<meta http-equiv="Content-Type" content="text/html; charset=信息参数" >

meta标签的charset的信息参数如GB2312(或GBK)时,代表说明网站是采用的编码是简体中文;

meta标签的charset的信息参数如BIG5时,代表说明网站是采用的编码是繁体中文;

meta标签的charset的信息参数如iso-2022-jp时,代表说明网站是采用的编码是日文;

meta标签的charset的信息参数如ks_c_5601时,代表说明网站是采用的编码是韩文;

meta标签的charset的信息参数如ISO-8859-1时,代表说明网站是采用的编码是英文;

meta标签的charset的信息参数如UTF-8时,代表世界通用的语言编码。

注:在HTML5中,在表达charset信息时可以简写,前面的内容可以去掉,即写法是: <meta charset="UTF-8">

g、显示语言的设定:content-Language

用法:<meta http-equiv="Content-Language" content="zh-cn" />

1.2   网页标题标签:<title></title>

标签定义文档的标题,在所有 HTML 文档中是必需的

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>第一个网页</title></head><body></body>
</html>

1.3  头部内容的其他标签

2、实体内容:<body></body>

网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。

2.1  六个标题等级标签

<h1><h1/>定义一级标题

<h2><h2/>定义二级标题

<h3><h3/>定义三级标题

<h4><h4/>定义四级标题

<h5><h5/>定义五级标题

<h6><h6/>定义六级标题

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>第一个网页</title></head><body><h1>侠客行</h1><h2>侠客行</h2><h3>侠客行</h3><h4>侠客行</h4><h5>侠客行</h5><h6>侠客行</h6></body>
</html>

2.2  换行标签:<br />

在编辑文档时的回车不会让网页中的内容换行,需要在文档中使用<br />标签使网页中现实的内容换行 

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>第一个网页</title></head><body><h1>侠客行</h1><h3>李白</h3>赵客缦胡缨,吴钩霜雪明。<br />银鞍照白马,飒沓如流星。</body>
</html>

2.3  段落标签:<p></p>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>第一个网页</title></head><body><h1>侠客行</h1><h3>李白</h3>赵客缦胡缨,吴钩霜雪明。<br />银鞍照白马,飒沓如流星。<p>十步杀一人,千里不留行。<br />事了拂衣去,深藏功与名。</p><p>闲过信陵饮,脱剑膝前横。<br />将炙啖朱亥,持觞劝侯嬴。</p></body>
</html>

2.4  字体标签:斜体<em></em>,斜体<i></i>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>第一个网页</title></head><body><h1>侠客行</h1><h3>李白</h3>赵客缦胡缨,吴钩霜雪明。<br />银鞍照白马,飒沓如流星。<p>十步杀一人,千里不留行。<br />事了拂衣去,深藏功与名。</p><p>闲过信陵饮,脱剑膝前横。<br />将炙啖朱亥,持觞劝侯嬴。</p><em>三杯吐然诺,五岳倒为轻。</em><br /><i>眼花耳热后,意气素霓生。</i></body>
</html>

2.5  字体标签:加粗<b></b>,加粗<strong></strong>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>第一个网页</title></head><body><h1>侠客行</h1><h3>李白</h3><b>赵客缦胡缨,吴钩霜雪明。<br />银鞍照白马,飒沓如流星。</b><strong><p>十步杀一人,千里不留行。<br />事了拂衣去,深藏功与名。</p></strong></body>
</html>

2.6  字体标签:上标标签<sup></sup>,下标标签<sub></sub>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>第一个网页</title></head><body>X<sup>2</sup>+Y<sup>3</sup>=Z<sup>4</sup><br />X<sub>1</sub>=?</body>
</html>

1、HTML——初识HTML、HTML的定义、HTML5相关推荐

  1. 用于定义html 5文档所要显示内容的是,下列标记中,用于定义HTML5文档所要显示内容的是...

    问题:下列标记中,用于定义HTML5文档所要显示内容的是 更多相关问题 发芽法炮制药物时,要求种子发芽率不低于A.100%B.95%C.90%D.85%E.80% 新生儿生理性体重下降的范围一般为体重 ...

  2. 一、初识kotlin之全局变量定义(kotlin学习笔记)

    文章目录 语法区别 全局变量定义区别 语法区别 kotlin与java在定义参数上的区别,如下全局变量的定义,请通过名称对应,同一个名称在kotlin中出现多次表示这个变量有多种定义方式 全局变量定义 ...

  3. html5 plus 未定义,html5+ plus 对象问题

    Webview Example var nw=null; // H5 plus事件处理 function plusReady(){ } if(window.plus){ plusReady(); }e ...

  4. Python函数01/函数的初识/函数的定义/函数调用/函数的返回值/函数的参数

    Python函数01/函数的初识/函数的定义/函数调用/函数的返回值/函数的参数 内容大纲 1.函数的初识 2.函数的定义 3.函数的调用 4.函数的返回值 5.函数的参数 1.函数初识 # def ...

  5. 吴恩达机器学习(第一章)——初识机器学习

    第一章 初识机器学习 文章目录 第一章 初识机器学习 前言 机器学习定义 机器学习算法 监督学习 无监督学习 学习工具 前言 Machine Learning: Grewout of work in ...

  6. html5新加入的内容,10个html5增加的重要新特性和内容

    文章开篇之前我们先了解一下什么是 html5,百度上是这样定义 html5 的:万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改. 其实说白了 html5 也就 ...

  7. 用html5做一个介绍自己家乡的页面_(近万字)一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备...

    作者 | Jeskson来源 | 达达前端小酒馆 HTML5和CSS3开发基础与应用,详细说明HTML5的新特性和新增加元素,CSS3的新特性,新增加的选择器,新的布局,盒子模型,文本,边框,渐变,变 ...

  8. HTML5的优势,语法变化以及基础常用标签

    HTML的全称是Hyper Text Markup Language,也就是超文本标记语言,它是互联网上应用最广泛的标记语言 此篇着重介绍HTML5的优势,语法变化,以及常用标签所代表的意义方便大家记 ...

  9. 速通C语言第一站 一篇博客带你初识C语言

    感谢佬们支持! 文章目录 前言 一.C语言的前世今生&&如何写C语言 二.初识C语言 1.  第一个C语言程序(万恶之源) 2.  数据类型 计算机中的单位 介绍各种类型 各数据类型的 ...

  10. MUI多端发布开发指南(终于把MUI的使用场景说清楚了)

    2019独角兽企业重金招聘Python工程师标准>>> MUI官方给的文档很分散,不系统.遇到问题解决找文档浪费了很多时间,终于弄清楚了,MUI的使用场景和处理方式. http:// ...

最新文章

  1. 验证输入字符串是否包含特殊字符
  2. POJ 1195 Mobile phones(裸的二维树状数组)
  3. Angular 应用的DevDependencies
  4. 大学学好高数的爆炸性意义!
  5. mysql show profile详解_SQL 性能分析利器 show profile
  6. js ---- 数组操作
  7. python 爬取 全网代理 IP 网站 + 破解端口加密混淆
  8. python 快速排名发包_SEO优化快速排名-发包技术
  9. 中南大学湘雅医院冯嵩:业财融合一体化信息平台的建设
  10. Python骚操作 | 川普的嘴,骗人的鬼!
  11. 农村物流配送管理如何走出困境?这里有方案
  12. 阿里正面阻击拼多多?店宝宝:百亿补贴进入新战场
  13. 单片机DAC输出方波简易实验
  14. CentOS 7 安装好后,无法使用小键盘的解决办法
  15. 高频交易——当期货配对交易加入了止损
  16. android电子英语词典背景介绍,实现基于Android的英文电子词典
  17. 【解决方案】根据当前系统时钟或签名文件中的时间戳验证时要求的证书不在有效期内
  18. 《OOD启思录》目录—导读
  19. centos7 使用 docker 部署 gitlab + gitlab-runner
  20. 眼动数据分析基础_AOI分析动态刺激物

热门文章

  1. 西部数据移动硬盘哪个型号好_西部数据移动硬盘哪款好
  2. 浏览器时间与电脑系统时间不一致
  3. 第 15 章 生成数据
  4. 单自由度线性系统的自由振动(一)
  5. PKCS# 11和CSP概念技术对比
  6. ubuntu搭建深度学习环境
  7. Gpon与Epon的区别
  8. 如何用python控制OBS 狀態
  9. java远程文件下载到本地
  10. 【Metashape精品教程5】影像质量评估