HTML

第1章 网页的构成

1.1 概念：B/S 与 C/S

1.1.1 现在的软件开发的整体架构主要分为B/S架构与C/S架构：

• b/s：浏览器/服务器
  
• c/s：客户端/服务器

客户端：需要安装在系统里，才可使用

浏览器：浏览网页，读取HTML并显示

服务器：处理浏览器的请求

1.1.2 B/S 与 C/S优劣

b/s只要能上网就能使用，因为基本每台电脑都会有浏览器，维护方便。

c/s必须安装在系统中，安装成功才可使用。在新的系统中没有安装不能使用，便携性差，维护成本高。

1.1.3 网页

浏览器中显示的内容，浏览器是网页的展示器。编写好的网页，放在浏览器中即可运行。编写网页我们使用的就是HTML语言。

1.2 网页的构成

第2章 HTML简介

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素

HTML 不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)，由一组> 包围的关键字

HTML网页的后缀名一般为.html

HTML 使用标记标签来描述网页

• HTML文件的结构

• • 为HTML页面中的根标签，所有的HTML网页中的标签都在中。
  • 这里标签用于定义文档的头部，它是所有头部元素的容器。头部元素有
    

第3章 HTML语法

• 标签的语法

标签由英文尖括号 和 > 括起来,如：

html中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多一个 / ,; 还有一些是自结束标签，如：

标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：

里嵌套

，那么

必须放在

的前面。如：

…

注释是不可以嵌套的,如：!-- -->

HTML标签不区分大小写,

• • 和
    是一样的,但万维网联盟（W3C）建议小写。
    

元素模型

第4章 HTML的常用标签

4.1 标题标签

h1>
    .../h1>
    
h2>
    .../h2>
    
h3>
    .../h3>
    
h4>
    .../h4>
    
h5>
    .../h5>
    
h6>
    .../h6>
    

默认占用浏览器的一整行，并且前后要空一行

4.2 段落标签

p>
    两个黄鹂鸣翠柳/p>
    
p>
    是否还没女朋友/p>
    

段落标签也会独占浏览器的一行，而且前后还会空出一行。

使用空的段落标记 p> /p> 去插入一个空行是个坏习惯。用 br /> 标签代替它！

4.3 换行标签

br /> ：是个自结束标签

br />
    

4.4 加粗标签

b>
    天王盖地虎/b>
    

4.5 无序列表

ul type="square">
    
    !-- 定义导航栏 -->
    
    li>
    网页/li>
    
    li>
    新闻/li>
    
    li>
    视频/li>
    
    li>
    贴吧/li>
    
/ul>
    

4.6 有序列表

ol>
    
    li>
    单身久了，坐地铁女孩蹭下肩膀，你连你们的孩子叫什么名字都想好了/li>
    
    li>
    太久没接吻，吃个鸭舌都能感到温柔/li>
    
    li>
    太久没牵手，拿着泡椒凤爪心都会颤抖/li>
    
/ol>
    

4.7 图片标签

img alt="“ src="" title=""/>
    

alt:图片无法显示时显示的描述性文字

src:图片的地址（或路径）。这里分为相对路径和绝对路径。

width和height:设置图片的宽度和高度

(了解) title:鼠标放在图片上时显示的描述性文字

使用相对路径查找目标资源心得

目标文件与当前文件在同一目录下，直接查找使用。

目标文件与当前文件不在同一目录下，先找目标文件父包，再找目标文件

如：父包也不与当前文件在同包下，将父包当成目标文件，继续找父包的父包。以此类推，找到WebContent根目录为止。

补充内容：html中的相对路径与绝对路径

相对路径：以当前文件所在的路径为基准
    .           表示当前文件所在目录
    ..          表示上一级目录
    资源名       表示当前目录下的资源            ./资源名           ./可以省略
    使用../返回上一级
            
绝对路径：
    盘符:\路径1\路径2\文件名         =====>
    >
    >
          错误(真实路径)
    http://ip:port/工程名/资源名    =====>
    >
    >
          正确
        比如：http://localhost:8080/img/13.jpg

4.8 超链接

a href="http://www.baidu.com" target="_blank">
    /a>
    

• href:指向一个链接地址
  
• target:定义被链接的文档在何处显示。

• • 值为”_self”时在向当前窗口打开新的网页（默认）
  • 值为”_blank”时在新的窗口打开

4.9 转义字符

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。即，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

在 HTML 中不能使用小于号（）和大于号（> ），这是因为浏览器会误认为它们是标签。

如果想表示多个空格，需要使用如下的转义字符。

说明1：如需显示小于号，我们必须这样写： 或

说明2：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

4.10 div标签

div>
    .../div>
    

div是html中最灵活最重要的元素，div就像一个容器，里面可以装很多内容。本身没有特殊的语义。

它是块级元素，会占用网页的一行。

Div的主要作用：可以通过调整自己的样式来完成网页的复杂布局

它可以把一些独立的逻辑部分(如网页中独立的栏目版块)划分出来，如下图：

4.11 内联框架(了解)

iframe src="1.html" name="">
    /iframe>
    

• src:一个网页的地址
• name: iframe的名字，当标签的target属性值为iframe的name时，超链接的目标页面会在iframe中打开

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！