一、互联网原理

互联网原理：上网即请求数据。

过程：在本机计算机浏览器上输入网址，发送一个http请求到服务器端，服务器会根据协议作出响应，将对应的网页文件通过http协议再传输给我们本地计算机，将网页在浏览器上进行渲染。

1、服务器

服务器：server，就是计算机。也有处理器、内存、操作系统等等。

功能：用来存储数据。处理数据量大、速度快。

上传更改文件：服务器可以通过个人电脑远程控制，需要一些管理软件，FTP。

服务器为了保证任何时间都能让用户访问到，要求24小时不能关机的。

2、浏览器

浏览器：browser。上网和接收数据的客户端。

作用：发送http请求，接收数据，渲染网页。

浏览器由很多的厂商来进行维护和运营，浏览器有不同的品牌和版本。

全球五大浏览器：IE、谷歌（chrome）、火狐（Firefox）、苹果（Safari）、欧朋（opera）。

问题：根据版本不同、品牌不同，同一个网页渲染效果可能不同。IE低版本浏览器没有全部被淘汰，制作网页的过程中，需要针对低版本浏览器写特殊的代码，兼容性书写。

浏览器接收到的数据并不会存在软件上面，而是存在c盘的一个临时文件夹，路径可以通过浏览器找到。

路径：C:\Users\teacher\AppData\Local\Microsoft\Windows\Temporary Internet Files。

文件存储之后，在浏览器上讲所有数据渲染出来，看到的页面。

现象：第二次打开一个网页，比第一次打开速度要快。因为第一次浏览的时候已经将部分文件下载到了本地临时文件夹。

3、http协议

http：hypertext transfer protocol，超文本传输协议。

http协议包括请求和响应。

请求：request，通过浏览器输入网址、或者点击超级链接，都会向服务器发起http请求。http协议包括多个请求。

响应：response，服务器接收到请求之后，响应这个请求，将对应的文件再通过http协议回传给用户。

访问页面时，会同时发出多个http请求，包含网页的图片、视频、音频等文件。

二、html基础概念

1、纯文本

纯文本：只有文字内容，不包含其他样式、格式等内容。

最简单的例子：记事本文件中的文字。

中文：一个汉字占2个字节。

文件大小由文字内容决定，不包含一些辅助的样式类的大小。

对比.txt和.doc这两种文件。

.txt文件：纯文本文件，大小只包含文本内容的大小，不包含样式。

.doc文件：非纯文本文件，不止包含文字内容，还包括样式。

纯文本文件：内部只能书写普通文字，不能插入图片等其他元素，保存时只保存文本，不保存样式。

html、css、js、Java等一些语言都是纯文本文件。

纯文本文件都能够用任意的纯文本编辑器进行编辑。比如记事本。

2、html

html：hypertext markup language，超文本标记语言。

html文件是纯文本文件，内部只能有文字。

超文本：用文本表示文字、图片、音频、视频、链接、程序等等其他内容。

标记语言：通过标记来给我们的文本添加语义的语言。

如果没有标记，网页显示样式：

有标记，表示添加了对应的语义，给我们的页面区分了结构，网页会有一个默认的显示样式：

作用：html标签的作用仅仅是添加相应的语义，不会添加样式，样式是有css来控制。

例如：h1标签的作用是什么？

错误：让文字加粗加大，独占一行。

正确：给文本添加一级标题的语义。

3、sublime

纯文本文件都能用任意的纯文本编辑器来进行编辑。

编辑器有很多种，所有的纯文本编辑器都能编辑HTML文件。例如记事本、Editplus、notepad++等。

专门制作网页的软件有：

Dreamweaver

Sublime 高效率程序书写工具

Webstorm 高级项目编程工具

sublime：超群的、崇高

书写注意：新建文件之后立即保存成对应的文件格式。

书写要求：所有的标签都必须在英文状态下书写。

快捷键：

html:xt点击tab键/ctrl+E 生成html基本骨架

标签名+tab 生成标签

标签名*n+tab 生成n个标签

h$*n + tab 生成一组标签，从h1到hn。

ctrl+shift+D 复制光标所在行

ctrl+shift+K、ctrl+X 删除光标所在行

ctrl+shift+↑ 光标所在行上移一行

ctrl+shift+↓ 光标所在行下移一行

ctrl+鼠标滚轮滚动放大缩小文字显示

按住滚轮拖动选中多个行，一起编辑

三、html结构

1、html基本骨架

1 <html>

2 <head>

3 <title>名字</title>

4 </head>

5 <body>

6 网页的主体，用户看到的内容

7 </body>

8 </html>

html：代表整个网页，根标签。一对双标签。

head：对文件的一些设置。

title：页面的标题，显示在选项卡的名字部分。可以用作收藏夹的名字。

body：网站主体部分，这里的内容才是用户能够见到。

2、DTD

DTD：doctype definition，文档类型定义，文档类型声明。

作用：告诉浏览器，我使用的html规范是哪个版本。

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

组织：W3C，国际万维网联盟，汇总和制定维护一些语言的规范。

html规范有W3C组织来维护。

版本：html1.0-html5。

html4.0版本之后，正式将样式和结构进行了分离。常用的版本html4.01版本。有一些标签被废弃了，例如font、b、u、i等。

在html4.01基础之上做了一个扩展升级、严格化，演变成了XHTML版本。严格规范了标签名字必须用小写字母，属性值必须用双引号包裹，关闭符号/必须写。

在大的版本基础上，又划分了三个小的版本。

Strict 严格版：不能使用font等废弃标签，不能使用框架集，结构和样式分离。

Transitional 过渡版（通用版）：可以使用font等废弃标签，不能使用框架集

Frameset 框架集版：可以使用框架集

严格程度：XHTML1.0 Strict > HTML4.01 Strict > XHTML1.0 transitionl > HTML4.01 transitionl

学习过程会用到一些废弃标签，使用XHTML1.0 transitional版本。

1 html:xt XHTML1.0 transitional

2 html:xs XHTML1.0 strict

3 html:5

发展到html5，放弃了三个小规范。

HTML5的DTD进行了极大的简化：<!DOCTYPE html>

3、命名空间

html标签上面有两个属性：

xmlns：xml表示可扩展标记语言，用于我们文件传输。ns是namespace命名空间，规范了我们的页面在传播过程和浏览过程，使用的标签命名的规范。

1 xmlns="http://www.w3.org/1999/xhtml"

标签名字书写时必须使用英文书写：

lang：language语言的缩写。

1 xml:lang="en"

4、字符集

在head标签内部进行设置。

通过一个meta的单标签来进行设置：

1 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

charset：字符集。

中文字符集包括：

UTF-8：国际通用字库，涵盖了所有人类的语言文字。一个汉字3个字节。

gb2312/gbk：中国字库，国标，涵盖了汉字和一些常用的外文、符号。一个汉字2个字节。所有的简体字，大量的繁体字，一部分特殊符号，平假名等等。

使用情况：

（1）如果网站包含大量的特殊字符、外文、少数民族的语言，或者对网页加载速度没要求，用utf-8。

（2）网页中有大量的中文，而且要求网页加载速度快，使用gbk。

四、html语法特性

1、html对换行、缩进、空格不敏感

标签之间不论有没有换行、缩进、空格，对我们页面不会造成任何影响。

1 <p>这是段落1</p> <p>这是段落2</p> <p>这是段落3</p>

2 <p>这是段落4</p> <p>这是段落5</p>

3 <p>这是段落6</p><p>这是段落7</p>

4 <p>这是段落8</p> <p>这是段落9</p>

格式跟标签的默认样式有关，跟标签之间的嵌套关系有关。

1 <div>

2 这是一个盒子<p>你好</p>这是盒子后面

3 </div>

根据这个语法特性：在书写代码的过程中，尽量做到一个良好的缩进，为了提高代码的可读性。在上传之前为了减小文件体积，将代码压缩。

2、空白折叠现象

普通的文字之间如果有换行、缩进和空格，都会压缩成一个空格再网页中显示。

3、html标签

（1）html标签必须包裹在一对尖括号里。

1 <p>文字</p>

（2）双标签必须同时出现，必须有开始标签，必须有结束标签。否则会影响后面的标签和内容。

1 <p>文字

2 phahap

（3）结束标签中必须写关闭符号/。

1 <p>你好<p>

2 <p>你好</p>

单标记的关闭符写在右尖括号前面。

1 <img src="" alt="" />

（4）标签级别：容器级和文本级。

容器级标签：内部什么都可以放，容器级标签、文本、图片等等。h1标签就是容器级。

文本级标签：只能放置文字、图片、表单、超链接等文本类内容。p标签是文本级。

4、标签属性

（1）一个标签有多个属性，规定的是我们标签的某一个特性和它的属性值。

1 <div style="font-size:14px;">你好</div>

上面设置的是样式属性，引号内是属性值。

（2）多个属性之间用一个空格隔开。

1 <div style="font-size:14px;" class="box">你好</div>

（3）一个标签上的同一个属性只能写一次，如果有多个属性值，可以都在写引号里，属性值之间用空格隔开。

1 <div style="font-size:14px;" class="box" class="demo">你好</div>

2 <div style="font-size:14px;" class="box demo">你好</div>

（4）键值对：表示属性和属性值的一个书写语法。

键：key。代表属性名。

值：value。代表属性值。

html的标签属性的键值对写法：k=”v”。中间没有任何空格。

v的双引号必须写。

五、标签

1、h系列

h：headline，标题。

作用：给文本添加标题的语义。

标题一共分为六个等级：h1-h6。

他们之间没有嵌套关系。

1 <h1>

2 <h2></h2>

3 </h1>

正确：

1 <h1>一级标题</h1>

2 <h2>二级标题</h2>

约定俗成的：一个页面内只能有一个h1.为了搜索引擎优化SEO。一般会将h1给logo。

除了h1之外，其他的没有数量限制。

h系列标签都是容器级标签。但是不能放比他级别低的标题标签。

2、p标签

p：paragraph，段落。

作用：给文本添加段落的语义。

文本级标签：文字、图片、表单等类似文本的元素，还可以放一些废弃的标签。

一个段落需要一对p标签。

1 <p>2011年六一儿童节前夕，在结束了“思源工程情系大别山”公益晚会后，王宝强来到北京某小学，参加了学校的迎“六一”庆祝活动。[57] </p>

2 <p>2008年，王宝强任邢台市政协委员。</p>

3 <p>

4 <img src="data:images/cat.jpg" alt="" />

5 这是一只猫

6 <input type="button" value="按钮"/>

7 </p>

3、img标签

img：image，图片的缩写。

作用：表示插入一张图片。相当于一个特殊的文字。

可插入图片的类型：jpg、png、gif。

重点：img的属性。

属性：

src source，资源，统一资源定位器

width 表示图片的宽度；

height 表示图片的高度；

border 边框属性；它的值可以设置边框的厚度；

title 设置提示文本；悬停文本；

alt 设置图像没有找到时候的替换文本；

宽高属性：如果只设置其中一个，另外一个会等比例缩放。两个都设置，按照实际值来进行渲染。可以写单位，也可以不写单位。

1 <img src="data:images/cat3.jpg" width="600" height="600" alt="" />

src的属性值是图片的加载路径。

路径：相对路径和绝对路径。

（1）相对路径

从html文件本身出发去查找图片文件的路径。

同级查找：在文件同一级文件夹内就有图片，路径直接写文件名.扩展名。

1 <img src="cat3.jpg" alt="" />

下级查找：图片在下一级文件夹之内，路径文件夹/文件夹/……/文件名.扩展名.

1 <img src="data:images/cat/cat2.jpg" alt="" />

上级查找：图片在上级文件夹中，跳出一级代码../,跳出几次写几个../。

综合写法：先跳出文件夹到上级，在找到文件夹进入内部查找文件。

1 <img src="../images/cat.jpg" alt="" />

错误写法：../只能出现在开头不能出现在中间。

1 <img src="../anli/../anli/cat3.jpg" alt="" />

注意：不能跨盘符查找。

（2）绝对路径

从盘符出发查找图片，或者网址形式。

注意：从盘符出发的路径不能有中文命名的文件夹或者文件名。

1 <img src="C:/Users/teacher/Documents/cat3.jpg" alt="" />

从盘符出发的绝对路径是不会用的。

网址形式的绝对路径是可以使用的。前提：图片必须传到网上了。

1 <img src="http://www.iqianduan.cn/images/cat.jpg" />

title属性和Alt属性：

Alt：在文件加载错误时候，才能显示的文本，如果没有错误，不加载。

1 <img src="data:images/cat2.jpg" width="600" height="600" title="这是一只猫" alt="图片是一堆猫" />

HTML最基础的入门(上)的更多相关文章

IM开发者的零基础通信技术入门(一)：通信交换技术的百年发展史(上)
[来源申明]本文原文来自:微信公众号“鲜枣课堂”,官方网站:xzclass.com,原题为:<通信交换的百年沧桑(上)>,本文引用时已征得原作者同意.为了更好的内容呈现,即时通讯网在收录时 ...
vue 快速入门系列 —— vue 的基础应用（上）
其他章节请看: vue 快速入门系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...
Linux基础知识入门
[Linux基础]Linux基础知识入门及常见命令. 前言:最近刚安装了Linux系统, 所以学了一些最基本的操作, 在这里把自己总结的笔记记录在这里. 1,V8:192.168.40.10V1: ...
cmd 与 bash 基础命令入门
身为一个程序员会用命令行来进行一些简单的操作,不是显得很装逼嘛!?嘿嘿~ ヾ(>∀<) cmd 与 bash 基础命令入门简介 CMD 基础命令 ...
IM开发者的零基础通信技术入门(二)：通信交换技术的百年发展史(下)
1.系列文章引言 1.1 适合谁来阅读? 本系列文章尽量使用最浅显易懂的文字.图片来组织内容,力求通信技术零基础的人群也能看懂.但个人建议,至少稍微了解过网络通信方面的知识后再看,会更有收获.如果您大 ...
序言 - PHP零基础快速入门
我为什么要写<PHP零基础快速入门>? 原因: PHP 真心简单,适合零基础的人快速入门掌握,身边的人学习一两周上手开发的比比皆是: 市面上的文章或书籍对初学者并不友好,多半枯燥乏味,我相 ...
Java基础语法入门01
Java基础语法入门01 学习java你要先进行去了解JDK,JRE,JVM JDK Java开发工具包 JRE Java语言开发的运行环境 JVM Java虚拟机,用于Java语言的跨平台所用. 当 ...
贝叶斯公式由浅入深大讲解—AI基础算法入门
1 贝叶斯方法长久以来,人们对一件事情发生或不发生的概率,只有固定的0和1,即要么发生,要么不发生,从来不会去考虑某件事情发生的概率有多大,不发生的概率又是多大.而且概率虽然未知,但最起码是一个确定 ...
Hadoop基础-MapReduce入门篇之编写简单的Wordcount测试代码
Hadoop基础-MapReduce入门篇之编写简单的Wordcount测试代码作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 本文主要是记录一写我在学习MapReduce时的一些 ...

随机推荐

Gulp自动构建前端开发一体化
gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩.格式化.浏览器自 ...
Activity进程和线程之间的关系
1,四大组件并不是程序(进程)的全部,只是他的零件. 2,应用程序启动后,将创建ActivityThread主线程. 3,同一包中的组件将运行在想通的进程空间里面. 4,不同包中的组件可以通过一定的方 ...
android中设置ListView的选中的Item的背景颜色
ListView中没有默认的选择颜色,只有选择Item后的焦点颜色,鼠标点击时Item有颜色,放开鼠标后颜色也就没有了,要实现放开鼠标后选择项的背景还是有颜色的. 1.配置main.xml <? ...
如何给对话框中的控件发送消息呢？Windows消息分类
以博文CTabCtrl中介绍的那样,给Tab添加子对话框来显示Tab内容.那么如果这个子对话框中含有个CTreeCtrl控件,有个Button控件,我想要模拟给这两个控件发送消息,该怎么办呢?直接把给 ...
BNU OJ 51003 BQG's Confusing Sequence
二进制++高精度取模 #include<cstdio> #include<cstring> #include<algorithm> using namespace ...
第四弹：overfeat
overfeat是在AlexNet出现后,推出来的模型,其不仅用于物体分类,来用于定位,检测等,可以说是一个涉及很多应用场景的通用模型,值得看看. 本文将从两个方面来讲解,第一部分从论文角度来说一说, ...
PHP中对mysql预编译查询语句的一个封装
原文地址:http://chen-shan.net/?p=474 为了防止sql注入,我们都使用过mysqli这个类,但是每次都需要绑定参数,绑定结果等,比较麻烦,所以可以把这些重复的语句封装成一个函 ...
Jquery 源码学习
https://www.youtube.com/watch?v=qeMFEz_ufZc http://stackoverflow.com/questions/7194784/analysing-the ...
Cantor表 1083
题目描述 Description 现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的.他是用下面这一张表来证明这一命题的: 1/1 1/2 1/3 1/4 1/5 - 2/1 2/ ...
iOS开发——获取手机当前WiFi名和MAC地址
获取手机WiFi信息. iOS9以前的方法,还是能用,警告就警告吧!iOS9以后使用的是苹果最新的API框架,NetworkExtension/NEHotspotHelper.h,这个框架,第一次开放 ...

HTML最基础的入门(上)