一、互联网原理

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

过程：在本机计算机浏览器上输入网址，发送一个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. JAVA实现二进制，十六进制输出

    public class Main { /** * @param args */ public static void main(String[] args) { // TODO Auto-gener ...

  2. java调用dll-JNA

    介绍 给大家介绍一个最新的访问本机代码的 Java 框架 —JNA . JNA(Java Native Access) 框架是一个开源的 Java 框架,是 SUN 公司主导开发的,建立在经典的 JN ...

  3. CentOS新增开机启动项

    编辑rc.local文件 vi /etc/rc.d/rc.local 例如 #!/bin/sh # # This script will be executed *after* all the oth ...

  4. HDU 5166 Missing number 简单数论

    Missing number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) [ ...

  5. Android Studio的使用（三）--包不分级、修改包名

    1.如果不喜欢将包逐级展开的话,可以将每一个包名都完整展现出来,只需要勾选Flatten Packages. 2.修改包名 3.填写新的包名 4.点击确认

  6. ecstore中kvstore之memcached

    memcached的安装 详细见 http://blog.csdn.net/motian06/article/details/17558831 memcached扩展的安装 详细见 http://bl ...

  7. ural1671 Anansi's Cobweb

    Anansi's Cobweb Time limit: 1.0 secondMemory limit: 64 MB Usatiy-Polosatiy XIII decided to destroy A ...

  8. Firefox 插件 JSview是一套比较实用的JS，CSS文件查看工具，很方便，很快捷地查看页面引用了哪些文件，作为Web前端开发者是一套必备的插件，由于Firefox升级过快，插件很快不兼容了，这里对插件做了一些调整，可以兼容最新Firefox浏览器（目前FireFox 21）

    JSView Firefox Plugins Download  点击下载

  9. Docker Swarm集群

    Docker Swarm集群 IP 10.6.17.11  管理节点 IP 10.6.17.12   节点A IP 10.6.17.13   节点B IP 10.6.17.14   节点C 安装 Sw ...

  10. 通过 File API 使用 JavaScript 读取文件

    原文地址:http://www.html5rocks.com/zh/tutorials/file/dndfiles/ 简介 HTML5 终于为我们提供了一种通过 File API 规范与本地文件交互的 ...