WEB基础知识、HTML概述、语法、特殊字符

Luckies
230 阅读10分钟

1. WEB基础知识

1. Internet

一个全球性的计算机互联网络，因特网，互联网，交互网

2. Internet 所提供的服务
  1. Email 邮件服务
  2. Telnet 远程登录
  3. WWW 服务(world wide web)万维网
  4. BBS 电子公告板，俗称论坛
  5. FTP 文件的上传下载
3. 基本实现技术
  1. 分组交换原理
  2. TCP/IP 协议
  3. B/S 模式
4. WEB

指的是网络环境下的一种应用程序---网页程序，简称网页

作用：将各类信息和服务进行无缝连接，并且提供生动的图形用户界面

5. 工作原理

由 WEB 服务器，浏览器，通信协议组成

5.1. 通信协议: HTTP(hyper text transfer protocol)超文本超文本传输协议
5.2. 浏览器: IE, Firefox, Chrome, Safari, Opera

功能:

  1. 提交请求
  2. 作为HTML和JS的解释器
  3. 以图形化的方式显示文本
3. 服务器:
  1. 功能:
    1. 服务器产品存储web上的信息
    2. 响应浏览器请求并且执行服务器端程序
    3. 具备基本的安全性功能
  2. 服务器产品: Tomcat, Iis, apache
  3. 服务器端技术: Java, PHP, .net 都有数据库访问能力

2. HTML概述

2.1. 什么是 HTML ?

Hyper text markup language: 超级 文本 标记 语言

普通文本a: 无特殊意义 超级文本: 超链接 超文本: 文本具备特殊的功能 标记: 超文本的组成形式 语言: 拥有自己的语法结构

2.2. 特点
  1. 以 .html 或 .htm 作为后缀
  2. 由浏览器解析执行
  3. 可以嵌套脚本语言(JavaScript, vbScript)
  4. 用带有尖括号的“标记”来标识
2.3. HTML基础语法
2.3.1. 标记

在html中，用于描述功能的符号，称之为标记

2.3.2. 语法

标记在使用时，必须用尖括号(<>)括起来

标记的分类：

  1. 封闭类型标记: 也称为双标记，必须成对出现

    例如: <a>网页</a> > 注意：封闭类型标记必须成对出现，如果没有被封闭，会产生意想不到的效果

  2. 非封闭类型: 也称为单标记或空标记 语法: <标记> 或 <标记/>

    例如: <br>或<br/>表示换行 <hr>或<hr/>表示横线 > 注意：单标记不能包含内容

2.3.3.元素

​ 元素即标记(标签)

  1. 元素的嵌套: 在一个元素中，又出现另一个元素 元素之间可以相互嵌套，形成更为复杂的页面结构

    注意:

    1. 成对出现，成对缩进
    2. 尽量不要让行内元素嵌套块级元素。“<span>你好呀<p>是不是这样的</p></span>” 这是不正确的
    3. 段落元素<p></p>是不允许嵌套其他块级元素的，也不能嵌套P本身。浏览器解析时会出现问题

  2. 属性和值

    1. 什么是属性

      属性用来修饰元素的

    2. 语法: <标记 属性=“值” 属性=“值” ...></标记>

      例如：<p align="center" id="p1">段落一</p> 属性的声明必须位于开始标记里

    3. 标准属性

      1. id 定义元素在页面中的唯一标识
      2. title 鼠标移入到元素上时，所提示的文本内容
      3. class CSS中引入类选择器
      4. style CSS中定义元素的行内样式
2.3.4. 注释

在页面中编写完成后，不会被浏览器解析运行

可以将代码的解释说明写在注释中，便于其他程序员查看

语法：<!--注释内容-->

注意:

  1. 本身不能嵌套 <!--<!---->--> 错误\
  2. 不能嵌套在<>中 <p <!--此处不能嵌套-->></p>

3. HTML 和 XHTML 和 HTML5

W3C( 万维网联盟 ) 负责定制和推广 HTML

1999年12月24日html4.01标准

2000年01月26日w3c推出XHTML1.0标准

XHTML与HTML4.01几乎相同: XHTML更纯净的版本

如：<br>在XHTML中必须要求结束 <br/>

2014年9月推出 HTML5

HTML5目标: 实现更简洁的HTML代码, 能不写就不写，能少写就少写

例如：<br> 或 <br/>

<p align="center"></p> 正确 <p align=center></p>正确 <input readonly="readonly">正确 <input readonly>正确

4. HTML文档结构

4.1. 文本类型的声明

语法: <!doctype html>

作用: 指定HTML的版本和风格

4.2. HTML页面

语法：<html></html> 位于 <!doctype html>之下

4.3. HTML 页面内容
4.3.1. head元素

紧跟在<html>之后，是 HTMl 中的首个子元素, 是其他头部元素的容器

其他头部元素:

  1. <title></title>: 定义网页、文档标题 => 在浏览器的标签页位置
  2. <meta>: 定义网页的基本信息：编码格式，关键字，描述等 <meta charset="utf-8"> <meta name="keywords" content="关键字内容"> <meta name="description" content="描述内容">
  3. <script src=""></script>: 定义或引用js文件
  4. <style></style>: 定义内部样式
  5. <link rel="stylesheet" href="">: 引入外部样式
4.3.2. body元素

语法: <body></body>

属性: 1. text: 表示文本颜色 2. bgcolor: 表示网页的背景颜色

5. 文本标记

5.1. 特殊字符

&nbsp;: 空格 &gt;: > &lt;: < &copy;: © &yen: ￥

5.2. 文本样式

<b></b>: 加粗 <i></i>: 斜体 <u></u>: 下划线 <s></s>: 删除线 <sup></sup>: 上标 <sub></sub>: 下标

5.3. 标题元素

以标题的形式来显示文本内容

语法: <hn></hn> => n: 1-6

特点: 1. 改变字体大小 2. 加粗 3. 上下文之间有空白间距 4. 独自成行

5.4. 段落元素

一段落的形式显示文本

语法: <p></p>

特点: 字体大小为默认大小，段落独自成行，上下文有垂直空白间距

5.5. 换行元素

空标记，在任何地方创建手工换行

语法：<br> 或 <br/>

5.6. 分割线元素

空标记，水平线，常用于将页面的不同部分隔开

语法: <hr> 或 <hr/>

常用属性:

  1. size: 取值px为单位的数值
  2. width: 宽度
  3. align: 线条的水平对齐方式
  4. color: 颜色
5.7. 预格式化

保留源文件中的格式，即源文件中的换行和空格的效果

语法: <pre></pre>

5.8. 分区元素
5.8.1. 块分区

语法：EX: <div></div>

作用: 布局

特点: 1. 独自成行 2. 无任何明显效果

5.8.2. 行分区

语法: EX: <span></span>

作用: 包裹文本并且自定义样式

特点: 1. 多个span在一行内显示 2. 无任何明显效果

5.9. 行内元素与块级元素
5.9.1. 行内元素

多个行内元素在一行内显示

作用: 大部分行内元素为了处理文本的显示效果

EX: span, i, b, u, s, sub, sup, img, a

5.9.2. 块级元素

每个块级元素会独占一行，即前后都有换行

作用: 做布局

EX: div, h1-h6, p, 结构标记

6. 图像和链接

6.1. URL
6.1.1. 目录结构

目录: WEB 站点中文件夹的名称

6.1.2. URL

统一资源定位器, 俗称: 路径

作用: 标识资源的位置

6.1.3. 表现形式

  1. 绝对路径：一个完整的路径

  2. 相对路径: 从当前文件位置处开始, 一直到资源文件所在的位置, 所经过的路径就是相对路径

    • 同目录: 直接通过资源文件名称进行引用

      EX: a.jpg

    • 子目录: 先进入到子目录中, 然后再对资源文件进行引用

      EX: image/a.jpg

    • 父目录: 先返回到父级目录，再对资源文件进行引用

      EX: ../a.jpg ../ 表示返回到上一级

  3. 根相对路径: 永远都是从 WEB 站点的根目录开始找的 由/作为开始, 表示 WEB 站点的根目录

    /index/image/a.jpg

6.2. 图像
5.2.1. 图像格式
  1. jpg(jpeg): 有损压缩
  2. png: 背景是透明
  3. gif: 动画
5.2.2. 图片

  1. 语法：<img />

  2. 属性:

    • src: (源)要显示的图像的路径 -> URL

    • width: 宽度

    • height: 高度

      注意: width 和 height 如果只指定其中一个属性, 那么另外一个也会跟着等比缩放

    • title: 鼠标移入停留时显示的文字

    • alt: 图片出错时, 显示的文字

6.3. 链接

  1. 作用: 链接又称超链接, 设置页面中允许被点击的内容; 在网页中, 链接允许完成页面间的跳转动作

  2. 语法:

    1. 标记 -> <a>内容</a>

    2. 属性:

      • href: 链接的 URL (要跳转到的页面的地址)

      • target: 目标, 指定打开新网页的方式 取值: _self -> (默认值)在自身的标签页中打开

        ​ _blank -> 在新的标签页中打开

      • title: 鼠标放到链接上的提示

      • name: 定义页面锚点

  3. 链接的表现形式

    1. 目标为下载资源

      如果链接地址是压缩文件, 就是下载操作 EX: <a href="*.zip/*.rar"></a>

    2. 电子邮件链接 <a href="mailto:xxxxxxxx@qq.com">打开邮件</a>

    3. 返回页面顶部的空链接

      <a href="#">返回页面顶部</a>

    4. 链接到js <a href="javascript:js代码">执行js功能</a>

  4. 锚点 作用: 在页面中的某行位置处, 做一个记号方便页面能够随时跳转到记号位置处 使用方式:

    1. 定义锚点
      1. 通过a标记的name属性定义锚点 <a name="自定义锚点名称">内容</a>
      2. 通过任意标记的ID属性定义锚点 <any id="自定义锚点名称"></any>
    2. 链接到锚点
      1. 跳转到本页的锚点处 <a href="#锚点名称">内容</a>
      2. 跳转到其他页面的锚点处 <a href="页面的url#锚点名称">内容</a>

7. 表格

7.1. 表格的作用

按照一定的格式(结构)来显示数据

表格是由单元格, 按照从左往右, 从上往下的顺序排列的

表格中的数据最终保存在单元格中

7.2. 使用表格
7.2.1. 创建表格
  1. 定义表格: <table></table>
  2. 创建表行: <tr></tr>
  3. 创建列: <td></td>

注意：传统的表格，默认为每行的列数都是统一化的

7.2.2. 表格的属性(table属性)
  1. width: 设置表格的宽度
  2. height: 设置表格的高度
  3. align: 设置表格的水平对齐方式 -> 取值：left / center / right
  4. border: 边框, 指定边框的宽度
  5. bgcolor: 设置表格的背景颜色
  6. cellspacing: 设置单元格的外边距( 单元格与单元格之间的距离 )
  7. cellpadding: 设置单元格内边距( 单元格边框与内容之间的距离 )
  8. border-collapse: 表格的边框是否被合并为一个单一的边框, 还是象在标准的 HTML 中那样分开显示 取值:
    1. separate: 默认值; 边框会被分开 不会忽略 border-spacing 和 empty-cells 属性
    2. collapse: 如果可能; 边框会合并为一个单一的边框 会忽略 border-spacing 和 empty-cells 属性
    3. inherit: 规定应该从父元素继承 border-collapse 属性的值
7.2.3. tr的属性
  1. align: 设置该行内容水平对齐方式 -> 取值: left / center / right
  2. valign: 设置该行内容的垂直对齐方式 -> 取值: top / center / bottom
  3. bgcolor: 设置该行的背景颜色
7.2.4. td属性
  1. align: 水平对齐方式
  2. valign: 垂直对齐方式
  3. width: 列宽度
  4. height: 行高度
  5. colspan: 设置单元格跨列
  6. rowspan: 设置单元格跨行

注意: 每行中的指定列的宽度, 默认情况下都是一致的, 默认以最宽的为主 每行中的指定行的高度, 默认情况下都是一致的, 默认以最高的为主

​ 也可以单个设置背景色, 用属性 bgcolor; background 要结合样式用才可以生效

7.2.5. 表格的标题

标记：<caption></caption> 注意：caption 紧跟在 table 之后, 一个表格只能有一个标题

7.3. 表格复杂使用
7.3.1. 行分组

可以将表格分成3个部分: 表头: <thead></thead> 表主体: <tbody></tbody> 表尾: <tfoot></tfoot>

7.3.2. 不规则表格

通过 td 的 colspan (跨列)和 rowspan (跨行)属性设置

  1. colspan 跨列: 从指定的单元格位置处, 横向向右合并几个单元(包含自己) 属性: colspan 取值：数字(合并单元格的个数)
  2. rowspan 跨行: 从指定的单元格位置处, 纵向向下合并几个单元(包含自己) 属性: rowspan 取值: 数字(合并单元格的个数)

注意: 被合并掉的单元格需要删除

7.3.3. 表格的嵌套

在单元格( td )中去嵌套另一个表格

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
        </tr>
      </table>
    </td>
  </tr></table>
avatar
文章
阅读
粉丝