是什么组成了html？html组成元素有哪些？

页html的组成是由：文字、图片、音频、视频、超链接组成。

1-文字由什么组成？

文字标签在“body”标签下，由文本标签比如：标题<h1>~<h6>,段落<p></p>等；

2-图片怎么显示的？

图片标签img单标签，也是在“body”标签下，显示引用文件；

3-音频、视频、标签

音频标签“audio”和视频标签“video”，这两个标签都是双标记，引用文件显示内容，本身是一个功能。

4-超链接

超链接标签“a href="路径位置"”是单标记，需要有载体，点击活着触发跳转。

以下是示例：

<body>

<h1>这是标题也是文字</h1>

<p>这是段落，文本，文字</p>
<img src="./image/1auto的副本.gif" alt="300"><br> 这是一个图片标签<br><br>

<audio src="./image/yinyue.mp3" controls></audio><br>

这是一段音频，由音频标签让其显示<br><br>

<a href="https://www.baidu.com"><br> 这是一个链接，点击够可以跳转</a>

</body>

</html>

----------------------------------------------------------------------------

下图是显示

个人理解，如有错漏，请留言指正。

TML基础简介
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

HTML是一个网页文件的拓展名，和txt、jpg、mp3一样，是一个文件格。.html文件就是网页文件。

2.html 的格式化标签

<!DOCTYPE>
<html>
--html是一个双标签开始标签
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>
</title> --可能是标题
</head>
<body>--用来存放页面中的内容
</body>
</html> --结束标签

DOCTYPE----文档类型声明
meta标签----设置页面编码格式，关键字，以及页面的描述
<title></title>--------->标题部分
<head></head>------>页面的头部分
<body></body>------>页面的主体部分

2.内容标签

这其中<hr> <br> 是单标签
<div></div> <span></span> 无意义区块容器标签
eg:
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

HTML标记—注释标记

<!--注释语句-->

标题：
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

段落：
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

HTML 链接

<a href="http://www.runoob.com">这是一个链接</a>
当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。
一个统一资源定位器(URL) 用于定位万维网上的文档。
URL - 统一资源定位器
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

这里需要注意:使用超链接做下载,并不是超链接完成的下载功能,而是通过超链接跳转到了一个有下载功能的页面。

常见的 URL Scheme

HTML 图像

alt 属性用来为图像定义一串预备的可替换的文本。

3.HTML属性

属性实例:

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：<a href="http://www.runoob.com">这是一个链接</a>

4.HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <th> 标签进行定义。

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

5.HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

文本域（Text Fields）

文本域通过<input type="text"> 标签来设定
当用户要在表单中键入字母、数字等内容时，就会用到文本域
密码字段
密码字段通过标签<input type="password"> 来定义:
<form>
FirstName: <input type="text" name="firstname"><br>
Password: <input type="password" name="pwd">
</form>

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
单选有时需要设置默认选项,需要设置checked属性:
<input type="radio" name="sex" checked ="checked"/>男

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
多选框一般不需要设置默认选项,如果要设置,也是设置checked属性

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
这里需要注意的是: Submit必须要和form一起使用才能达到效果
action 设置表单提交参数路径
method 当前请求方式(同iOS开发网络请求一样,get/post)

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

图片按钮(使用不多)

Select下拉框

selected默认选项
<select>
<option selected="selected" >选项一</option>
<option>选项二</option>
</select>

Textarea文本域

<textarea></textarea>

6.HTML 列表

HTML 支持有序、无序和定义列表:

无序列表使用 <ul> 标签
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项项使用数字来标记。
<ol>
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ol>
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
去除点去除下划线
a {
text-decoration: none;
}
ul {
list-style: none;
}

7.内联样式- 在HTML元素中使用"style" 属性

HTML样式实例 - 背景颜色
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

HTML 样式实例 - 字体, 字体颜色，字体大小

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

HTML 样式实例 - 文本对齐方式

<h1 style="text-align:center;">居中对齐的标题</h1>

而关于其他CSS内容,这里就简单介绍一下:

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>
<style type="text/css">
body {background-color:yellow;
}
p {color:blue;}
</style>
</head>

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML 样式标签

最后提一下什么是Web安全色?

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。

、HTML基本信息

注释：

DOCTYPE：就是告诉浏览器，我们要使用什么规范

head：网页头部标签

title：网页标题
meta：描述性标签，描述网站的信息，用来做SEO

charset = "UTF-8"
name = "keyword" content = ""关键词
name = "descrisption" content = ""描述

body：代表网页主题

二、网页基本标签

标题标签

<h1>一级标签</h1>一直到6级标签

段落标签

<p>段落标签</p>

换行标签

<br/> /是闭合的意思，单标签，闭不闭合都行

水平线标签

<hr/>

字体样式标签

<strong>粗体</strong>
<em>斜体</em>

注释

特殊字符

空格 ---->一个空格
大于号 >
小于号<
版权符号©

特殊符号就是 & xxx ;

三、图像标签

src 图像地址必填
alt 图像的代替文字(找不到图片的时候显示) 必填
title 鼠标悬停提示文字
width 图像的宽度
height 图像的高度

注意：../ 代表上一级目录

四、链接标签

文本链接

<a href="path" target="目标窗口位置">链接文本或图像</a>

href 链接路径，要跳转带那个位置必填
target链接在哪个窗口打开：常用值_self 当前窗口（默认的）、_blank 新窗口

图像链接：就是嵌套图片标签

页面间链接

从一个页面链接到另一个页面

锚链接

第一步需要一个标记使用name做标记
第二步跳转到标记使用#标记
<a name="top" ></a>
<a href="#top"></a>
上面是页面内的跳转

<a name="down"></a>
<a href="第一个页面的path#down"></a>
页面间的跳转

功能性链接

邮件链接：mailto： <a href="mailto:邮箱"></a>点击后会打开邮箱
qq链接：在qq推广工具里面的

五、行内元素和块元素

块元素

无论内容多少，该元素独占一行
p、h1-h6

行内元素

内容撑开宽度、左右都是行内元素的可以排在一起
a、strong、em...

六、列表

什么是列表：就是一种展示方式

有序列表

<ol> <li></li> </ol>

无序列表

<ul> <li></li> </ul>

自定义列表

<dl>
    <dt></dt> 标题
    <dd></dd> 选项
    <dd></dd>
    <dd></dd>
</dl>

七、表格

为什么使用表格

简单通用
结构稳定

基本结构

单元格
行
列
跨行
跨列

<table border="1px" 边框>表格标签
    <tr>
        <td></td>列标签
        <td></td>
        <td></td>
    </tr>行标签 这代表一行
</table>

跨列：使用colspan="夸的列数" <td colspan="4">

跨行：使用rowspan="夸的行数" <td rowspan="4">

八、视频和音频

视频元素

video
<video src="path" controls autoplay></video>
src:资源路径
controls控制条
autoplay自动播放

音频元素

audio
<audio src="" controls autoplay></audio>

九、页面结构分析

元素名	描述
header	标题头部区域的内容(用于页面或页面中的一块区域)
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	web页面中的一块独立区域
atricle	独立的文章内容
aside	相关内容或应用(常用于侧边栏)
nav	导航类辅助内容

十、iframe内联框架

src必填
width
heigth
name标记
name的使用
<iframe src="" name="hello" frameborder="0" width="1000px" heigth="800px"></iframe>

<a href="path" target="hello"></a>
点击超连接后，会在内联框架里显示这个页面

十一、表单

表单：form

<form method="post|get" action="result.hetml">
    <input />
</form>

method 规定如何发送表单数据常用psot、get
action 表示向何处发送表单数据，把表单的数据发送给那个地方

get方式提交：我们可以在url中看到我们提交的信息，不安全，但高效

post方式提交：比较安全，可以传输大文件

表单元素格式

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image、button默认为text
name	指定表单元素的名称必填，用来后台读取
value	元素的初试值。type为radio时必须指定一个值
size	指定元素的初始宽度。当type为text时或者password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为txet或password时，输入的最大字符数
cheaked	type为radio或cheackbox时，指定按钮是否被选中

单选框

input type="radio"
value 单选框的值
name ：表示组，name一样一次只能选一个，name不一样可以选多个
checked默认选中的

多选框

input type="checkbox"
value = "sleep"
name = "hooby"
checked默认选中的
<input type="checkbox" name="sleep" value="slppe" checked/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
<input type="checkbox" name="sleep" value="slppe"/>shujiao
多选框的结果是以数组的形式返回的

按钮

<input type="button" name="btn1" value="点击" />普通按钮
<input type="image" src ="点击跳转的path"/>图片按钮
<input type="submit"/>提交按钮
<input type="reset"/>重置按钮

下拉框

<select name="列表名称">
    <option value="选项的值" select>中国</option>
    <option value="选项的值">中国</option>
    <option value="选项的值">中国</option>
    <option value="选项的值">中国</option>
    <option value="选项的值">中国</option>
</select>
提交的格式就是列表名称和value

selected 默认选择

文本域

<textarea name="name" cols="列数" rows="行数">文本内容</textarea>

文件域

<input type="file" name="files"/>
<input type="button" value="提交"/>

邮件验证

<input type="email" name="youjian">

URL

<input type="url" name="url">

数字验证

<input type="number" name="num" max="100" min="0" step="10">

滑块

<input type="range" max="100" min="0">

搜索

<input type="search" name="search">

十二、表单的应用

隐藏域 hidden

<input type="text" id="mark" hidden>

只读 readonly

<input type="text" id="mark" readonly>

禁用 disabled

<input type="text" id="mark" disabled>

增强鼠标可用性

<label for="mark">点击</label>
<input type="text" id="mark">

十三、表单初级验证

为什么要进行表单验证：缓解服务器压力、保证数据安全

提示信息

placeholder="提示信息" 在输入框上

非空判断

required

正则表达式验证

pattern
<input type="text" name="mail" pattern="正则表达式">

高级验证使用js

在线咨询

上一篇：HTML 页面显示 XML 数据
下一篇：HTML5(七)-SVG基础入门

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商