1.html简介
1.1什么是html
html的概念是超本文标记语言(HyperText Markup Language),超文本:浏览器就可以解释(解析)的,比如http(超文本传输协议)。官方解释:“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。解析顺序是:自上而下的顺序。
标记语言: 由一个一个的标记组成的语言。比如段落是<p>…</p>这个标记表示,图像是由<img/>这个标记表示。超链接是…标记表示。学习标记语言的关键是明白网页的元素(布局、结构、内容等)应该由什么标记来描述是最恰当的。
我们要让浏览器按照人的思维来显示网页,就必须掌握浏览器解释网页的html语言,明白标签的作用,比如你想产生段落,就必须用<p>段落内容</p>的方式才能实现。
html文件的后缀是 xxx.html 或者 xxx.htm
html5文件的特点看第一行代码:<!DOCTYPE html>如下图所示
浏览器的开发者工具面板的打开,关闭方式 F12,下图所示为开发者工具面板
html的历史:
超文本标记语言(第一版)——在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准):
HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日,W3C推荐标准
HTML 4.0——1997年12月18日,W3C推荐标准
HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准
XHTML1.0——发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布。
XHTML 1.1,于2001年5月31日发布,W3C推荐标准。
XHTML 2.0,W3C工作草案。
HTML4.01 是常见的版本。
XHTML 5,从XHTML 1.x的更新版,基于HTML 5草案。
HTML 5——2014年10月28日,W3C推荐标准
1.2 常用的核心软件安装编辑器的基础使用及认识html
1.2.1 HBuilder X编辑器的基础使用
hbuilderx官网
1.2.2 Visual Studio Code编辑器的基础使用
visual studio code官网
Visual Studio Code - Code Editing. Redefined
1.2.3 Sublime Text3、Notepad++、webstorm
sublime text官网
Sublime Text - Text Editing, Done Right
notepad++官网
Notepad++ - Download Latest Version for Windows
webstorm官网
WebStorm:JetBrains 出品的最智能 JavaScript IDE
1.3 常用浏览器的基础使用
1.3.1 谷歌浏览器
扩展迷
Chrome插件,谷歌浏览器插件下载,chrome谷歌商店插件crx应用推荐与下载-扩展迷
WEB前端助手(FeHelper) 的安装和使用
1.3.2 火狐浏览器
Firebug是Firefox下的一款开发类插件
firebug下载地址
1.3.3 IE浏览器
ie浏览器中文网
ietester官网
1.4认识HTML4和HTML5的文档结构
HTML4文档结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>浏览器窗口处显示的标题</title> </head> <body>文档主体,显示给用户看的内容。</body> </html>
html文档的基本结构,html文档分为两个部分,head部分和body部分,html/head/body标签是唯一的,一个html文档只能有一对head和body标签。
<html> <head></head> <body></body> </html>
head部分是对文档的具体声明,比如文档编码,文档的标题,关键字,描述,外部CSS样式和js文档的链接,都可以放在头部,主要是给浏览器和搜索引擎看的。用户除了标题之外,是看不到声明的其它内容的。比如:
<head> <!--文档使用utf-8国际编码,如果没有编码,中文字符会产生乱码--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--网站的关键字,不要堆砌,关键字之间用逗号隔开。--> <meta name="keywords" content="网站前端,html,css,js,jquery,bootstrap,CMS,seo" /> <!--网站的描述--> <meta name="description" content="记录上课的教学内容和案例,并对教学进行反思和总结。" /> <!--网站的作者--> <meta name="author" content="H5前端开发" /> <!-- http-equiv='refresh':文档自动刷新。 content='跳转时间间隔; url=页面地址':定义文档自动刷新的跳转时间间隔,和跳转地址。例如:content='3; url=http://www.163.com'--> <meta http-equiv='refresh' content='跳转时间间隔; url=页面地址'> <!--链接外部css样式--> <link rel="stylesheet" href="css/public.css" /> <!--链接外部js文件--> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <!--标题非常关键,是整个网页的核心关键词,也是SEO优化的重点--> <title>网页标题</title> </head>
body部分就是放用户可以看到的网页主体内容。比如:
<body> <header> <div class="logo">博客</div> <nav> <ul> <li><a href="#">HTML5教程</a></li> <li><a href="#">CSS3教程</a></li> <li><a href="#">DIV+CSS教程</a></li> <li><a href="#">javascript教程</a></li> <li><a href="#">jQuery教程</a></li> </ul> </nav> </header> <section class="container"> <div class="content">主体内容</div> <aside>侧边栏</aside> </section> <footer>底部版权</footer> </body>
HTML5文档结构
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> </body> </html>
第一行依然有声明,只是没有指定html版本,因为html5文档是完全兼容低版本html语言的。charset指定编码。
1.5html和html5有什么区别
区别:1、HTML的文档类型声明长而复杂,而HTML5的文档声明相对来说更为简便,有利于程序员快速阅读和开发;结构语义区别,html:没有体现结构语义化的标签,如:<div id="nav"></div> html5:添加了许多具有语义化的标签,如:<article>、<aside>、<audio>、<bdi>...
2、HTML5支持SVG、画布和其他虚拟矢量图形,而HTML不支持;3、HTML本身不支持音频和视频,而HTML5支持等等。
2.html文本标签
<br>换行标签(单标签)
<!-- 换行标签(标记) -->
<br>
<hr>水平分割线标签
style="background-color: " 行内样式---background-color 背景色
<!-- 水平分割线标签 -->
<hr style="background-color: lightsalmon; height: 2px;">
<p></p>段落标签
特点:
独占一行(块元素)
属性:
align="" 内容水平对齐显示,3个值:left、center、right
align="left" 内容水平居左显示
align="center" 内容水平居中显示
align="right" 内容水平居右显示
style="text-align: center" 行内样式---内容水平居中显示
<p align="left">我是段落</p>
<p align="center">我是段落</p>
<p align="right">我是段落</p>
<p style="text-align: center;">我是段落</p>
h1,h2,h3,h4,h5,h6 标题标签(标题 1----标题 6)
特点:
(1)独占一行(块元素)
(2)标题标签 字体默认加粗
(3)字号越小,字体越大;字号越大,字体越小
align="" 内容水平对齐显示,3个值:left、center、right
align="left" 内容水平居左显示
align="center" 内容水平居中显示
align="right" 内容水平居右显示
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4 style="text-align: center;">标题4</h4>
<h5 >标题5</h5>
<h6>标题6</h6>
<em> <i>斜体标签,给文本添加斜体效果
<em>我是斜体标签</em>
<i>我是斜体标签</i>
<strong><b>加粗标签,给文本字体加粗
<strong>我是加粗标签</strong>
<b>我是加粗标签</b>
span装饰性标签(无意义文本标签),里面设置文本内容(日期,作者等)
<span>2021-12-6</span>
1个空格字符、 
2个空格字符
<span>一 二</span>
<span>三 四</span>
<u></u>下划线标签,给文本添加下划线
<u>下午好</u>
<del></del>删除线标签,给文本添加删除线
<s></s>删除线标签,给文本添加删除线(文字两头划线)
</strike>删除线标签,给文本添加删除线
<p>
价格:<del>5.60</del>
<br>
<s>360.00</s>
<br>
<strike>8.90</strike>
</p>
<pre></pre>预定义格式化标签,保留空白字符,换行。能够以正常排版方式显示空格与段落
<p>
相思
王维 〔唐代〕
红豆生南国,春来发几枝。
愿君多采撷,此物最相思。
</p>
<pre>
相思
王维 〔唐代〕
红豆生南国,春来发几枝。
愿君多采撷,此物最相思。
</pre>
<sup></sup>上标标签
<sub></sub>下标标签
<p>
H<sub>2</sub>
</p>
<p>
3<sup>3</sup>
</p>
<big></big>字体大一号标签
<small></small>字体小一号标签
<p>
价值
<big>价值</big>
<small>价值</small>
</p>
<blockquote></blockquote>文本块引用标签
<p>
你好:
<blockquote>前端</blockquote>
</p>