一、HTML简介
1,HTML的大致组成部分。
2,什么是html
HTML 指的是超文本标记语言: HyperText Markup Language
3,HTML 标签
HTML 标签是由*尖括号*包围的关键词，比如 <html>
HTML 标签通常是*成对出现*的，比如 <b> 和 </b>
标签对中的第一个标签是*开始标签*，第二个标签是*结束标签*
开始和结束标签也被称为*开放标签*和*闭合标签*
4,html的网页结构
二、HTML基础
标题，段落，链接，图象
三、HTML元素
HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
四、HTML属性
HTML 属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name=“value”。
id: 给元素一个唯一的标识符，可以用于 CSS 选择器或 JavaScript 操作。<divid="header">This is a header</div>class: 给元素指定一个或多个类名，方便通过 CSS 或 JavaScript 操作。<pclass="text-muted">This is a paragraph.</p>style: 直接为元素定义 CSS 样式。<spanstyle="color: red;">This text is red.</span>href: 用于<a>标签，指定链接目标。<ahref="https://www.example.com">Visit Example</a>src: 用于<img>和<script>标签，指定资源的路径。<imgsrc="image.jpg"alt="Description">alt: 用于<img>标签，提供图片的替代文本。<imgsrc="logo.png"alt="Company Logo">title: 提供关于元素的额外信息，通常在鼠标悬停时显示。<buttontitle="Click me">Submit</button>name: 在<input>,<form>,<select>等表单元素中使用，定义元素的名称。<inputtype="text"name="username">value: 定义表单元素的值。<inputtype="text"value="Default text">target: 用于<a>标签，指定链接的打开方式（如_blank在新窗口中打开）。<ahref="https://www.example.com"target="_blank"rel="noopener">Open in new tab</a>type: 指定表单元素的类型（如text,password,submit）。<inputtype="password"name="password">placeholder: 为<input>和<textarea>提供一个占位符文本。<inputtype="text"placeholder="Enter your name">
五、HTML标题
<h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6>
六、HTML段落
<p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p>
七、HTML文本格式化
HTML 文本格式化标签
标签描述
<b>
定义粗体文本
<em>
定义着重文字
<i>
定义斜体字
<small>
定义小号字
<strong>
定义加重语气
<sub>
定义下标字
<sup>
定义上标字
<ins>
定义插入字
<del>
定义删除字
八、HTML链接
HTML 链接语法
以下是 HTML 中创建链接的基本语法和属性：
<a>
元素：创建链接的主要HTML元素是
<a>
（锚）元素。
<a>
元素具有以下属性：
href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。target（可选）：指定链接如何在浏览器中打开。常见的值包括_blank（在新标签或窗口中打开链接）和_self（在当前标签或窗口中打开链接）。title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。
链接的 HTML 代码很简单，它类似这样：
<ahref="url">链接文本</a><ahref="url"target='_blank'title='url'rel='noopener'>连接文本</a>
href 属性描述了链接的目标。
文本链接：最常见的链接类型是文本链接，它使用
<a>
元素将一段文本转化为可点击的链接，例如：
<ahref="https://www.example.com">访问示例网站</a>
图像链接：您还可以使用图像作为链接。在这种情况下，
<a>
元素包围着 元素。例如：
<ahref="https://www.example.com"><imgsrc="example.jpg"alt="示例图片"></a>
锚点链接：除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接。要创建锚点链接，需要在目标位置使用
<a>
元素定义一个标记，并使用#符号引用该标记。例如：
<ahref="#section2">跳转到第二部分</a><!-- 在页面中的某个位置 --><aname="section2"></a>
下载链接：如果您希望链接用于下载文件而不是导航到另一个网页，可以使用 download 属性。例如：
<ahref="document.pdf"download>下载文档</a>
九、HTML头部
1,HTML title 元素
**
<title>
** 标签定义了不同文档的标题。
**
<title>
** 元素:
- 定义了浏览器工具栏的标题- 当网页添加到收藏夹时，显示在收藏夹中的标题- 显示在搜索引擎结果页面的标题
一个简单的 HTML 文档:
实例
<html><head><metacharset="utf-8"><title>文档标题</title></head><body> 文档内容...... </body></html>
2,HTML base 元素
**
<base>
** 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
3,HTML link 元素
**
<link>
** 标签定义了文档与外部资源之间的关系。
**
<link>
**标签通常用于链接到样式表:
4,HTML style 元素
**
<style>
** 标签定义了HTML文档的样式文件引用地址.
在**
<style>
** 元素中你也可以直接添加样式来渲染 HTML 文档:
5,HTML meta 元素
meta标签描述了一些基本的元数据。
**
<meta>
**标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta>
一般放置于
<head>
区域
6,HTML script 元素
<script>
标签用于加载脚本文件，如： JavaScript。
<script>
元素在以后的章节中会详细描述。
十、HTML CSS
1.CSS基础和引入方式
学习 CSS 的基本概念，包括选择器、属性和值等。- ###### 选择器- 元素选择器：根据元素类型选择-
<style>p{color:red;}</style>- 类选择器：以 ‘.’ 开头，后接类名，使用时在元素内部class引用类，class可以引用很多类-<head><style>.my-class{color:blue;}</style></head><body><pclass='my-class'>##</p></body>- ID选择器：以 ‘#’ 开头，后接id，使用时在元素内定义id，id是唯一的-<head><style>.#my-id{color:green;}</style></head><body><pid='my-id'>##</p></body>- 属性选择器：根据元素的属性或属性值来选择元素-<head><style>[href]{color:purple;}[href='https://www.example.com']{color:orange;}</style></head><body><!--橘色--><ahref='https://www.example.com'>##</a><!--紫色--><ahref='##'>##</a></body>- 伪类选择器：用于选择特定状态的元素，如：hover（鼠标悬停状态），当鼠标悬停时选择元素-<head><style>a:hover{color:yellow;}</style></head><body><!--鼠标悬停时变为黄色--><ahref='https://www.example.com'>##</a></body>- ###### 属性- 颜色相关属性：-color：设置元素的前景（即文本）颜色。-background-color：设置元素的背景颜色。-border-color：设置元素的边框颜色。文本格式化属性：-text-align：设置元素的文本对齐方式（如左对齐、右对齐或居中）。-text-decoration：添加或移除文本的装饰线（如下划线、上划线或删除线）。-font-size：设置文本的字体大小。-font-family：设置文本的字体。布局相关属性：-margin：设置元素的外边距。-padding：设置元素的内边距。-border：设置元素的边框宽度、样式和颜色。-width和height：设置元素的宽度和高度。-display：设置元素的显示类型（例如，block、inline-block、inline、none）。定位和浮动属性：-position：设置元素的定位类型（例如，relative、absolute、fixed或sticky）。-top、right、bottom、left：与position属性一起使用，确定元素的位置。-float：使元素浮动到容器的左边或右边。盒模型相关属性：-box-sizing：设置如何计算元素的总宽度和总高度。flex布局相关属性：-align-content：在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。-align-items：定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。-align-self：定义flex子项单独在侧轴（纵轴）方向上的对齐方式。- ###### CSS的值- CSS的值是分配给CSS属性的具体数据。每种属性都有可接受的一组特定的值，它们可能是预定义的关键字、长度、百分比、颜色、URL、角度等等。了解 CSS 的三种引入方式：内联样式、内部样式表和外部样式表。- 优先级：内联样式 > 内部样式表 > 外部样式表。- 如果同一个元素被多次声明CSS样式，会按照优先级来选择。- 内联样式- 直接在元素开始标签中定义
style- 内部样式表- 在头部标签中写-<head><style>p{}</style></head>- 外部样式表- 写在文件外部的CSS文件- 通过头部的link标签引入外部的CSS文件-<head><linksrc='##'></head><body><pclass='##'></p></body>
2. 字体和颜色
学习如何使用 CSS 来修改文本的字体、大小、颜色、行高等属性。-
font-family：设置字体-font-size：设置字体大小-color：字体颜色-line-height:设置行高-<style>p{font-famliy:"Times New Roman";font-size:16px;color:red;line-height:1.5;}</style>- 这段CSS代码表示，所有的<p>元素都将使用Times New Roman字体（如果系统中没有该字体，则使用 Times 或者 serif 字体），字体大小为 16 像素，字体颜色为红色，行高为 1.5。了解如何使用 CSS 颜色，包括颜色名称、十六进制（#FFFFFF）颜色、RGB 颜色等。-
<style>p{color:red;background-color:#333333;border:1px solid rgb(255,0,0);}</style>
3. 布局和定位
- 学习 CSS 的盒模型，包括边距（margin）、边框（border）、填充（padding）和内容（content）等- 在 CSS 中，每个元素被表示为一个矩形的盒子，这个矩形盒子描述了元素在布局中所占据的空间。CSS盒模型包含四个主要部分： 1. 内容（Content）：这是元素的实际内容，如文本、图片等。其尺寸可以通过
width和height属性来设置。2. 内边距（Padding）：紧贴着内容的空间，位于内容与边界之间。这部分区域的背景色和内容是一样的。可以通过padding属性来设置。3. 边界（Border）：环绕在内边距和内容外部的线。可以通过border属性来设置。4. 外边距（Margin）：在边界外部的空间，用于元素之间的间距。可以通过margin属性来设置。 - 学习 CSS 的基本布局和定位，包括使用 float、position 属性等。- CSS的基本布局包括：- 盒模型布局：- 设置元素的宽度和高度：使用
width和height属性。- 设置元素的边框：使用border属性。- 设置元素的内边距：使用padding属性。- 设置元素的外边距：使用margin属性。流动布局：- 设置元素的display属性为inline或inline-block，使元素在同一行内水平排列。块级布局：- 设置元素的display属性为block，使元素以块级方式排列。表格布局：- 使用display: table创建表格布局。- 使用display: table-row和display: table-cell设置行和单元格。弹性盒子布局：- 设置容器的display属性为flex，创建弹性盒子布局。- 使用弹性盒子属性如flex-direction、justify-content和align-items来控制元素的布局和对齐。网格布局：- 设置容器的display属性为grid，创建网格布局。- 使用网格属性如grid-template-columns、grid-template-rows和grid-column等来定义网格的结构和元素的位置。- CSS的定位- 相对定位- 绝对定位- 固定定位- 粘性定位- CSS中的float-left：元素向左浮动。-right：元素向右浮动。-none：元素不浮动，恢复正常的文档流。
补充
1、弹性盒子flex布局
**使用方式：在
<style>
内定义display属性flex。**
在设置属性flex之后，可以通过
justify-content
来调整子元素的水平对齐方式
justify-content属性值说明flex-start默认值，靠右对齐flex-end靠左对齐center水平居中space-around平均分布（子元素左右有间隔）space-between平均分布（子元素左右无间隔）
<divstyle="background-color: #FFFFFF;"><divstyle="background-color: #333333;display: flex;justify-content: space-around;margin: 2px"><pstyle="background-color: green;width: 250px;margin: 0;">This is a paragraph.</p><pstyle="background-color: red;width: 250px;margin: 0;">This is a paragraph.</p></div><pstyle="background-color: #666666;margin: 2px;">This is a paragraph.</p><pstyle="background-color: #999999;margin: 2px;">This is a paragraph.</p></div>
效果：
2、流动inline-block布局
**使用方法：在
<style>
内定义display属性inline或inline-block**
流动布局会让子元素按水平排列，如果一行放不下，会自动换行
<divstyle="background-color: #333333;margin: 2px;"><pstyle="display: inline-block;background-color: green;margin: 2px;">This is a paragraph.</p><pstyle="display: inline-block;background-color: red;margin: 2px;">This is a paragraph.</p><pstyle="display: inline-block;background-color: yellow;margin: 2px;">This is a paragraph.</p><pstyle="display: inline-block;background-color: green;margin: 2px;">This is a paragraph.</p><pstyle="display: inline-block;background-color: red;margin: 2px;">This is a paragraph.</p><pstyle="display: inline-block;background-color: yellow;margin: 2px;">This is a paragraph.</p><pstyle="display: inline-block;background-color: green;margin: 2px;">This is a paragraph.</p><pstyle="display: inline-block;background-color: red;margin: 2px;">This is a paragraph.</p><pstyle="display: inline-block;background-color: yellow;margin: 2px;">This is a paragraph.</p></div>
效果：
用flex的方法实现流动布局
<divstyle="background-color: #333333;margin: 2px;display: flex;flex-flow: row wrap;"><pstyle="background-color: green;margin: 2px;">This is a paragraph.</p><pstyle="background-color: red;margin: 2px;">This is a paragraph.</p><pstyle="background-color: yellow;margin: 2px;">This is a paragraph.</p><pstyle="background-color: green;margin: 2px;">This is a paragraph.</p><pstyle="background-color: red;margin: 2px;">This is a paragraph.</p><pstyle="background-color: yellow;margin: 2px;">This is a paragraph.</p><pstyle="background-color: green;margin: 2px;">This is a paragraph.</p><pstyle="background-color: red;margin: 2px;">This is a paragraph.</p><pstyle="background-color: yellow;margin: 2px;">This is a paragraph.</p></div>
效果：
4. 背景和边框
- 学习如何使用 CSS 来设置元素的背景颜色、背景图像等。
<style>p{background-color:red;}h1{background-color:#333333;}h2{background-color:rgb(255,0,0);}p{background-image:url("paper.png");}h1{background-image:url("paper.png");}h2{background-image:url("paper.png");}</style>``````background-image会把background-color覆盖掉- 学习如何使用 CSS 来设置元素的边框样式、颜色和宽度等。
<!--可以用分开写的方式定义属性--><style>p{border-width:1px;border-style:solid;border-color:black;}</style><!--也可以用简写方式，效果一样--><style>p{border:1px solid black;}</style>
5. 项目实践
- 用所学的知识创建一个简单的个人介绍网页，包括姓名、个人照片、简介等，并使用 CSS 来进行样式化。
index.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>个人介绍</title><linkrel="stylesheet"href="style.css"></head><body><divclass="grid-container"><divclass="item1"style="color: red;">个人信息</div><divclass="item3">导航栏</div><divclass="item2">个人简介 <div><h1id="name"class="">我的名字</h1><imgsrc="./个人照片.png"alt="我的照片"><p>这里是关于我的简介。</p></div></div></div></body></html>style.css<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>个人介绍</title><linkrel="stylesheet"href="style.css"></head><body><divclass="grid-container"><divclass="item1"style="color: red;">个人信息</div><divclass="item3">导航栏</div><divclass="item2">个人简介 <div><h1id="name"class="">我的名字</h1><imgsrc="./个人照片.png"alt="我的照片"><p>这里是关于我的简介。</p></div></div></div></body></html>
十一、HTML图像
1、用法
在 HTML 中，图像由
<img>
标签定义。
**
<img>
**是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。
src 指 “source”。源属性的值是图像的 URL 地址。
alt 属性用来为图像定义一串预备的可替换的文本。
height（高度） 与width（宽度）属性用于设置图像的高度与宽度。
<imgsrc="./个人头像.png"alt="个人头像"width='100'height='150'>
2、图片链接
如果想把图片做成一个链接，可以把
<img>
标签写进
<a></a>
标签中，这样就可以实现点击图片跳转链接了。
<ahref="https://www.baidu.com"><imgsrc="百度LOGO.png"alt="百度"></a>
3、图片映射
映射可以实现点击图片不同位置实现不同效果
<imgsrc="planets.png"width="145"height="126"alt="Planets"usemap="#planetmap"><!-- usemap用来链接映射 --><!-- shape为映射的形状 --><mapname="planetmap"><areashape="rect"coords="0,0,82,126"alt="Sun"href="sun.htm"><areashape="circle"coords="90,58,3"alt="Mercury"href="mercur.htm"><areashape="circle"coords="124,58,8"alt="Venus"href="venus.htm"></map>
十二、HTML表格
1,快速写HTML表格
懒人链接
2,写一个二行三列的表格
<table><thead><tr><th>name</th><th>sex</th><th>age</th></tr></thead><tbody><tr><td>mike</td><td>man</td><td>22</td></tr></tbody></table>
3,表格样式
border
加在
<table>
中才能作用在表格内，如果加在
style
中只能作用在表格外边框
cellpadding
可以设置单元格内容与其边框之间的空白距离，设置为0，内容会贴着单元格边框
cellspacing
可以设置单元格边框之间的留白，如果设置为零，单元格之间将没有间隙
HTML 表格标签
标签描述**
<table>
定义表格
<th>
定义表格的表头
<tr>
定义表格的行
<td>
定义表格单元
<caption>
定义表格标题
<colgroup>
定义表格列的组
<col>
定义用于表格列的属性
<thead>
定义表格的页眉
<tbody>
定义表格的主体
<tfoot>
**定义表格的页脚
十三、HTML列表
1、HTML列表分为有序列表、无序列表和自定义列表
- 有序列表-
<ol><li>有序列表</li><li>无序列表</li><li>自定义列表</li></ol> - 无序列表-
<ul><li>有序列表</li><li>无序列表</li><li>自定义列表</li></ul> - 自定义列表-
<dl><dt>有序列表</dt><dd>1、2、3、</dd><dt>无序列表</dt><dd>。。。</dd><dt>自定义列表</dt><dd> drink<br><span> coffe</span></dd></dl>
2、
type
设置有序列表序号
属性****效果无1.2.3.4.
A
A.B.C.D.
a
a.b.c.d.
I
I.II.III.IV.
i
i.ii.iii.iv.
3、设置无序列表样式
用法：
style
属性中的
list-style-type
值效果
disc
实心圆点
circle
空心圆点
square
方块
4、通过嵌套实现多级列表
<ol><li><b>这是有序列表第一条</b></li><li>有序列表第二条：无序列表
<ultype='disc'><li>空心圆点
<ultype='circle'><li>第一个空心圆点</li><li>第二个空心圆点</li></ul></li><li>方块
<ultype='square'><li>第一个方块</li><li>第二个方块</li></ul></li></ul></li><li>有序列表第三条：自定义列表
<dl><dt>三级小标题</dt><dd>-段落</dd><dt>三级小标题</dt><dd>-段落</dd></dl></li></ol>
十四、HTML区块
1、常见的行内元素和块级元素
常见的行内元素元素说明
<a>用于定义超链接<img>用于嵌入图像<input>用于创建输入组件<span>用于对文档中的部分内容进行分组<textarea>用于多行文本输入，通常用于表单中<select>用于下拉列表<label>用于定义表单控件的标签<strong>用于定义重要文本<b>用于定义粗体文本/效果和类似，但是没有语义上的强调<sub>用于定义下标文本，例如分子式<sup>用于定义上标文本，例如平方立方<i>用于定义斜体文本<em>用于定义强调文本，显示为斜体<del>用于定义已被删除的文本，显示为中间有一条杠<u>用于定义下划线文本常见的块级元素元素说明
<div>用于定义一个块级元素，对文档中的内容进行分组<table>用于创建表格，包含<thead><tbody><tr><th><td>``````<form>用于创建表单<p>用于定义段落<ul>用于创建无序列表<h1>用于定义一级标题<h6>用于定义六级标题<hr>用于定义水平线<pre>用于定义格式化的文本，通常保留文本中的空额和换行<address>用于定义联系信息<center>用于将内容居中对齐，已废弃<marquee>用于创建滚动的文本或者图象<blockquote>用于定义长引用，通常缩进表示 滚动起来吧！太好玩了！(``标签可以定义动起来的文字)
2、行内元素和块级元素的区别
·块级元素
- 总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列；
- 高度、宽度、margin及padding都是可控的，设置有效，有边距效果；
- 宽度没有设置时，默认为100%；
- 块级元素中可以包含块级元素和行内元素。
·行内元素
- 和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列；
- 高度、宽度是不可控的，设置无效，由内容决定。
- 根据标签语义化的理念，行内元素最好只包含行内元素，不包含块级元素。
3、使用display属性能够将三者任意转换：
- display:inline;转换为行内元素；
- display:block;转换为块状元素；
- display:inline-block;转换为行内块状元素。
4、HTML
<div>
元素
- HTML
<div>元素是块级元素，它可用于组合其他 HTML 元素的容器。 <div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。- 如果与 CSS 一同使用，
<div>元素可用于对大的内容块设置样式属性。 <div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。
5、HTML
<span>
元素
- HTML
<span>元素是内联元素，可用作文本的容器 <span>元素也没有特定的含义。- 当与 CSS 一同使用时，
<span>元素可用于为部分文本设置样式属性。
十五、HTML布局
1、使用
<div>
块级元素布局（常用）
原理：把文档内的内容抽象分为多个块，然后使用flex、float等来调整各个块的位置
2、使用
<table>
表格元素布局（比较复杂）
原理：把文档内容具象按照表格分为多个块，每个块占据一个表格的单元格，然后把内容放在单元格内
十六、HTML表单
1、表单元素
- 表单是一个包含表单元素的区域。
- 表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。
表单元素说明
创建表单<form>
定义一个标签，例：用户名：<label>
提交按钮<submit>
下拉列表，定义一个下拉框<select>
单选框，同一张表单中只能勾选一个<radio-buttons>
复选框，在同一张表单中可以选择多个<checkbox>
submit:当用户单击确认按钮时，表单的内容会被传送到服务器。
表单的动作属性 action 定义了服务端的文件名。
method会定义提交的方法，GET或POST。
2、表单输入元素
- 多数情况下被用到的表单标签是输入标签 。
- 输入类型是由 type 属性定义。
表单元素说明
元素是一个多行纯文本编辑控件，适用于允许用户输入大量自由格式文本的场景（placeholder）<textarea>
用于输入用户名或密码等数字内容<input>
用于在input中定义密码<type='password'>3、进阶表单
下面是一个带边框的表单
<formaction=""method="get"><fieldset><legend>Personal information:</legend>
Name: <inputtype="text"size="30"><br>
Password: <inputtype="password"size="30"><br>
Sex:
<inputtype="radio"name="sex"value="male">Male
<inputtype="radio"name="sex"value="female">Female<br>
Rabbits: <inputtype="checkbox"name="rabbits"value="Basketball">Basketball
<inputtype="checkbox"name="rabbits"value="Swimming">Swimming
<inputtype="checkbox"name="rabbits"value="Football">Football<br>
Address: <selectname="country"selectname="country"><optionvalue="china"selected>China</option><optionvalue="usa">USA</option><optionvalue="uk">UK</option></select><br/>
Tips: <br/><textareaname="tips"rows="5"cols="30"placeholder="Enter your tips here..."></textarea><br/><inputtype="submit"value="Submit"></fieldset></form>
十七、HTML框架
1、语法
<iframesrc="URL"></iframe>
2、元素属性
属性说明
height
用于设置标签高度
width
用于设置标签宽度
frameborder
用于设置框架边框
name
用于超链接
3、用iframe来显示目标链接页面
<iframesrc="demo_iframe.htm"name="iframe_a"></iframe><!--点击超链接，页面会显示在iframe中--><p><ahref="https://www.runoob.com"target="iframe_a"rel="noopener">RUNOOB.COM</a></p>
十八、HTML颜色、颜色名、颜色值
三种表示方法：
rgb表示法- rgb(0,0,0)-rgb(255,255,255)- 三个值分别代表红、绿，蓝- rgba(0,0,0,0.5)中的a代表不透明度- r值较大时，显示为红色色调，g->绿色色调，b->蓝色色调- 如果三个值相等，就是从黑到白，灰色色调
颜色名表示法- red->红色、green->绿色、blue->蓝色…
十六进制表示法- #000000->#FFFFFF从黑色到白色- 与rgb类似
十九、HTML Javascript
空
二十、HTML URL
空
二十一、HTML5
HTML5 中的一些有趣的新特性：
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
HTML5 的改进
- 新元素
- 新属性
- 完全支持 CSS3
- Video 和 Audio
- 2D/3D 制图
- 本地存储
- 本地 SQL 数据
- Web 应用
本文转载自: https://blog.csdn.net/weixin_64574004/article/details/142678291
版权归原作者 下蛋哥 所有， 如有侵权，请联系我们删除。
版权归原作者 下蛋哥 所有， 如有侵权，请联系我们删除。