网站导航
> 文档中心 > 【HTML&CSS教学】-第1章 HTML快速入门

【HTML&CSS教学】-第1章 HTML快速入门

网友: 文档中心 2022-03-31 23:00:44

第1章 HTML快速入门

在这里插入图片描述

文章目录

  • 第1章 HTML快速入门
  • 一、HTML简介
    • HTML基本概念
  • 二、HTML基本语法
    • 2.1.标记语法
    • 2.2、元素
    • 2.3、元素嵌套
    • 2.4、属性和值
    • 2.5、每个属性都有值
    • 2.6、标准属性
    • 2.7、注释
    • 2.8、HTML和XHTML
  • 三、文档结构
    • HTML文档的结构
  • 四、HTML基本标签
    • 4.1行控制标记/段落标记
    • 4.2 文字分区div（案例02-02-02-div.html）
    • 4.3 字体font（案例02-02-04-font.html）
    • 4.4 标题h（案例02-02-05-hn.html）
    • 4.5 物理字体（案例02-02-06 -ziti1.html）
    • 4.6 逻辑字体（案例02-02-07-ziti2.html）
    • 4.7 水平线hr（案例02-02-08-hr.html）
    • 4.8 居中及注释（案例02-02-09-zhushi.html）
    • 4.9 列表
    • 4.10 超链接（案例02-02-13-a.html）
    • 4.11 文档主体body
    • 4.12 图像img
    • 4.13 字符实体
  • 五、表格
    • 5.1 表格结构及基本构成
    • 5.2 Table标签及属性
    • 5.3 caption标签及属性
    • 5.4 tr标签及属性
    • 5.5 td标签及属性
  • 六、框架
    • 6.1 框架（iframe）介绍
    • 6.2 iframe标签
    • 6.3 iframe属性（案例02-02-22-iframe.html）

一、HTML简介

HTML基本概念

  1. HTML(HyperText Markup Language)：超文本标记语言，一种纯文本类型的语言

    • 1使用带有尖括号的“标记”将网页中的内容标识出来

  2. 用来设计网页的标记语言

  3. 用该语言编写的文件，以.html或者.htm为后缀

  4. 由浏览器解释执行

  5. HTML页面上，可以嵌套用脚本语言编写的程序段如：VBScript，JavaScript

二、HTML基本语法

2.1.标记语法

  • HTML用于描述功能的符号称为“标记”，比如 p 、h1 等。

    • 标记在使用时必须使用尖括号括起来

    • 有封闭类型标记，也有非封闭类型的标记

在这里插入图片描述

  • 封闭类型标记（也叫双标记）：必须成对出现

内容

  • 封闭类型的标记必须成对出现

如果一个应该封闭的标记没有被封闭，则会产生意料不到的错误。
在这里插入图片描述

  • 非封闭类型标记，也叫做空标记，或者单标记
    <
    或者

  • 不能包含内容
    在这里插入图片描述

2.2、元素

  • 元素，即标记

  • 每一对尖括号包围的部分
    ** 如包围的部分就叫做body元素
    **元素就像是小标签，用于标识网页文档的不同部分

  • 元素可以包含文本内容和其它元素，也可以是空的，比如前面所述的空标记

该处使用的url网络请求的数据。

2.3、元素嵌套

  • 元素之间可以相互嵌套，形成更为复杂的语法

  • 在嵌套元素时需要注意标记的嵌套顺序

该处使用的url网络请求的数据。

2.4、属性和值

  • 属性的声明必须位于开始标记里

  • 一个元素的属性可能不止一个，多个属性之间用空格隔开

  • 多个属性之间不区分先后顺序

2.5、每个属性都有值

  • 属性和属性的值之间用等号连接

  • 属性的值包含在引号中

【HTML&CSS教学】-第1章 HTML快速入门

2.6、标准属性

  • 每个元素都有自己所特有的属性

  • 有些属性是绝大多数元素都支持的属性，称为标准属性（或通用属性）
    id
    title
    class
    style

2.7、注释

  • 为代码添加适当的注释是一种良好的编码习惯

  • 注释只在编辑文档情况下可见，在浏览器展示页面时并不会显示

  • 添加注释的语法如下：

在这里插入图片描述

2.8、HTML和XHTML

  • 1999年12月24日，W3C推荐标准HTML 4.01

  • XHTML于2000年的1月26日成为W3C标准

    • 与HTML 4.01几乎相同
    • 更严格更纯净的HTML版本
      在这里插入图片描述

  • HTML5的目标，就是更为简洁的HTML代码

在这里插入图片描述

三、文档结构

HTML文档的结构

  • 文档类型声明
    • 在文档的起始用DOCTYPE声明指定版本和风格
      • 让浏览器清楚文档的版本、类型和风格
    • Strict DTD
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
  • Transitional DTD
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  • Frameset DTD
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
  • HTML 5
<!DOCTYPE HTML>
  • html页面

    • 文件头：

    • 文档主体部分：

在这里插入图片描述
文档类型声明

四、HTML基本标签

4.1行控制标记/段落标记

  • 浏览器解析HTML页面时，忽略源代码中多余的空格、空行等
  • 如果我们需要给文字设置换行样式，需要使用特定的标记

  • 段落：
……
  • 将标记间的文字置为一个新的段落
  • 可以设置以下属性
    在这里插入图片描述

  • 换行：

    • 强制进行换行操作
<br>

  • 不换行：

    • 禁止标记中间的文本换行
<nobr>……</nobr>

4.2 文字分区div（案例02-02-02-div.html）

<div>……</div>
  • 分区：
    • 把标记中的内容做为单独的一块处理
    • 主要是用来设置涵盖一个区块，所谓的区块是包含一行以上的数据，在 的开始之前与结束后，浏览都会自动换行；放置在 间的数据，自然会与其前后文隔开而自成一区块。
    • 可设置以下属性

在这里插入图片描述

4.3 字体font（案例02-02-04-font.html）

<font>……</font>
  • 字体：
    • 把标记中的内容做为单独的一块处理
    • 主要是用来设置涵盖一个区块，所谓的区块是包含一行以上的数据，在 的开始之前与结束后，浏览都会自动换行；放置在 间的数据，自然会与其前后文隔开而自成一区块。
    • 可设置以下属性

在这里插入图片描述

4.4 标题h（案例02-02-05-hn.html）

<hn>……</hn>
  • 标题字体：
    • n的取值由1到6，h1字体最大
    • 默认显示黑体字
    • 可以设置如下属性：
      在这里插入图片描述

4.5 物理字体（案例02-02-06 -ziti1.html）

  • 设置字体显示样式，主要有以下标记：

在这里插入图片描述

4.6 逻辑字体（案例02-02-07-ziti2.html）

  • 表现文字含义，主要有以下标记：

在这里插入图片描述
在这里插入图片描述

4.7 水平线hr（案例02-02-08-hr.html）

  • 用于分割统一文本的不同部分
  • 可以设置如下属性：
    例：
<hr align="left" width="400" size="50" color="#ff0000">

在这里插入图片描述

4.8 居中及注释（案例02-02-09-zhushi.html）

  • 居中：
    • 设置标记中文本或者图像居中显示
<center>…</center>
  • 注释：
    • 浏览器中不显示注释内容
<!-- … -->
<!-- 本句不会显示在浏览器中 -->

4.9 列表

  • 用于列举内容
  • 列表分类
    • 无序列表（unordered list）
<ul>…</ul>

列表项以标识

<li>…</li>

可以设置如下属性：
在这里插入图片描述

  • 有序列表（ordered list）
<ol>…</ol>

列表项以标识

<li>…</li>

每一项显示时都有编号
可以设置如下属性：
在这里插入图片描述

  • 定义列表（definition list）
<dl>…</dl>

对某对象的解释

定义标题

<dt>

定义内容

<dd>

4.10 超链接（案例02-02-13-a.html）

  • 超链接：
<a>…</a>
<a href=“http://www.baidu.com”>百度</a>

在这里插入图片描述

4.11 文档主体body

  • 文档主体：
<body>…</body>

所有要显示的页面元素都包含在body内
主要属性如下：
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

4.12 图像img

  • 图像：
<img>

引入图像
可以设置如下属性：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.13 字符实体

  • 有些字符，如”、&”等，在HTML中不能直接使用，在需要使用这些字符时，通过字符实体来转换
  • 一个字符实体由三个部分组成
    • 一个&符号
    • 一个实体名或者一个实体号（即ASCII码）
    • 一个分号（;）
  • 例如：小于号，需要写为 “&l t; ”或者 “&# 60; ” ，在HTML页面中显示为 <
  • 实体-无间断空格：
    • 在HTML中，最常见的字符实体就是不可拆分空格
    • 通常，HTML会合并你文档中的空格。如果在你的HTML文本中连续输入了10个空格，其中的9个会被去掉。想要在HTML文档中插入空格，可以使用实体 & nbsp;
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述

五、表格

5.1 表格结构及基本构成

在这里插入图片描述
在这里插入图片描述

5.2 Table标签及属性

在这里插入图片描述

5.3 caption标签及属性

在这里插入图片描述

5.4 tr标签及属性

在这里插入图片描述

5.5 td标签及属性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

六、框架

6.1 框架（iframe）介绍

在这里插入图片描述
在这里插入图片描述

6.2 iframe标签

在这里插入图片描述

6.3 iframe属性（案例02-02-22-iframe.html）

在这里插入图片描述

【HTML&CSS教学】-第1章 HTML快速入门，详细教学就到这里， 后续还有HTML5标签~HTML5表单技术等。。。的学习博客给到大家

网络标签：

相关问题