![-7-22 [HTML] 基本结构 DOCTYPE声明 标签:[title meta 标题 段落 换行](https://1000zi.500zi.com/uploadfile/img/15/170/1cdf5e67f93333fe2e1527a433f9f9fe.jpg)
文章目录
0.HTML网页技术(基础)1 HTML概述1.1 什么是HTML?1.2 Hello,HTML!2 HBuilder的安装与使用2.1 安装HBuilder2.2 使创建项目3 HTML进阶3.1 HTML的发展史3.2 HTML的优势3.3 HTML的学习4 HTML编程4.1 基本结构4.2 DOCTYPE声明4.3 网页中的常用标签4.3.1 title标签 :4.3.2 meta标签 :4.3.3 h1-h6标签 : 内容标题标签4.3.4 段落标签4.3.5 换行标签4.3.6 加粗 斜体 下划线标签4.3.7 网页注释和一些特殊符号5 HTML拓展5.1 HTML-IMG标签5.2 HTML-A标签0.HTML网页技术(基础)
1 HTML概述
1.1 什么是HTML?
Hyper Text Markup Language（超文本标记语言）
超文本标记语言，标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
简答的来说HTML就是一组浏览器能够识别的标签,是我们和浏览器沟通的必不可少的一种语言;
如果我想在网页看 一个我电脑里的视频,我只需要找一个文件编写以下代码
以上的代码经过浏览器解析之后
就变成
通过上面的小例子不难看出,HTML就是一组标签,是一组浏览器能够识别的标签,
而我们只需要学习这组标签,然后通过自己写标签让浏览器知道我们要做什么,浏览器就能根据你写的标签去展示你想展示的东西了;
1.2 Hello,HTML!
现场编程 : 我想在网页展示一段滚动文字应该怎么做呢?
很简单 : 三步搞定
第一步 : 新建一个记事本文档
第二步 : 在记事本中编写这么一段话:
<marquee>hello,html!</marquee>
上面的marquee就是HTML的标签,我们看不懂但是浏览器知道hello,html是一段滚动的文字;
第三步 : 修改记事本文件的后缀为html;然后双击运行即可;
注意,网页文件的格式为 *.html
到此,我们就已经掌握了html的基本概念,我们已经知道HTML是一种网页技术,它是一组能够被浏览器识别的标签,浏览器根据各种不同的标签来帮助我们展示不同样式的内容;
当然 真正开发我们肯定不能用 记事本开发,我们开发网页使用hbuilder来完成网页部分的学习;
2 HBuilder的安装与使用
Hbuilder是由有我国的 前端(页面) 后端(编程) 开发人员编写的一款前端开发IDE，
绿色软件 免安装 解压了直接就能用
由于是因为我们自己人开发的所以在使用上非常适合我们中国人的开发习惯，虽然依旧有一些欠缺，但是我个人非常喜欢这一款IDE。
2.1 安装HBuilder
百度
2.2 使创建项目
点击 “文件” --> “新建” --> "项目"用HBuilder
在弹出的对话框中输入项目名称并选择项目位置
创建好项目之后,我们会看到里面有首页index.html，有JS文件夹，有CSS文件夹，还有图片的文件夹，基本齐全。
css文件夹用来存放 .css后缀的 样式文件
img 文件夹用来存放网页中用到的图片,所以网页中如果用到声音 可以创建 audio 文件夹 如果用到视频可以创建 video 文件夹
js 文件夹用来存放 .js后缀的 脚本文件
index.html 是一个网站的首页,每个网站的一个页面如果不出什么问题都应该叫 index 根据网站类型不同 可能有 index.html index.jsp index.asp index.php
介绍完基本结构之后我们把刚才的代码在hbuilder中再写一遍
双击开index.html 然后在body标签里写内容即可
3 HTML进阶
3.1 HTML的发展史
超文本标记语言—在1993年6月互联网工程工作小组工作案发布（并非标准）
HTML2.0—1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时。
HTML3.2—1996年1月14日，W3C推荐标准
HTML4.0—1997年12月18日，W3C推荐标准
HTML4.01（微小改进）—1999年12月24日，W3C推荐标准，2000年5月15日发布基本严格的HTML4.01语法，是国标标准化组织和国际电工委员会的标准
XHTML1.0—发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布
XHTML1.1—2001年5月31日发布
XHTML2.0是W3C的工作草案，由于改动过大，学习这个新技术的成本过高而最终胎死腹中，因此，现在最常用的还是XHTML1.0标准。
目前最新的版本为HTML5，它是被提出，被W3C接纳并成立新的HTML工作团队，
1月22日公布HTML5第一份正式草案，
12月17日HTML5规范正式定稿，
5月6日，HTML5.1正式草案公布。
HTML 5作为最新版本，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。目前企业开发中也在增大使用HTML5的力度
这些都是谁定义的的呢?
World Wide Web Consortium（万维网联盟）
成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构/
/
W3C标准包括
结构化标准语言（XHTML 、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript ）
正式因为有了W3C这样的标准化组织定义了标准,各大浏览器厂商才能根据这个标准统一制定解析方式,
可能具体细节不同,但是所有的浏览器在解析HTML的时候都是按W3C的标准解析的;
只有标准化 才能多元化!
3.2 HTML的优势
其实数据展示有很多中,像我们的桌面程序还有手机的APP都能够帮助我们展示数据,但是为啥我们非要用html来进行数据的展示呢?
HTML对比其他展示数据的技术有以下优点:
a) 配置简单,编程成本小
b) 不需要特定SDK的支持,有个浏览器编写个网页就能展示
c) 具有跨平台特性,不管什么操作系统MAC也好windows也好都能很好支持
总结 : 作为数据展示方面非常优秀的技术HTML可以非常方便帮我我们展示数据(数据可视化)的非常好的伙伴
3.3 HTML的学习
菜鸟教程(很实用的一个学习网站)/
2) w3school
/
4 HTML编程
4.1 基本结构
注意 :
< body>、等成对的标签，分别叫开放标签和闭合标签 单独呈现的标签（空元素），如
；意为用 / 来关闭空元素
看完了基本结构之后,我们就动手写一个吧
<html><head><meta charset="utf-8" /><title>我的第一个网页</title></head><body><marquee>Hello,HTML!</marquee></body></html>
怎么样是不是很简单呢?但是我们这个网页并不规范,根据W3C标准我们还要有HTML的声明部分
4.2 DOCTYPE声明
修改一下我们的网页
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>我的第一个网页</title></head><body><marquee>Hello,HTML!</marquee></body></html>
4.3 网页中的常用标签
怎么学习HTML？
HTML标签 是我们学习的重点 熟练的掌握好每个标签的含义和使用才是我们重点掌握的
4.3.1 title标签 :
网页标题标签(一个网页只有一个标题)
代码 :
效果 :
大家注意,此处为什么会是乱码呢?这就要介绍下面的标签了
标题编写的原则 ： 用最最简短的语言描述网页的作用 学生-数据展示 学生-添加 学生-删除
4.3.2 meta标签 :
META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。
所以我们可以使用mate标签来设置网页的编码
<meta charset="UTF-8" />
(国际化)
注意 :
此处的UTF-8是网页内容的编码方式
UTF-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码，又称万国码，由Ken Thompson于1992年创建。
如果你想展示中文其实还可以设置编码为GBK
GBK全称《汉字内码扩展规范》（GBK即“国标”、“扩展”汉语拼音的第一个字母，英文名称：Chinese Internal Code Specification） ，中华人民共和国全国信息技术标准化技术委员会1995年12月1日制订，国家技术监督局标准化司、电子工业部科技与质量监督司1995年12月15日联合以技监标函1995 229号文件的形式，将它确定为技术规范指导性文件。这一版的GBK规范为1.0版。
那么接下来为了能够正常的展示标题我们给网页加上meta标签,观察效果
网页中加入 :
<meta charset="UTF-8" />
观察效果
4.3.3 h1-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>
对应效果为:
4.3.4 段落标签
<p>
一般写完标题之后都会写正文,那么写正文的时候就要分段落展示,而p标签就是正文段落标签,下面展示一下没有分段和分段的文字效果
代码 :
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>我的第一个网页</title></head><body><h1>海牛学院</h1><p>海牛学院</p><p>海牛学院</p><p>海牛学院</p></body></html>
4.3.5 换行标签
<br /> :
文本换行除了比较正式的<p>标签之外,还可以在文本中加入<br />换行标签来实现换行效果;
代码 :
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>我的第一个网页</title></head><body><h1>海牛学院</h1><p>大数据培训，<br />海牛大数据，<br />大数据培训机构，<br />大数据培训班，<br />大数据课程，<br />大数据培训课程，<br />大数据培训学校，<br />大数据视频</p></body></html>
大家要注意一个细节,就是<br />标签不是成对出现的,而是一个单标签,此处需要注意;像这样的单标签还有一个叫<hr />可以在网页上画一条分割线
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>我的第一个网页</title></head><body><h1>海牛学院</h1><p>海牛学院</p><p>海牛学院</p><p>海牛学院</p><!-- 我是一个注释 --><hr /><!-- 我是一个注释 --><p>大数据培训，<br />海牛大数据，<br />大数据培训机构，<br />大数据培训班，<br />大数据课程，<br />大数据培训课程，<br />大数据培训学校，<br />大数据视频</p></body></html>
4.3.6 加粗 斜体 下划线标签
<strong>,<em>,<u>
strong 加粗标签 em斜体标签 u 下划线标签
代码应用 :
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>案例1</title></head><body><p>我是普通文字</p><strong>我是粗体文字,用来强调重要内容</strong><em>我是斜体文字,用来表示这是一段引用文字</em><u>我是字体下划线,我有啥用呢?可以做填空题答案</u></body></html>
大家注意一个问题,段落标签因为代表一段的开始于结尾所以一段结束会换行处理
但是strong em u标签只是修饰文字的标签不具备段落处理能力,所以如果不加br标签是不会换行的;这样的标签又被叫做行级元素,而像p标签这样的独占一行的标签叫做块级标签
行级标签和块级标签的特点:
块元素 无论内容多少，该元素独占一行（p、h1-h6…） 行内元素 内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)
问题 : 如果我就像让行内原色独占一行怎么办呢?
很简单,你可以加一个<div><div>标签, 块标签 封装特性
定义和用法
<div>可定义文档中的分区或节（division/section）。
<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记<div>，那么该标签的作用会变得更加有效。
用法
<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是<div>固有的唯一格式表现。可以通过<div>的 class 或 id 应用额外的样式。
不必为每一个<div>都加上类或 id，虽然这样做也有一定的好处。
可以对同一个<div>元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
4.3.7 网页注释和一些特殊符号
写代码之前写注释是非常有必要的,以前写java代码能用的注释有
单行注释 // 多行注释 /**/
HTML也有自己的注释
<!-- 下面的是分割线 而我是注释(☺) -->
注释的代码内容不会在页面显示,只是对网页中的内容作出说明的
经验 : 作为一个合格的网页编写者来说,写得一手好的注释也是非常重要的
网页中还有一些特殊符号需要记住
5 HTML拓展
5.1 HTML-IMG标签
语法中我们可以看出,作为一个标签不光可以展示不同功能,标签本身也有很多
标签自己的属性,来进行标签本身的设置;
语法中我们需要明确 alt 和 title里的文字展示的时机问题 :
alt的文字是图片展示不出来的时候再展示
title 是我们把鼠标悬停上去之后就可以展示
代码 :
<img src="img/clip_image0467d5b28ae-8557-44d1-b854-eff41f751b1f.jpg" title="青牛院长" alt="嘤嘤嘤,图片没出来" >
5.2 HTML-A标签
页面中的a标签标示一个连接标签,就是你点它一下它就能跳转到另外一个页面
连接标签允许你在href属性中填写相应的地址进行跳转
用a标签跳转到百度的官网
<p><a href="" target="_blank">跳转至百度官网</a></p>
单击鼠标,打开一个新窗口展示
当然a标签还有很多好玩的事情,比如说点我们的院长跳转我们的官网
代码:
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>案例3</title></head><body><p>点击院长跳转学校官网:<a href="" target="_blank"><img src="img/clip_image0467d5b28ae-8557-44d1-b854-eff41f751b1f.jpg" title="青牛院长" alt="嘤嘤嘤,图片没出来" ></a></p></body></html>
好123就是靠这个a标签赚了百度5000万人民币加上现市值1.2亿的百度股票,呲呲呲….
到此 HTML的基本内容完成
-7-22 [HTML] 基本结构 DOCTYPE声明 标签:[title meta 标题 段落 换行 加粗 斜体 下划线] 注释 特殊字符 img标签 a标签
