一、互联网原理

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

过程：在本机计算机浏览器上输入网址，发送一个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">

2

组织：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="" />

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

<img src="../../cat.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最基础的入门(上)的更多相关文章

  1. IM开发者的零基础通信技术入门(一)：通信交换技术的百年发展史(上)

    [来源申明]本文原文来自:微信公众号“鲜枣课堂”,官方网站:xzclass.com,原题为:<通信交换的百年沧桑(上)>,本文引用时已征得原作者同意.为了更好的内容呈现,即时通讯网在收录时 ...

  2. vue 快速入门 系列 —— vue 的基础应用（上）

    其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...

  3. Linux基础知识入门

    [Linux基础]Linux基础知识入门及常见命令.   前言:最近刚安装了Linux系统, 所以学了一些最基本的操作, 在这里把自己总结的笔记记录在这里. 1,V8:192.168.40.10V1: ...

  4. cmd 与 bash 基础命令入门

    身为一个程序员会用命令行来进行一些简单的操作,不是显得很装逼嘛!?嘿嘿~ ヾ(>∀<) cmd 与 bash 基础命令入门       简介       CMD 基础命令          ...

  5. IM开发者的零基础通信技术入门(二)：通信交换技术的百年发展史(下)

    1.系列文章引言 1.1 适合谁来阅读? 本系列文章尽量使用最浅显易懂的文字.图片来组织内容,力求通信技术零基础的人群也能看懂.但个人建议,至少稍微了解过网络通信方面的知识后再看,会更有收获.如果您大 ...

  6. 序言 - PHP零基础快速入门

    我为什么要写<PHP零基础快速入门>? 原因: PHP 真心简单,适合零基础的人快速入门掌握,身边的人学习一两周上手开发的比比皆是: 市面上的文章或书籍对初学者并不友好,多半枯燥乏味,我相 ...

  7. Java基础语法入门01

    Java基础语法入门01 学习java你要先进行去了解JDK,JRE,JVM JDK Java开发工具包 JRE Java语言开发的运行环境 JVM Java虚拟机,用于Java语言的跨平台所用. 当 ...

  8. 贝叶斯公式由浅入深大讲解—AI基础算法入门

    1 贝叶斯方法 长久以来,人们对一件事情发生或不发生的概率,只有固定的0和1,即要么发生,要么不发生,从来不会去考虑某件事情发生的概率有多大,不发生的概率又是多大.而且概率虽然未知,但最起码是一个确定 ...

  9. Hadoop基础-MapReduce入门篇之编写简单的Wordcount测试代码

    Hadoop基础-MapReduce入门篇之编写简单的Wordcount测试代码 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本文主要是记录一写我在学习MapReduce时的一些 ...

随机推荐

  1. 热门IOS 第三方库

    综合github上各个项目的关注度与具体使用情况,涵盖功能,UI,数据库,自动化测试,编程工具等类型,看完,还敢自称”精通iOS开发”吗? https://github.com/syedhali/EZ ...

  2. unity3d 多人寻路堵塞堆叠问题

    使用unity提供的NavMeshAgent寻路,当有多个agent一起寻路时总会出现堵塞堆叠的问题. 本人使用了一个非常粗劣简单的方案解决此问题,当然跟魔兽的寻路完全没得比,但保证有比较好的性能,且 ...

  3. [iOS]C语言技术视频-14-指针变量高级用法(函数指针)

    下载地址: 链接: http://pan.baidu.com/s/1ykyg2 密码: fg5t

  4. python之路：进阶 二

        c = collections.Counter(  Counter({ b = collections.Counter(  b.update(c)   Counter({ Counter({  ...

  5. Mysql update语句赋值嵌套与在表列中数据后面增加数据

    1.Mysql update语句赋值嵌套select  点击(此处)折叠或打开 update a set col=(select col from a where id='5') where id&g ...

  6. pymongo一次更新多条数据

    db.collection.update(query, update, upsert, multi) pymongo使用示例 db.collection.update({}, {'$set' : {' ...

  7. mysql忘记密码及无法使用程序连接

    select(一)忘记root密码 很久之前装了mysql,后来做项目的时候,一直木有用到,就把密码给忘记了. 网上各种找,最终解决了这个问题了,记录下. 1)打开services,找到mysql服务 ...

  8. (简单) POJ 3259 Wormholes，SPFA判断负环。

    Description While exploring his many farms, Farmer John has discovered a number of amazing wormholes ...

  9. input的onchange事件实际触发条件与解决方法

    input中onchange事件已经属于元老级别了,并且现在同onclick一样使用频率很高,然而onchange的机制实际上有很多童鞋并不清楚,我们通过实例来分析这个事件的特征. 触发onchang ...

  10. 170112、solr从服务器配置整合到项目实战

    整合网上资源后 100%可运行的配合步骤,部署在tomcat 为例. 一:下载solr,版本为5.2.1 地址:http://pan.baidu.com/s/1eRAdk3o 解压出来. 1.在解压的 ...