文章目录

• 1 HTML简介
• • 1.1 什么是HTML
  • 1.2 HTML能做什么
  • 1.3 HTML书写规范
• 2 HTML基本标签
• • 2.1 结构标签
  • 2.2 排版标签
  • 2.3 块标签
  • 2.4 基本文字标签
  • 2.5 文本格式化标签
  • 2.6 标题标签
  • 2.7 列表标签(清单标签)
  • 2.8 图片标签
  • 2.9 链接标签
  • 2.10 表格标签
• 3 HTML表单标签
• • 3.1 form元素常用属性
  • 3.2 input元素
  • 3.3 select 元素(下拉列表)
  • 3.4 textarea元素(文本域)
• 4 HTML框架标签
• • 4.1 框架结构标签frameset
  • 4.2 框架标签frame
  • 4.3 基本的注意事项
  • 4.4 综合案例
  • 4.5 iframe
• 5 特殊字符标签
• 5 特殊字符标签

1 HTML简介

1.1 什么是HTML

HTML全称：Hyper Text Markup Language(超文本标记语言)

• 超文本:页面内可以包含图片、链接，甚至音乐、程序等非文字元素
• 标记:标签，不同的标签实现不同的功能
• 语言:人与计算机的交互工具

1.2 HTML能做什么

HTML使用标记标签来描述网页,展示信息给用户

1.3 HTML书写规范

• HTML标签是以尖括号包围的关键字
• HTML标签通常是成对出现的，有开始就有结束
• HTML通常都有属性，格式:属性＝‘属性值’(多个属性之间空格隔开)
• HTML标签不区分大小写,建议全小写

2 HTML基本标签

2.1 结构标签

:根标签       ：网页头标签:页面的标题            ：网页正文

颜色的表示方式：

• 第一种方式：用表示颜色的英文单词，例，red green blue

• 第二种方式：用16进制表示颜色，例，#000000 #ffffff #325687 #377405

2.2 排版标签

• 可用于实现简单的页面布局

• 注释标签：

• 换行标签：< br>

• 段落标签：< p>文本文字

  • 特点：段与段之间有空行
  • 属性：align对齐方式(left、center、right)

• 水平线标签:< hr/>

  • 属性:
    • ​ width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)
    • ​ size: 水平线的粗细 (像素表示，例如：10px)
    • ​ color:水平线的颜色
    • ​ align:水平线的对齐方式

2.3 块标签

使用CSS+DIV是现下流行的一种布局方式

2.4 基本文字标签

font标签处理网页中文字的显示方式

2.5 文本格式化标签

使用标签实现标签的样式处理

2.6 标题标签

随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行

2.7 列表标签(清单标签)

无序列表：使用一组无序的符号定义， < ul>< /ul>

有序列表：使用一组有序的符号定义， < ol>< /ol>

列表嵌套：无序列表与有序列表相互嵌套使用

代码举例：

2.8 图片标签

在页面指定位置处中引入一幅图片， < img />

2.9 链接标签

• 在页面中使用链接标签跳转到另一页面

  • 标签： < a href=“”>< /a>

  • 属性：href:跳转页面的地址(跳转到外网需要添加协议)

• 设置跳转页面时的页面打开方式，target属性

  • _blank在新窗口中打开
  • _self在原空口中打开

• 指向同一页面中指定位置
  • 定义位置： < a name=“名称”>< /a>
  • 指向： < a href=“#名称”>< /a>

2.10 表格标签

普通表格(table,tr,td)

表格的列标签(th)：内容有加粗和居中效果

表格的列合并属性(colspan)：在同一行内同时合并多个列

表格的行合并属性(rowspan)：在同一列跨多行合并

3 HTML表单标签

html表单用于收集不同类型的用户输入数据

3.1 form元素常用属性

• form：表单，用于收集数据并提交到服务器
  • 属性：
    • action : 表单提交的服务器地址
    • method : get方法和post方法
    • enctype : 表单的提交形式
      • application/x-www-form-urlencoded（默认的，以字符串的形式(key-value)提交）
      • multipart/form-data(以二进制的流的形式提交表单) )

3.2 input元素

作为表单中的重要元素，可根据不同type值呈现为不同状态

3.3 select 元素(下拉列表)

• 单选下拉列表：< select>< /select>

• 默认选中属性：selected=“selected”

内容...

3.4 textarea元素(文本域)

多行文本框： < textarea cols=“列” rows=“行”>< /textarea>

4 HTML框架标签

• 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
• 使用框架的缺点：
  • 开发人员必须同时跟踪更多的HTML文档
  • 很难打印整张页面

4.1 框架结构标签frameset

• 框架结构标签（ < frameset>< /frameset>）用于定义如何将窗口分割为框架
• 每个 frameset 定义了一系列行或列
• rows/columns 的值规定了每行或每列占据屏幕的面积
  • < /frameset>
  • < /frameset>

4.2 框架标签frame

每个frame引入一个html页面

4.3 基本的注意事项

• 不能将 < body>< /body> 标签与 < frameset>< /frameset> 标签同时使用
• 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在< frame>标签中加入：noresize=“noresize”。

4.4 综合案例

主页面

top页面

这是页面的头部

left页面

• 员工管理
• 部门管理
• 用户管理

员工管理
部门管理
用户管理
订单管理

content页面

这是页面的中间

4.5 iframe

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）

员工管理
部门管理
用户管理
订单管理

5 特殊字符标签

i>部门管理

• 用户管理
• 
  
• 订单管理

• ```

  5 特殊字符标签