Day 30 HTML

一、 HTML

网络软件结构：

CS：Client-Server（客户端-服务端），例如：QQ、手机微信、360安全卫士等等。

特点：1）需要手动安装客户端；2）可以缓存数据，减轻服务器压力；

BS：Browser-Server（浏览器-服务器），例如：淘宝、京东等。

特点：1）不需要安装客户端，直接通过浏览器访问；2）必须要网络；

1.1 什么是HTML

HTML是用来制作网页的工具。

二、HTML的基本语法

2.1 HTML结构

1）一个html文件有且只有一个html标签。这个就是HTML的根标签。

2）一个HTML文件主要由两部分组成：文件头和文件体。文件头就是<head>标签包含的部分，它是用来告诉浏览器如何解析HTML文件；文件体就是<body>标签包含的部分，它是用来存放网页显示的内容。

2.2 HTML注释

HTML注释使用一对尖括号表示。

注释可以放在HTML文件中的任意地方，HTML解析器不会解析注释内容。

快捷键：ctrl + / 添加和取消注释

2.3 定义标签

HTML标签用于标记HTML元素。HTML标签名使用一对尖括号括起来。例如：

<b>hell wrold</b>

注意事项：

1） HTML标签必须成对存在。例如：<b>和</b>；

2） HTML开始标签和结束标签中间是标签内容。标签内容可以是文本，也可以是其他标签；

3）标签名对大小写不敏感，<b>和<B>是一样的，但是建议标签名使用小写。

4）标签名是固定的，不能够任意修改；

三、常用的标签

3.1 基本标签

在HTML中，任何数量的空格都被按一个空格计数。另外，空行也会被当成一个空格被处理。所以，如果要输出多个空格，可以使用字符实体来表示。

3.2 字符实体

HTML中有一些字符有特殊含义，例如：左尖括号<、右尖括号>等等。为了能够在HTML文本中显示它们，我们需要使用字符实体。字符实体有三部分：&符号 + 实体名 + 英文分号。如果要在HTML中显示小于号，那么就需要这样写：<

下面列出一些常见的字符实体：

另外，还有一些其他比较常用的实体字符：

注意：字符实体是区分大小写的。

3.3 格式化标签

温馨提示：如果要查看一个网页是如何实现的，可以在网页上鼠标右键，选择“查看网页源代码”即可。随后你会看到一个弹出窗口，窗口内就是该网页的HTML代码。

3.4 HTML属性

每一个HTML标签都可以拥有属性，属性为HTML元素提供了额外信息。标签属性以“名称=值”的形式出现。并且属性总是在开始标签中指定。

<font size="7">hello</font>

1）属性值应该使用引号引起来，单引号和双引号都可以；注意事项：

2）一个标签可以指定零个或多个属性，多个属性之间使用空格隔开。

3）属性名和属性值对大小写不敏感，但是，建议使用小写。

3.5 列表标签

3.5.1 无序列表

无序列表始于<ul>标签，每一个列表项始于<li>标签。<li>标签内可以是普通文本，也可以包含其他标签。

无序列表的type属性用于指定列表的类型，它有三个值：disc-点、square-方块、circle-圆圈。如果没有指定type属性，默认类型为disc。

3.5.2 有序列表

有序列表也是一个列表项，但是列表项使用数字进行标记。有序列表始于<ol>标签，每一个列表项始于<li>标签。同样地，<li>标签内可以是普通文本，也可以包含其他标签。

无序列表的type属性用于指定列表的类型，它有五个值：1、a、A、i、I。如果没有指定type属性，默认类型为1。

3.5.3 定义列表

自定义列表不仅仅是一个项目，而且是项目和注释的组合。定义列表以<dl>标签开始。每个自定义列表项以<dt>标签开始。每个自定义列表项的定义以<dd>标签开始。

浏览器显示效果：

3.6 超链接标签

HTML使用超链接连接网络上的其他资源，可以是一个HTML页面，一幅图像，一个声音或视频文件等等。定义超链接标签的格式：

<a href="url">text to be display</a>

href属性用于指定链接资源的地址；<a>和</a>之间的内容被作为超链接来显示。

3.6.1 超链接标签的工作原理

1) 浏览器解析a标签的时候，如果a标签的href属性是以http开头，那么浏览器就会启用http协议的解析器去解析该网址。

首先浏览器会从本地的Hosts文件（c:/windows/system32/drivers/etc）查找是否存在该网址对应的IP。如果没有就从网络服务提供商的DNS服务器中查找是否存在该网址所对应的IP。如果DNS服务器也没有，那么浏览器就显示“无法访问此网站”，否则，浏览器就直接请求该IP对应的服务器。

2) 如果a标签的href属性不是以http开头，也不是以其他协议开头，那么浏览器就会启用file协议的解析器去解析该网址；

3) 如果a标签的href属性不是以http开头，而是以其他协议开头，浏览器就会去计算机本地的注册表去查找是否存在处理该协议的应用程序。如果存在的话，浏览器就会启用该协议的默认的应用程序；

3.6.2 超链接标签的target属性

target属性用于指定资源的打开方式。它的值可以是：

除了framename以外，其他值都是以下划线_开头，任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略。因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

3.6.3 锚点定位

锚点定位就是可以定位到网页的某一个位置。这样使用者就无需不停的滚动页面来寻找他们需要的信息。实现步骤：

第一步：定义锚点。

name属性用于创建命名的锚。注意：不需要指定href属性。

第二步：将#符号和锚名称添加到URL末端，这样就可以跳转到锚位置。例如：

3.7 图像标签

在HTML 中，图像由<img>标签定义。其定义格式：

一般img是空标签，它只会包含属性，并且没有闭合标签。

3.7.1 src属性

src属性用于指定图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的images目录中，那么其URL为 http://www.w3school.com.cn/images/boat.gif。

3.7.2 alt属性

alt属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。

如果boat.gif不存在，那么在浏览器上就会显示替换文本的内容。

3.7 表格标签

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。<td>用来指定表格数据，即数据单元格的内容，可以是文本、图像、列表、子表格等等。

<thead>定义表格头，可以没有；<tfoot>定义表格底部，也是可以没有；<tbody>定义表格体，至少有一个。

例如：定义一个两行两列的表格。

浏览器显示效果：

3.7.1 表格边框属性

border：设置表格边框的宽度。默认情况下，如果没有指定显示边框，表格将不会显示边框。

cellspacing：设置单元格与单元格之间的距离；

3.7.2 跨行和跨列

跨行和跨列需要设置td标签的两个属性：

rowspan：跨行，即指定单元格向下合并；

colspan：跨列，即指定单元格向右合并；

例如：定义一个表格，显示学员的成绩和人品。

<table border="1" width="300px" height="50px" align="center" cellspacing="0">
    <caption align="bottom"><h3>期末考试+人品测试</h3></caption>
    <tr>
        <th>姓名</th>
        <th>分数</th>
        <th>人品</th>
    </tr>
    <tr align="center">
        <td>张三</td>
        <td>90</td>
        <td>还行</td>
    </tr>
    <tr align="center">
        <td rowspan="2">李四</td>
        <td>100</td>
        <td>不行</td>
    </tr>
    <tr align="center">
        <td>80</td>
        <td>不错</td>
    </tr>
    <tr align="center">
        <td>平均成绩</td>
        <td colspan="2" align="left">90分</td>
    </tr>
</table>

运行效果如下图所示：

3.8 框架标签

如果把一个HTML页面比作一个框架，那么通过使用框架可以把一个页面划分成不同部分，每一部分就是一个单独的框架，并且每个框架之间是互相独立的。

框架标签：

标签	作用
frameset	定义一个框架集，可以包含多个frame
frame	一个frame代表一个页面

在frameset标签中通过指定rows和cols属性把一个页面按照行或列切割成不同的部分。

framset标签属性：

属性	作用
rows	指定每个frame的宽度。如果指定了rows属性，那么就按照行进行切割。它的值可以是像素px、百分比或星号*。
cols	指定每一个frame的宽度。如果指定了cols属性，那么就按照列进行切割。它的值可以是像素px、百分比或星号*。

注意：framset标签不能够包含在body标签里面。

posted @ 2019-02-21 17:50 addit Views(86) Comments(0) 收藏举报

刷新页面返回顶部

addit