02.03.第一章 HTML框架标签、超链接标签、控件标签

合集下载

HTML知识点汇总

HTML知识点汇总第一章HTML基础知识1、HTML简介HTML(Hypertext Markup Language)，超文本标记语言，HTML利用各种标记来标识文档的结构以及标识超链接的信息。

它是从SGML(Standard Generalized Markup Language，标准通用标识语言)中的一个子集演变而来的。

2、HTML的标记组成HTML用于描述功能的符号称为“标记”。

标记在使用时必须用尖括号“<>”括起来，而且是成对出现的，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用结束。

如<body></body>、<p></p>等1)单标记：有些标记能完整的表达标记里的意思，只须在尖括号中输入标记名即可，这类标记叫单标记。

XHTML中要求单标记也必须闭合，即在标记“>”前添加斜杠。

常见的单标记如<br />、<hr />等。

2)双标记：双标记有头有尾，且前面的标记与后面的标记保持一致，但在后面的标记前有斜线，语法形如：<标记>内容</标记>。

例如：<p>段落</p>3)XHTML要求所有标记均为小写，且所有标记属性必须添加双引号4)标记对不能交叉3、HTML基本结构<html><head><title>网页标题</title></head><body></body></html>1)<title>标记对不能放在<body>标记对中，同理，其它表示内容的标记也不能放在<head>标记对中2)<html></html>表示HTML语言，在<html></html>里面包含头部(<head></head>)和内容体(<body></body>)。

HTML知识点学习总结

HTML1 HTML介绍1.1 什么是HTML⏹Html是用来描述网页的一种语言。

⏹HTML 指的是超文本标记语言(Hyper Text Markup Language)⏹HTML 不是一种编程语言，而是一种标记语言(markup language)⏹标记语言是一套标记标签 (markup tag)⏹HTML 使用标记标签来描述网页1.2 开发项目的简单图解1.3 HTML的作用⏹Web浏览器的作用是读取html文档，并以网页的形式显示它们。

⏹浏览器不会显示html标签，而是使用标签来解释页面上的内容.⏹简单说，html就是用于展示信息【图片，文件，视频，颜色...】的。

1.4 Html书写规范Html标签⏹HTML 标记标签通常被称为HTML 标签(HTML tag)。

⏹HTML 标签是由尖括号包围的关键词，比如<html>⏹HTML 标签通常是成对出现的，比如<b> 和</b>⏹标签对中的第一个标签是开始标签，第二个标签是结束标签⏹绝大多数的标签都具有属性,建议属性值使用引号引起。

例如:<body text=”red”>⏹大多数标签是可以嵌套的Html创建⏹Html文件可以直接使用文本编辑器来创建，保存时，后缀名为html或htm⏹整个文件是在<html>与</html>标签之间在<html>标签间有<head>与<body>子标签。

例如:空的html标签⏹没有内容的HTML 元素被称为空元素。

空元素是在开始标签中关闭的。

⏹<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

⏹在开始标签中添加斜杠，比如<br/>，是关闭空元素的正确方法。

⏹即使<br> 在所有浏览器中都是有效的，但使用<br /> 其实是更长远的保障。

html常用的标签及使用总结

html常用的标签及使用总结HTML是超文本标记语言，用于创建网页的标准标记语言。

它使用标签来定义网页的内容和结构。

在HTML中，标签是由尖括号（<>)括起来的关键词，常常成对出现，其中一个是开始标签，另一个是结束标签。

下面是HTML中常用的标签及其使用方式的总结。

1. <html>：整个HTML文档的根元素，包含了整个网页的内容。

2. <head>：位于<html>标签之内，用于定义网页的头部信息，比如标题、样式表、脚本和字符编码等。

3. <title>：位于<head>标签之内，用于定义网页的标题，显示在浏览器的标题栏或者书签中。

4. <body>：位于<html>标签之内，用于定义网页的主体内容，包含了所有可见的网页元素。

5. <h1> - <h6>：用于定义标题的标签，从最大的标题<h1>到最小的标题<h6>。

6. <p>：用于定义段落的标签，一般用来包含文本内容。

7. <a>：用于定义超链接的标签，通过href属性指定链接的地址和target属性指定在新窗口中打开链接还是在当前窗口中打开链接。

8. <img>：用于插入图像的标签，通过src属性指定图像的URL。

9. <div>：用于定义文档中的块级元素，常用于对网页进行布局。

10. <span>：用于定义文档中的内联元素，常用于对文本的样式进行设置。

11. <ul>：用于定义无序列表的标签，通过在<li>标签内部定义列表项。

12. <ol>：用于定义有序列表的标签，通过在<li>标签内部定义列表项。

13. <li>：用于定义列表项的标签，通常包含在<ul>或<ol>中。

htm第一章l基础知识总结

htm第一章l基础知识总结HTML（HyperText Markup Language）是一种标记语言，用于描述网页的结构和内容。

下面是HTML的基础知识总结：1. HTML标签：HTML由一系列的标签组成，标签用尖括号（< >）包围。

常用的标签包括<html>、<head>、<title>、<body>等。

2. 文本标签：用于定义文本内容的标签，例如：<p>用于定义段落、<h1>~<h6>用于定义标题、<a>用于定义链接等。

3. 图像标签：用于显示图像的标签，例如：<img>用于插入图像，其中的src属性用于指定图像的路径。

4. 列表标签：用于定义有序或无序列表的标签，例如：<ul>用于定义无序列表（包含点或其他标志）、<ol>用于定义有序列表（包含数字）。

5. 表格标签：用于创建表格的标签，例如：<table>用于创建表格、<tr>用于定义表格中的行、<td>用于定义表格中的单元格等。

6. 表单标签：用于创建表单的标签，例如：<form>用于定义表单、<input>用于输入字段、<button>用于定义按钮等。

7. 属性：标签可以带有属性，属性提供元素的额外信息。

例如，<a>标签带有href属性，用于指定链接的地址，<img>标签带有src属性，用于指定图像的路径。

8. CSS：CSS（Cascading Style Sheets）用于描述网页的样式和布局。

可以通过<style>标签或外部CSS文件将样式应用到HTML元素上。

9. 嵌套：HTML元素可以相互嵌套，一个元素可以包含另一个元素。

例如，<div>内部可以包含<p>、<a>等其他标签。

《html教程讲义》课件

一、HTML简介1.1 HTML的定义HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。

1.2 HTML的作用HTML用于描述网页的结构和内容，使得浏览器能够展示具有特定格式的文本、、图片等。

1.3 HTML的发展历程HTML 1.0（1993年）HTML 2.0（1995年）HTML 4.01（1997年）XHTML 1.0（2000年）HTML5（2014年）二、HTML文档结构2.1 基本结构<!DOCTYPE ><><head><meta charset="UTF-8"><>文档</></head><body><h1>一级</h1><p>段落内容</p><!-更多的标签和内容 --></body></>2.2 标签分类语义化标签：`<header>`、`<nav>`、`<section>`、`<article>`、`<footer>`等功能性标签：`<div>`、`<span>`等三、文本格式与排版3.1 标签`<h1>`～`<h6>`：依次表示一级到六级3.2 段落标签`<p>`：表示一个段落3.3 换行与清除浮动`<br>`：表示换行`<wbr>`：表示单词换行`<clear>`：清除浮动3.4 字符实体`<>&"`：分别表示小于号、大于号、引号四、图片与4.1 图片标签`<img>`：表示图片<img src="图片地址" alt="图片描述" width="宽度" height="高度"> 4.2 标签`<a>`：表示<a href="地址" target="_blank">文本</a>4.3 锚点`<a name="锚点名称">`：表示锚点`<a href="锚点名称">`：到锚点五、列表与表格5.1 无序列表`<ul>`：无序列表`<li>`：列表项5.2 有序列表`<ol>`：有序列表`<li>`：列表项5.3 定义列表`<dl>`：定义列表`<dt>`：定义`<dd>`：定义描述5.4 表格`<table>`：表格`<tr>`：表格行`<td>`：单元格`<th>`：表头单元格六、表单与数据验证6.1 表单标签`<form>`：表单`<input>`：输入框`<textarea>`：文本域`<select>`：下拉菜单`<option>`：下拉菜单选项6.2 数据验证`required`：必填字段`pattern`：正则表达式验证`minlength`、`maxlength`：字符长度限制`type="e"、type="number"、type=""：输入类型限制七、CSS样式7.1 内联样式在HTML标签内使用`style`属性添加样式7.2 内部样式表在`<head>`标签内使用`<style>`标签添加样式7.3 外部样式表使用`.css`文件作为样式表，通过`<link>`标签引入7.4 CSS选择器标签选择器：`h1 { }`类选择器：`.classname { }`ID选择器：`idname { }`属性选择器：`[attribute="value"] { }`八、盒子模型与布局8.1 盒子模型`margin`：外边距`border`：边框`padding`：内边距`width`、`height`：宽度和高度8.2 布局方式标准流布局浮动布局：`float`属性定位布局：`position`属性弹性盒模型（Flexbox）：`display: flex;`九、响应式设计9.1 媒体查询使用`media`查询不同设备屏幕大小时的样式9.2 移动端布局使用百分比、视口单位（vw、vh）、rem等实现响应式布局9.3 图片响应式使用`<picture>`标签或`srcset`属性实现图片响应式十、HTML5新特性10.1 视频与音频`<video>`：视频`<audio>`：音频10.2 画布（Canvas）`<canvas>`：绘制图形、动画等10.3 Web存储`localStorage`：本地存储`sessionStorage`：会话存储10.4 离线应用与缓存使用`manifest`文件实现离线应用10.5 其他新特性`<nav>`、`<section>`、`<article>`等语义化标签`<input type="e">`、`<input type="number">`等新输入类型`<dialog>`：对话框重点和难点解析HTML的基本结构和标签分类文本格式与排版，如、段落、换行等图片与的使用，包括图片标签和锚点列表与表格的创建和应用表单与数据验证，如必填字段、正则表达式验证等CSS样式的基础知识，包括内联样式、内部样式表和外部样式表盒子模型、布局方式以及响应式设计的基本概念HTML5的新特性，如视频与音频、画布、Web存储等HTML5的新特性，如离线应用、Web存储等，这些内容需要一定的实践和理解CSS的高级应用，如伪类、过渡、动画等，这些内容需要对CSS 有深入的了解表单的数据验证，如何使用JavaScript进行复杂的验证，需要对JavaScript有一定的了解。

html基础知识总结

html基础知识总结HTML基础知识总结。

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。

它由一系列的元素（elements）组成，这些元素可以用来包裹不同的内容，从而告诉浏览器如何展示这些内容。

本文将对HTML的基础知识进行总结，包括HTML的结构、常用标签和属性等内容。

首先，我们来了解一下HTML的基本结构。

一个标准的HTML文档由以下几个部分组成：1. 文档类型声明（Document Type Declaration），<!DOCTYPE html>，它告诉浏览器使用哪个HTML版本来解析文档。

2. HTML根元素（Root Element），<html>，它包裹了整个HTML文档的内容。

3. 头部（Head），<head>，包含了文档的元信息，如标题、字符集、引入外部样式表和脚本等。

4. 主体（Body），<body>，包含了文档的主要内容，如文本、图片、链接等。

接下来，我们将介绍一些常用的HTML标签和属性。

在HTML中，标签用来包裹不同类型的内容，而属性则用来为标签提供额外的信息。

1. 标题标签（Heading），<h1>到<h6>，用来定义文档的标题，其中<h1>为最高级标题，<h6>为最低级标题。

2. 段落标签（Paragraph），<p>，用来定义文本段落。

3. 图像标签（Image），<img>，用来插入图片，其中src属性指定图片的URL。

4. 链接标签（Link），<a>，用来创建超链接，其中href属性指定链接的URL。

5. 列表标签（List），<ul>、<ol>、<li>，分别用来定义无序列表、有序列表和列表项。

6. 表格标签（Table），<table>、<tr>、<td>，分别用来定义表格、表格行和表格单元格。

html 网页设计知识点

html 网页设计知识点HTML网页设计知识点HTML（HyperText Markup Language）是用于创建网页的标准标记语言。

通过使用HTML，可以将文字、图片、链接和其他内容组合在一起，创建出富有交互性和视觉吸引力的网页。

下面是一些常见的HTML网页设计知识点，供您参考。

一、HTML基本结构HTML文档通常由以下几个部分组成：1. <!DOCTYPE> 声明：用于指定HTML的版本和文档类型。

2. <html> 标签：HTML文档的根元素。

3. <head> 标签：用于定义HTML文档的头部信息，包括标题、字符集、样式和脚本等。

4. <body> 标签：HTML文档的主体部分，用于呈现网页内容。

二、HTML标签和元素HTML标签是用于定义网页结构的关键标记，同时也包含了元素。

以下是一些常用的HTML标签和元素：1. 标题标签：包括 <h1> 到 <h6>，用于定义网页的标题和标题层级。

2. 段落标签：<p>，用于定义一个段落。

3. 链接标签：<a>，用于创建链接到其他页面或资源的超链接。

4. 图像标签：<img>，用于插入图片到网页中。

5. 列表标签：<ul>、<ol> 和 <li>，用于创建无序列表和有序列表。

6. 表格标签：<table>、<tr> 和 <td>，用于创建表格。

三、HTML属性HTML属性是用于为标签提供额外的信息或配置的。

以下是一些常见的HTML属性：1. class 属性：用于为元素指定一个或多个样式类。

2. id 属性：用于为元素指定唯一的标识符。

3. style 属性：用于为元素直接指定行内样式。

4. href 属性：用于指定链接的目标URL。

5. src 属性：用于指定图片或其他资源的URL地址。

HTML代码全攻略

HTML代码全攻略第一章：HTML 语言的结构html文件是标准的ASCII文件，它看起来象是加入了许多被称为标注(tag)的特殊字符串的普遍文本文件。

从结构上讲，html文件由元素(element)组成，组成html文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。

绝大多数元素是“容器”，即它有起始标记和结尾标记。

元素的起始标记叫做起始标注(start tag)，元素结束标记叫做结尾标注(end tag)，在起始标注和结尾标注中向的部分是元素体。

每一个元素都有名称和可选择的属性，元素的名称和属性都在起始标注内标明。

比如体元素(body)<body backgroud＝"back-ground.gif"><h2> demo </h2>This is my first html file. <p></body>第一行是体元素的起始标注，它标明体元素从此开始。

因为所有的标注都具有相同的结构，所以我们将仔细分析这个标注的各个部分，以便读者对标注的写法有一大概了解。

< 起始标注开始body 元素名称，由于元素和标注一一对应，所以元素名也叫标注名。

需要注意的是<和body之间不能有空格。

元素名称不分大小写。

background属性名。

一个元素可以有多个属性，属性及其属性值不分大小写。

本属性指明用什么方法来填充背景。

＝指明属性值“background.gif”属性值，表示用background.gif文件来填充背景。

属性名,＝,属性值合起来构成一个完整的属性，一个元素可以有多个属性，各个属性用空格分开。

>起始链接链结束。

第二行和第三行是body元素的元素体，最后一行是body元素的结尾标注。

结尾标注用</开始，随后是元素名，然后是大于号>。

从上面的例子中，我们可以看出，一个元素的元素体中可以有另外的元素。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

Hale Waihona Puke 框架集标签frameset
– 框架集标签用于替换HTML的body标签，将整个页面划分
为几个部分，可以垂直和水平划分，语法格式如下：
• <frameset cols=“200, *”> 垂直划分两部分，即页面以左右结构分割，左边200像素，右边为剩余部分（*表示剩余） • <frameset rows=“150,*,300”> 水平划分三部分，顶部150 像素，中间为剩余部分，底部为300像素
• <input type=“file”/>
<!– 文件浏览 -->

一流的培训基地
控件标签

select标签
– select标签用于在HTML页面添加下拉菜单，使用option标
签添加选项，语法格式如下：
• <select> • • • <option>北京</option> <option>上海</option> <option>广州</option>
一流的培训基地
HTML框架标签

<iframe>标签
– iframe标签用于在整个页面的某个部分创建一个独立的窗体，
这个窗体可以显示一个独立的html页面
• <iframe src=“my_frame.html”>

<frame>和<iframe>标签可以设置name属性。
– 语法格式如下：
• <frame src=“first.html” name=“test01frame”>

一流的培训基地
第一章 HTML框架标签、超链接标签、控件标签

一流的培训基地
本章学习任务
HTML的框架标签超文本标签<a> 表单标签
2

一流的培训基地
HTML 框架标签
• <iframe src=“second.html” name=“test02frame”>

一流的培训基地
超链接标签

超链接标签为页面跳转标签
– 超链接标签<a>包含两个重要属性
• href属性：指定超链接的目标页面名称 • target属性：指定在某个框架页面中显示

一流的培训基地
HTML框架标签

框架集标签frameset
– 框架集划分的每部分都是一个框架frame，每个frame可以
引用一个页面，语法格式如下：
• <frameset cols=“200, *”> • • <frame src =“first.html” /> <frame src =“second.html”/>  
• </select>

一流的培训基地
控件标签

textarea标签
– textarea标签用于指定大文本域，包含cols和rows两个重要
属性，分别表示文本域包含的列和行。 – 例如包含4行50列的大文本域语法格式如下：
• <textarea cols=“50” rows=“4”> • </textarea>

一流的培训基地
图片标签

图片标签img用于在HTML页面添加图片
– 包含src和alt两个重要属性，src属性用于指定图片的路径，
alt属性用于设置图片的默认信息
• <img src=“test/故宫.jpg” alt=“故宫俯视图” /> • <img src=“D:/program/images/长城.jpg”alt=“长城”/>
• </frameset>

一流的培训基地
HTML框架标签

框架集标签frameset
– 框架集划分出的部分也可以是框架集，即框架集可以嵌套
• <frameset rows=“150, *”> • <frame src=“first.html” /> 
– 语法格式如下：
• <a href=“second.html” target=“test02frame”>
• test02frame是某个frame的name属性的值

一流的培训基地
控件标签

input标签
– input标签用于在HTML页面添加交互控件
• <input type=“text”/> • <input type=“checkbox”/> • <input type=“radio”/> • <input type=“button”/> <!– 可编辑文本域 --> <!– 多选框 --> <!– 单选框 --> <!– 按钮 -->
•
• • •
<frameset cols=“200, *”>
<frame src=“second.html” /> <frame src=“third.html” /> <frameset>  
• </frameset>

一流的培训基地
慢慢IT路
你需要过来人的指点