上节课的知识复习

  • 互联网的原理：服务器、浏览器、HTTP。知道网页文件是真实的物理存在，用HTTP请求这个文件。

要知道网址的含义：http://www.iqianduan.cn/aaa

请求哪个文件？

请求的是iqianduan.cn服务器上的aaa文件夹中的index.html文件。拓展一下，服务器可以进行默认页面的配置，比如配置为default.html或者default.php等等。但是默认的是index.html。

HTML页面是真正的传输到了你的电脑里面进行渲染的，保存这些文件的文件夹，临时文件夹。

  • 纯文本： 只有字，没有样式。txt、html、java、php、css、js等等。能用记事本打开，并且打开之后不是乱码的，就是纯文本文件。

  • HTML是负责描述语义的 ： <h1>我是一个主标题</h1>功能是给文本增加“主标题”的语义，而不是变大黑粗。

p的功能是增加“段落”的语义。

  • Sublime使用： 任何的纯文本编辑器都能编辑网页html文件。学习的是编程，而不是某种软件。

  • 骨架：

    <!DTD>

    <html>

       <head>

       </head>

       <body>

       </body>

    </html>
  • DTD： HTML4.01 3种 ， XHTML1.0 3种。

XHTML1.0明确的规定了标签名必须小写、所有的属性都是双引号封闭、自封闭结尾反斜杠。

strict : 严格版本，font、b、u、i等不能使用了。

<b>加粗文字</b>

<u>下划线文字</u>

<i>倾斜文字</i>

2007年之前，就是用这些标签写页面的。但是，2007~08就被废弃了，原因是：DIV+CSS，

我们希望HTML标签只负责语义，而不要负责样式。而b、u、i明显的带有“样式色彩”，所以08年开始，就被废弃了。strict版本中，严格不需使用b、u、i。但是，我们要在页面上巧妙的使用一下b、u、i（css钩子），所以我们使用transitional版本。

  • 字符集： utf-8和gb2312。 字符库收录文字多少： utf-8 > gb2312  ； 文件尺寸： gb2312 < utf-8。

    • gb2312没有被废弃，很明显qq.com使用gb2312，追求打开速度快。

  • 关键字、页面描述

<meta name=”keywords” content=”手机,电脑” />

<meta name=”description” content=”页面描述” />

  • 空白折叠现象 和 HTML标签对空格、tab、换行不敏感。

  • h标签和p标签

h标签系列，一共6个

<h1></h1>

    到

<h6></h6>

p标签，段落语义。

所谓的“容器级”和“文本级”不是官方的分类，而是有经验的程序员自己分出来的类别。

有一些标签，里面什么都能放置，非常的大气； → 容器级

有一些标签，里面只能放置文本，虽然放置别的东西，浏览器可能不报错，但是也没人这么做。 → 文本级

记住：HTML4.01层面，容器级标签，只有div、li、dd、dt、td。其余的标签，都是文本级的。

图片

1.基本使用

在HTML页面中要插入图片，使用img标签。

<img src="shishi.jpg" />

img是英语image的简称，图片的意思

src是英语source的简称，资源的资源

src属性中的值，就是图片的路径。

img标签是一个自封闭标签，也称为单标签，并不是一对儿。

<img />

我们现在接触的自封闭标签就两个：

<meta />和<img />

网页中能插入的图片格式：jpg、jpeg、png、bmp、gif。 不能插入的图片格式：psd

2.图片的宽度和高度

不设置宽度、高度：

<img src="shishi.jpg" />

通过width设置宽度、height设置高度：

<img src="shishi.jpg" width="500" height="300" />

昨天学的语法，键值对：

<img k=”v” k=”v” k=”v” />

如果我们仅仅设置其中一个属性，另一个属性将按比例自动设置。

<img src="shishi.jpg" width="100" />

3.图片是“文字”

图片img元素，不是普通的html标签，和p这种东西不一样，img标签实际上也是一个文字。

img标签，就是文字：

<body>

   <img src="shishi.jpg" alt="" />

   <img src="shishi.jpg" alt="" />

   <img src="shishi.jpg" alt="" />

</body>

去掉空格：

<img src="shishi.jpg" alt="" /><img src="shishi.jpg" alt="" /><img

src="shishi.jpg" alt="" />

4.相对路径和绝对路径

1.相对路径

img的src属性，描述图片文件在哪儿。

从html页面出发，找到图片。这种路径的描述方式，叫做相对路径。

当html文件和图片文件在同一个目录下，那么非常简单，可以直接输入文件名<img src=”shishi.jpg” />

当图片在更深一层的文件夹中的时候：

写法就是写上文件夹名字：

<img src="images/longlong.jpg" />可以有很多的层次：<img src="images/aaa/bbb/1.jpg" / >

如果图片在页面更浅一层的文件夹中：<img src="../jiehunzhao.jpg" />

路径可能比较复杂，没有关系一层一层找就可以了：

<img src="../../images/aaa/bbb/1.jpg" />

需要注意的是：  ** ../只能出现在开头**。

2.绝对路径

所有以http://开头的路径， 或者以/开头的路径，我们都称为绝对路径。

<img src="http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png" />

注意http:// 不能省略。

很明显，我们现在不是从html页面出发找到图片，而是描述了一个绝对的一个网址，那么称为“绝对路径”。

以/开头的路径，表示当前服务器的根目录。

<img src=”1.jpg” />不等价于：<img src=”/1.jpg” />

解释：

<img src=”1.jpg” />表示从当前页面出发，找到1.jpg。

<img src=”/1.jpg” />表示从当前服务器根目录出发，找到1.jpg

等价于绝对地址：

<img src=”http://www.shaoshanhuan.com/images/1.jpg” />

不要去考虑直接插入硬盘中的文件：

<img src=”file://d:/1.jpg” />不要学，没有用，因为服务器上没有d盘，你的路径不适用服务器的情况。并且也不方便用u盘考来考去。这是一个错误的路径。

看一道面试题，腾讯2014校园招聘笔试题：

img src=”../../photo/1.png” />

5.alt属性

<img src="sdf34.jpg" alt="这是一只考拉" />

alt是英语alternate替代的意思，就是当图片不能被显示的时候（可能因为路径错误、服务器错误），显示的替代文字：



超级链接

1.基本使用

超级链接，把网页和网页之间连起来了，互联网是“网”的原因。

使用a标签来制作，a是英语anchor锚的意思。

<a href="temp.html">我是超级链接</a>

href是英语hypertext reference超文本地址的意思。

类似于img的src。

一定不要写成herf。所以你就要读做“何瑞福”，不要读作“喝er夫”。

href里面的值，就是要跳转到的页面的地址，相对路径、绝对路径都行：

<a href="../../aaa/bbb/ccc/1.html">链接</a>

<a href="/1.html">链接</a>

<a href="http://www.sina.com.cn/">链接</a>

2.常见属性

  • title属性，就是鼠标悬停时候的提示文本

<a href="temp.html" title="快点我，还等什么！！">我是超级链接</a>

target属性，设置是否在新窗口中打开连接，如果想在新窗口中打开链接  target=”_blank”

<a href="temp.html" target="_blank">我是新窗口打开的链接</a>
  • target是英语目标的意思，blank就是空白新窗口的意思。有一个下划线。

3.页面内的锚点

可以通过下面的这种特殊形式的a，在页面中放置锚点：

<a name="hysh"></a>

a里面有一个name属性，name是英语名字的意思。而没有href和链接中的文字。

这种a标签叫做锚点。

可以使用网址：

10_页面内锚点.html#hysh

来快速定位这个锚点。注意看下图的地址栏最后的部分：

可以在页面的其他部分，制作跳转到这个锚点的超级链接：

<a href="#yysy">查看演艺生涯</a>

甚至，可以在其他页面制作这个超级链接：

<a href="10_页面内锚点.html#yysy">查看演义生涯</a>

最后说一下，如果我们想要把一个段落中所有的文字，都是超级链接：

应该p包裹a，因为我们感觉p比a大，a就是一个文字：

<p>

   <a href="">我是段落的文字</a>

</p>

而不要：

<a href="">

   <p>我是段落的文字</p>

</a>

列表

列表有三种

1.无序列表

<ul>

    <li>百度</li>

    <li>百度</li>

    <li>百度</li>

    <li>百度</li>

</ul>

ul是英语unordered list，无序列表。表达的是没有顺序关系的列表。

li是英语list item列表项的意思。

这是我们学习的第一个组合的标签：

<ul>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

ul的儿子标签，只能是li，不能是别的东西：

错误：

<ul>

    <p></p>

    <p></p>

    <p></p>

    <p></p>

</ul>

错误：

<ul>

   <h3>中国著名城市</h3>

   <li>北京</li>

   <li>上海</li>

   <li>广州</li>

</ul>

正确的：

   <h3>中国著名城市</h3>

<ul>

   <li>北京</li>

   <li>上海</li>

   <li>广州</li>

</ul>

错误的：

<ul>

    中国著名城市

   <li>上海</li>

   <li>广州</li>

</ul>

li的数量没有限制，可以有无限多个。

li是一个非常经典的容器级标签，里面可以防止任何东西，甚至，再放置一个ul（二级列表），甚至三级列表。

注意下面的正确写法（这个案例想写对，真的不容易）：

<body>

	<ul>

		<li>

			<h4>直辖市</h4>

			<ul>

				<li>北京</li>

				<li>天津</li>

				<li>上海</li>

				<li>重庆</li>

			</ul>

		</li>

		<li>

			<h4>广东省</h4>

			<ul>

				<li>广州</li>

				<li>深圳</li>

				<li>东莞</li>

				<li>珠海</li>

				<li>佛山</li>

			</ul>

		</li>

		<li>

			<h4>江苏省</h4>

			<ul>

				<li>南京</li>

				<li>无锡</li>

				<li>苏州</li>

				<li>常州</li>

				<li>扬州</li>

			</ul>

		</li>

	</ul>

</body>

网站上的使用：

至于小圆点，如何变化，是CSS的事情，不是HTML的事情。

2.有序列表

ol就是ordered list

<ol>

    中国著名城市

   <li>上海</li>

   <li>广州</li>

</ol>

所有的注意事项和ul一样一样的。

3.定义列表

定义列表表示定义某事的一个列表。

	<dl>

		<dt>HTML语言</dt>

		<dd>HTML语言是基本的描述文字语义的语言，负责页面的结构</dd>

		<dt>CSS语言</dt>

		<dd>CSS是负责描述页面样式的语言</dd>

		<dt>JavaScript语言</dt>

		<dd>JavaScript是负责描述页面交互的语言</dd>

	</dl>

dl是英语definition list定义列表的意思；

dt是英语definition title定义标题的意思；

dd是英语definition description定义描述的意思；

dl中，交替出现dt和dd。dd是dt的解释说明，dd负责解释、描述、定义dt。

也可以单独成为一个dt和dd组，大部分前端工程师更喜欢这样的：

	<h4>中国著名女演员</h4>

	<ul>

		<li>

			<dl>

				<dt>杨幂</dt>

				<dd>出生在北京，老公是刘恺威</dd>

				<dd>出演过仙剑奇侠传3</dd>

			</dl>

		</li>

		<li>

			<dl>

				<dt>刘诗诗</dt>

				<dd>老公是吴奇隆</dd>

				<dd>出演过步步惊心</dd>

			</dl>

		</li>

		<li>

			<dl>

				<dt>angelababy</dt>

				<dd>老公是黄晓明</dd>

			</dl>

		</li>

	</ul>

这样的好处，就是样式更好管理一些（学CSS之后你就懂了）。

网页中的应用：

dd和dt都是非常经典的容器级标签，里面什么都能放。

放什么标签，和长得样子没有关系，一切看语义！！

表单

表单中的所有元素，都要放在一个form标签中：

<form>

</form>

form就是英语表格的意思。这个标签是一个功能型的标签，不是一个结构型的标签。form标签是后台哥哥来进行配置的。Ajax课程的第一天，我们讲解PHP语言，将介绍更多的表单提交的原理。那时候你就知道了form表单的两个属性method、action，现在先不说。

1.单行文本框

<input type="text" />

input是英语输入的意思，表示这是一个输入控件，所谓的控件就是用户能点的、能填的东西。

type是英语类型的意思，text是文本的意思。

这又是一个自封闭标签，不是一个标签对儿。因为它并不需要给别的文字添加语义。

至此，我们已经学习了3个自封闭标签：

<meta name=”keywords” content=”手机,电脑” />

<img src=”1.jpg” />

<input type=”text” />

value属性表示默认有的值：

<input type="text" value="haha"/>

2.单选按钮

<input type="radio" name="sex"/> 男

<input type="radio" name="sex"/> 女

你会发现，当行文本框和单选按钮，非常像

<input type=”text” />

<input type=”radio” />

radio是收音机的意思，按其中的一个键，其他键就弹起来，所以我们的计算机就沿用了这个名字。

单选按钮，必须是互斥的，不能同时选中多个，所以它们必须有相同的name属性。至于是什么name无所谓，但是必须相同。

说道一个提升用户体验的东西，叫做label标签。点字的时候，小圆点就能被选择上。

<input type="radio" name="sex" id="nan"/>

<label for="nan">男</label>

label就是标签的意思，id就是id的意思。

现在，这个for属性和id的值是一样的，产生了绑定关系。这是我们学习的第一个有绑定关系的标签，后面还要学习一个。就把某一个label和input产生了绑定关系。

3.复选框

<input type="checkbox" name="hobby" /> 篮球

<input type="checkbox" name="hobby" /> 足球

<input type="checkbox" name="hobby" /> 羽毛球

checkbox就是复选框的意思，name属性虽然现在感觉没有啥用，但是还是应该设置为相同的。

4.密码框

<input type=”password” />

[图片上传失败...(image-bed414-1550760431599)]

5.三种按钮

<input type="button" value="我是一个普通按钮哈哈" />

<input type="submit" value="提交按钮哈哈" />

<input type="reset" value="复位重置按钮哈哈" />
  • button普通按钮
  • submit提交按钮
  • reset重置按钮

HTML4.01层面就是上面这些input系列：



<input type="text" />

<input type="radio" />

<input type="checkbox" />

<input type="password" />

<input type="button" />

<input type="submit" />

<input type="reset" />

6.下拉列表

<select>

   <option>1950</option>

   <option>1951</option>

   <option>1952</option>

   <option>1953</option>

   <option>1954</option>

</select>

select表示选择的意思，option是选项的意思。

这是一个组合使用的标签组，和ul、li的关系是一样的。

7.文本域

能够换行的输入文本的控件：

<textarea cols="40" rows="20">这家伙很懒，什么都没留下</textarea>

text文本，area区域。cols多少列，rows多少行，我们一般都是用css来控制。

这是一个对儿标签，里面的内容是默认文字。

HTML4.01层面（XHTML1.0层面），就这些，表单的东西，我们HTML5将扩充。

表格

1.基本表格

table就是表格、桌子；

tr就是table row表格行的意思；

td就是table dock表格小格的意思。

每一个tr就是一行，每行中的小格格就是td

	<table border="1">

		<tr>

			<th>品牌</th>

			<th>价格</th>

			<th>类别</th>

		</tr>

		<tr>

			<td>宝马</td>

			<td>30w</td>

			<td>高级轿车</td>

		</tr>

		<tr>

			<td>奔驰</td>

			<td>50w</td>

			<td>高级轿车</td>

		</tr>

		<tr>

			<td>现代</td>

			<td>20w</td>

			<td>中级轿车</td>

		</tr>

		<tr>

			<td>QQ</td>

			<td>2w</td>

			<td>低级轿车</td>

		</tr>

	</table>

这组标签三层嵌套。td的数量是一样多的。具有表头语义的小格格，用th替代td即可。

		<tr>

			<th>品牌</th>

			<th>价格</th>

			<th>类别</th>

		</tr>

		<tr>

			<td>宝马</td>

			<td>30w</td>

			<td>高级轿车</td>

		</tr>

本质上讲，th和td都是小格格，只不过th有表头小格格的语义；

2.单元格的合并

rowspan 行跨度

colspan 列跨度

小练习，制作下面的表格：

<!--题目一-->

<table border="1">

	<tr>

		<td>1</td>

		<td rowspan="2">2</td>

	</tr>

	<tr>

		<td>3</td>

	</tr>

</table>

<!--题目二-->

<table border="1">

	<tr>

		<td colspan="2">1</td>

	</tr>

	<tr>

		<td>2</td>

		<td>3</td>

	</tr>

</table>

<!--题目三-->

<table border="1">

	<tr>

		<td rowspan="2">1</td>

		<td>2</td>

	</tr>

	<tr>

		<td>3</td>

	</tr>

</table>

HTML还剩余的知识：

表格的其余组件比如tbody、thead

div、span标签

HTML注释、转义字符

废弃标签介绍

等等

思路：先输出表格，再考虑行跨度(rowspan)和列跨度问题（colspan）。

<tr>

			<th>万公顷</th>

			<th>万亩</th>

			<th>万公顷</th>

			<th>万亩</th>

		</tr>		

		<tr>

			<td>北京</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

		</tr>

		<tr>

			<td>北京</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

		</tr>

		<tr>

			<td>北京</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

		</tr>

		<tr>

			<td>北京</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

			<td>123</td>

		</tr>

	</table>

02_互联网基本原理和HTML入门的更多相关文章

  1. 01_互联网基本原理和HTML入门

    从"上网"说开去 1.上网就是请求数据 老师现在进行一个互联网原理的整体感知的教学,你注意,整体感知中,一些具体的细节,可能令你没有安全感(很多的知识盲点).没有关系,老师进行的是 ...

  2. iOS开发UI篇—程序启动原理和UIApplication

    iOS开发UI篇—程序启动原理和UIApplication   一.UIApplication 1.简单介绍 (1)UIApplication对象是应用程序的象征,一个UIApplication对象就 ...

  3. iOS开发UI篇—程序启动原理和UIApplication1

    iOS开发UI篇—程序启动原理和UIApplication   一.UIApplication 1.简单介绍 (1)UIApplication对象是应用程序的象征,一个UIApplication对象就 ...

  4. 程序启动原理和UIApplication

    iOS开发UI篇—程序启动原理和UIApplication   一.UIApplication 1.简单介绍 (1)UIApplication对象是应用程序的象征,一个UIApplication对象就 ...

  5. Jquery+ajax+json+servlet原理和Demo

    Jquery+ajax+json+servlet原理和Demo 大致过程: 用户时间点击,触发js,设置$.ajax,开始请求.服务器响应,获取ajax传递的值,然后处理.以JSON格式返回给ajax ...

  6. Mybatis插件原理和PageHelper结合实战分页插件（七）

    今天和大家分享下mybatis的一个分页插件PageHelper,在讲解PageHelper之前我们需要先了解下mybatis的插件原理.PageHelper 的官方网站:https://github ...

  7. 流水线技术原理和Verilog HDL实现（转）

    源:流水线技术原理和Verilog HDL实现 所谓流水线处理,如同生产装配线一样,将操作执行工作量分成若干个时间上均衡的操作段,从流水线的起点连续地输入,流水线的各操作段以重叠方式执行.这使得操作执 ...

  8. 计算机网络原理和OSI模型与TCP模型

    计算机网络原理和OSI模型与TCP模型 一.计算机网络的概述 1.计算机网络的定义 计算机网络是一组自治计算机的互连的集合 2.计算机网络的基本功能 a.资源共享 b.分布式处理与负载均衡 c.综合信 ...

  9. iOS-程序启动原理和UIApplication

    iOS开发UI篇—程序启动原理和UIApplication   一.UIApplication 1.简单介绍 (1)UIApplication对象是应用程序的象征,一个UIApplication对象就 ...

随机推荐

  1. 惊呆了，Servlet Filter和Spring MVC Interceptor的实现居然这么简单

    前言 创建型:单例模式,工厂模式,建造者模式,原型模式 结构型:桥接模式,代理模式,装饰器模式,适配器模式,门面模式,组合模式,享元模式 行为型:观察者模式,模板模式,策略模式,责任链模式,状态模式, ...

  2. 百度api实现人脸对比

    第一步(注册账号): 点这里注册百度云账号 如图: 创建应用得到 APP_ID API_KEY SECRET_KEY   第二步(代码): import requests import base64 ...

  3. 深入浅出node.js游戏服务器开发1——基础架构与框架介绍

    2013年04月19日 14:09:37 MJiao 阅读数:4614   深入浅出node.js游戏服务器开发1——基础架构与框架介绍   游戏服务器概述 没开发过游戏的人会觉得游戏服务器是很神秘的 ...

  4. mysql参数max_binlog_cache_size设置不当引发的血案

    日常运维中的坑真是防不胜防,不一小心就遇到别人给你挖的坑.最近又遇到经验不足的DBA不知道从哪拷贝的配置文件(据说是当时参加某培训机构视频培训是资料里的模板,真的是误人子弟呀),其中把max_binl ...

  5. Python数据分析入门与实践 学习

    pandas是一个Python语言的软件包,在我们使用Python语言进行机器学习编程的时候,这是一个非常常用的基础编程库.本文是对它的一个入门教程.pandas提供了快速,灵活和富有表现力的数据结构 ...

  6. apache虚拟主机配置-域名/IP和端口两种配置

    由于百度上有非常详细的资料,我这里就转载而已:https://jingyan.baidu.com/article/4f7d5712d48a191a201927e0.html

  7. tp5中“前置操作”和“钩子函数”的区别

    1.实行顺序: 以下都是标为删除前的操作: 点击删除  ->  前置操作  ->  删除方法(用模型删除)  ->  触发钩子函数(删除)  ->  删除成功 2.传入的参数: ...

  8. 网络找的 关于 “中吹” Janus Dongye

    看了这篇文章,感觉错过了一个精彩的人生. Janus Dongye, Coding Peasant at Universityof Cambridge (2012-present)(剑桥码农,2012 ...

  9. Oracle数据库字段保留3位小数，程序读出来显示4位小数

    需求 项目需求从字段2位小数,改成3位小数,这事儿好办,数据库噼里啪啦敲了一行代码,发现居然报错,原因是不能修改字段精度问题,然后使用了冒泡排序,搞定 --新增临时字段 ,); --将原字段内容拷贝至 ...

  10. ElasticSearch 镜像 & 安装 & 简易集群

    目录 ES镜像 JDK镜像 安装 1. 安装JDK 2. 解压安装ES 3. 配置 4. 新建用户 5. 启动 踩坑 1. root启用报错 2. max file descriptors [4096 ...