初学HTML
-
- 一、什么是HTML
- 二、HTML在哪运行
- 三、HTML怎么开发
- 四、web是什么
- 五、web程序员包括什么
- 六、第一个HTML
- 七、HBuilder X
- 八、用户如何找到我们编写的网站？
- 九、代码解释
-
- 9.1 !DOCTYPE html
- 9.2 meta
- 9.3 style
- 9.4 模型
- 9.5 标题文字
- 9.6 段落文字
- 9.7 换行
- 9.8 空格
- 9.9 上标文字和下标文字
- 9.10 文字标签
- 9.11 网页中颜色的表示
一、什么是HTML
HTML(HyperText Markup Language)是超文本标记语言。那何为超文本呢？就是如流媒体，声音，视频，图片等不仅仅局限于文字的表现方式。
这种语言是由大量的标签组成，且任何一个标签都有开始标签和结束标签 ，例如
<标签>：开始标签
</标签>：结束标签
HTML严格意义上说只能说是一种规范，一种浏览器上的规范。标签语言，不能称为编程语言，因为HTML中没有变量，数据类型，控制语句和循环语句。
二、HTML在哪运行
在浏览器中运行，世界上有五大主流浏览器IE(微软)、FireFox(火狐)、Chrome(谷歌)、Opera(欧朋)、Safari(苹果专用的浏览器)。
国内前端程序员主要安装三个，分别是IE、FireFox和Chrome，这是因为前端程序员开发完成后需要在不同的浏览器上运行测试编写的网页，以便发现浏览器兼容问题。
三、HTML怎么开发
使用记事本新建一个.html或者.htm后缀的文件就能开发，或者是用编译器开发，在浏览器中打开就能运行，不需要编译。
四、web是什么
web就是网站开发，如淘宝网、京东网、百度等网站。
五、web程序员包括什么
-
web前端程序员：需要精通html、css、JavaScript。web前端主要是负责前端浏览器展示的效果，满足客户要求，要炫酷，要震撼…
web前端页面展示的时候，是需要后台动态数据的，这些数据由后台的java程序或者c++程序提供。
- web后端程序员：需要精通C语言、Java、C++都有可能，根据开发项目环境等决定具体这个项目需要什么后端语言
这种具有前后端的系统架构被称为B/S结构系统。
B：browser（浏览器）
S：server（服务器）
六、第一个HTML
新建一个文本文件，将.txt的尾缀改成.html或.htm，用记事本打开进行程序编写。需要说明的是，在HTML中不严格区分大小写。
<!--注释-->
<!--html标签是根标签，最大的标签，所有的标签都要在html标签中去写-->
<html>
<!--头标签，用于定义网页属性的标签-->
<head>
<!--网站的标题，显示在浏览器窗口的名字-->
<title>my first html page</title>
</head>
<!--用于编写网站内容的标签-->
<body>
这是我的第一个网页
</body>
</html>
可以看到浏览器窗口和网站内容的效果
七、HBuilder X
HBuilder X一款支持HTML5的Web开发IDE，使用它可以让我们更方便的进行Web开发，以后的代码编码都在HBuilder X中进行。
HBuilder X中注释的快捷键是ctrl+/，其他的快捷键可在菜单栏-工具-自定义快捷键中查看和修改。
八、用户如何找到我们编写的网站？
- 直接输入网址
- 通过网站的名字(title标签中的文字，给搜索引擎看)
- 关键字搜索（在meta标签中写）
- 通过简介信息搜索（在meta标签中写）
九、代码解释
在左侧工作区或点击菜单栏中的文件，新建一个项目，在该项目中新建一个目录，在该目录下新建一个html文件，模板选择default。
新建的html文件内容如图所示，下面对该默认代码进行解读。
9.1 !DOCTYPE html
声明文档类型，声明的是 html 的版本，!DOCTYPE html 是最新的 HTML5，版本还有 HTML1.0 2.0 3.0 4.0 4.01。它要放在整个文件的第一行，并且这个声明不是标签，是告诉 web 浏览器这个代码要使用哪个版本的HTML进行编写。
9.2 meta
meta 标签是元数据标签，作用是告诉浏览器和搜素引擎关于我们网页的一些基本信息，他属于“自我了断型”标签，即在<>中结束，且有没有/都可以。与之形成对比的如下，他需要两对尖括号并在中间书写内容。
属性名称=“属性值” 是标签内属性的写法，charset属性是设置字符集标签，字符集就是规定整篇文档所用的字符格式，常见的字符集有ISO-8859-1（英文）、GB2312 （简体中文）、GBK（简体和繁体中文）、utf-8（万国码）。字符集会根据所包含的语言种类改变大小，种类越多，字符集越大。当在开发阶段，尽量采用能表示所有页面文字种类最少的字符集，如中文小说页面采用中文字符集就可以，翻译网站中则使用万国码，我目前处于学习阶段，所做的页面都很小，用什么无所谓。
前文所说的通过网站的名字找到我们编写的网站的方法为：
在浏览器中运行后可在标题栏看到
前文所说的通过关键字和简介信息搜索网站的方法为：
<meta name="keywords" content="关键字"/>
<meta name="description" content="简介信息"/>
9.3 style
style是CSS样式标签，属性值是样式。 样式的写法为样式的名：样式的值。
9.4 模型
- block模型(块模型)：独占一行且可以设置大小
- inline模型(行内模型)：不独占一行但是不能设置大小
- inline-block模型(行内块模型)：不独占一行且可以设置大小
想将多个块模型在一行内显示可以用改变模型的方式
9.5 标题文字
<h1 >这是一级标题</h1>
<h3 >这是三级标题</h3>
<h6 >这是六级标题</h6>
数字范围1~6，n越大文字越小，标题文字自带加粗属性，且是块模型，也就是每段文字都独占一行
若想将多个块模型在一行显示，就需要将所有的块模型都转成行内模型，通过style样式中的display：inline强制将block模型转成inline。
<h1 style="display: inline;">这是一级标题</h1>
<h3 style="display: inline;">这是三级标题</h3>
<h6 style="display: inline;">这是六级标题</h6>
9.6 段落文字
p标签是块模型
9.7 换行
使下边的内容换行显示
9.8 空格
html文档会默认的将多个连在一起的空格显示成一个空格，若想在页面中显示一堆空格的话就需要用多个下面代码去写（;千万不能忘）
9.9 上标文字和下标文字
2<sup>5</sup><!-- 上标，行内模型 -->
log<sub>2</sub>5<!-- 下标，行内模型 -->
9.10 文字标签
行内模型，修饰文字的字体，大小，颜色
- face：字体属性
- size：字体大小
- color：文字颜色
<font face="楷体">这是楷体文字</font>
<br>
<font size="14px">14像素大小的文字</font>
<br>
<font color="red">红色文字</font>
9.11 网页中颜色的表示
光的三原色：红绿蓝。三种颜色混合在一起就得到了新的颜色（不同的深度(浓度)）；
十进制的浓度范围（0-255）；
表示颜色的话，用16进制表示，十六进制范围00~FF；如
- #FFFFFF 纯白色
- #000000纯黑色
- #FF0000纯红色
- #00FF00纯绿色
- #0000FF纯蓝色
html中颜色的表示方法有4中，分别是
- 单词表示(red、blue、yellow…)
- #6位16进制的数(#FF0000)
-
rgb()
范围0~255之间的数，如rgb(255，255，255)纯白色，在css中效果准确。
-
rgba()
前三位与rgb相同，第四位a代表深度(透明度)范围0~1之间的小数，如rgba(0,0,0,0.1)，在css中效果准确。