web基础

元气满满的凡诚

墨衍会员 · AI 创作全网分发码龄6年

关注

原创最新推荐文章于 2026-06-04 16:38:47 发布 1.3k 阅读 AI 写同款· GEO 优化 ›

Web安全基础篇黑客利用网站操作系统的漏洞和web服务程序的SQL注入漏洞等得到web服务器的控制权限，轻则篡改网页内容，重则窃取重要内部数据，更为严重的则是在网页中植入恶意代码，使得网站访问者受到侵害。阅读详情

web基础

一.html 基础

1 web概述

web 是一个分布式的超媒体信息系统，它将大量的信息分布于整个internet上。web 的任务就是向人们提供多媒体网络信息服务。

从技术层面看，web主要有三点：超文本协议(http),统一资源定位符(url)，超文本标签语言(html)。

1.1 超文本传输协议

超文本传输协议(html,hyperText transfer protocol)是客户端或其他程序与web服务器之间的应用层通讯协议，用于实现客户端和服务器端的信息传输。（共有五层）

物理层数据链路层网络层运输层应用层

1.2 统一资源定位符

统一资源定位符(url,uniform/universal resource locator)用于完整的描述internet上网页和其他资源地址的一种方法。实现互联网信息的定位统一标识，可以是本地磁盘也可以是互联网上的某一台计算机，也可以是internet站点。简单的说，url就是网址。

protocal://hostname[:port]/path/[;parameters][?query]#fragment

protocal(协议)：指定传输协议，最常用的就是http协议，file协议(访问本地磁盘)，ftp协议(文件传输协议，上传到服务器，或者下载到服务器)

Scheme	访问	用于…
http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页，加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		计算机上的文件。

hostname(主机名)：是指定存放资源的服务器的域名或者ip地址

port(端口)：省略时使用默认端口，各种常用的传输协议都有默认的端口号，http默认的端口号是 80。

path(路径)：由0个或者多个 / 号字符隔开的字符串，一般用于表示主机的一个目录或者文件地址。

parameters(参数)：用于指定特殊参数。

query(查询)：用于给动态网页指定参数，可以有多个参数，中间用 & 符号间隔，每个参数的名和值用 = 符号隔开。

fragment(字符串)：用于指定网络资源中的片段。

1.3 超文本标记语言

超文本标记语言(html,hypertext mark-up language)目前网络上运用最广泛的语言，也是构成网页文档的主要语言。文档制作简单，支持多种文档嵌入，功能强大。

简易性：是包含html标签文件，支持任何文本编辑工具。

可扩展性：html 语言的广泛运用，带来了加强功能，增加标识符等要求，html采取扩展子类元素的方式，从而为系统扩展带来了保证。

2 html 文档结构

html 有html部分，head部分，body部分组成

<html>
    <head>
        
    </head>
    <body>
    	正文部分
    </body>
</html>

2.1 html标签

文档必须以<html>标签开始，以</html>结束，web 浏览器接收到html文件后，遇到<html>标签时开始解释，遇到</html>标签时停止解释，文档的所有内容都在两标签之间。

2.2 head标签

head标签以<head>标签开始，以</head>结束，head部分主要用于：

对页面使用的字符集，脚本语言，窗口标题，标签的样式进行说明和设置。

<title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>

标签名	介绍	备注
<title></title>	页面的标题部分	浏览器工具栏标题；收藏夹内标题；搜索引擎结果的标题。
<meta></meta>	（元标签）为Html文档提供额外的信息	浏览器（如何显示内容或重新加载页面），搜索引擎（关键词）
<style></style>	设置内联样式(css代码)	可以直接写，也可以连接到
<link>	链接到外部js代码	标签定义文档与外部资源的关系
<script>	设置js代码
<base>	设置默认的跳转地址的`基准`和跳转方式	基准，并不是默认跳转地址，只是url的一部分
<noscript>	浏览器关闭js或者不能运行js时替代的内容	可以写body标签中的所有代码

2.3 body标签

body标签以标签开始，以结束，该部分是html文档的主体。包含了绝大部分需要呈现给浏览者浏览的内容。如段落，列表，图像和其他元素，等html页面元素，都通过一些标准的html来描述。在body中除了可以书写正文文字内容外，还可以嵌入许多由专用标签标识的内容。

标签名	介绍	备注
<br/>	换行
<p></p>	分段
<h#></h#>	标题标签
<font></font>	文本标签
<hr>	分割线
<ul> <ol> <dl>	列表
<a></a>	超链接
<img/>	图像
<iframe>	框架
<form>	表单
<frameset>	框架集
<table>	表格

3 html语法

html文档由预定义好的html标签和用户自定义的内容编写而成。html标签由ascⅡ字符来定义，用于控制页面内容的显示。

3.1 介绍

html通过标签控制文档的内容和外观，可以将标签，看作是html的命令。

html标签以一对尖括号为开始 <> 以 </>表示html 标签的结束，

标签必须是闭合的，闭合是指标签的最后要有一个/来表示结束，但不一定成对出现，例如<br/>就是单独出现，用于表示换行，诸如</br>格式的标签统称为空标签。

标签与大小写无关，html语言不区分大小写但是为了保持内容的一致性和可读性，推荐使用小写。

3.2 属性

html属性一般都出现在标签中，作为html标签的一部分，html属性包含了标签所需要的额外的信息，并且一个标签可以拥有多个属性。

在为标签添加属性的时候需要注意如下两点：

1.属性的值需要在双引号中

2.属性名和属性值成对出现。

其语法格式如下：

<标签名 属性名1 = "属性名2" 属性名2 = "属性名2" >内容</标签名>

虽然html不需要双引号解析但是推荐使用双引号，符合规范。

3.3 注释

可以在html文档中添加注释，以方便阅读，查找，比对。当用浏览器查看的时候不显示在页面上。

<!-- 这都是注释 -->

4 html常用标签

标签是html语言中最基本的单位，也是html语言中最重要的组成部分。

html标签参考手册

4.1 meta标签

<html>
    <head>
        <meta http-eqyuv = "refresh" content = "">
    </head>
    <body>
    	正文部分
    </body>
</html>

标签作为子标签只出现在页面标签，可为html文档提供额外的信息。

name 和 content

该组<meta>标签用于描述网页，他以名称/值的形式表示，名称通过name属性表示，其值为所要描述的内容，而其值则通过content 属性表示

值	说明	备注
descruption	用于描述，使用content属性提供的简短描述，
keywords	用于定义网页关键字，使用content属性提供网页的关键词。
robots	用于定义网页送所引起索引方式，使用content属性描述网页搜索引擎的方式。

http-equiv 和content

该组属性用于提供http协议的相应报文头（mime、文档头），以名称/值的形式表示，其值为所要描述的内容，二内容的值通过content属性表示。

值	说明	备注
content-type	用于定义用户的浏览器或者相关设备如何显示将要加载的数据，或者如何处理将要集中在的数据。
refresh	用于刷新与跳转页面。使用content属性表示刷新或者跳转的开始时间与跳转的网址。
expires	用于页面缓存过期时间，使用content属性白哦是页面缓存的过期时间。一旦页面过期，将从服务器上重新下载新的页面。
pragma与no-cache	用于定义页面缓存。使用content属性的弄-cache值表示是否缓存网页。

charset = UTF-8

用于设定网页的编码方式为UTF-8

下面列出了适用于大多数 HTML 元素的属性：

属性	描述	备注
class	为html元素定义一个或者多个类名(类名从样式文件引入)	class=""引号中可以填入多个class属性
id	定义元素的唯一id	每个标签只能有一个Id值
style	规定元素的行内样式(内联样式)
title	描述了元素的额外信息	移动到该元素上时显示的信心。

4.2 文本标签

html中的文本相关主要分为标题标签和字体标签。

1.标题标签

html中的标题字体用 <#h></#h>

# 代表标题字体的大小，取值为 1~6之间的整数，随取值变大而变小

标题和字体大小正好相反

<h1 align="left">这是一个一级标题</h1>
<h2 align="right">这是一个二级标题</h2>
<h3 align="center">这是一个三级标题</h3>
<h4>这是一个四级标题</h4>
<h5>这是一个五级标题</h5>
<h6>这是一个六级标题</h6>

align 属性用于设置标题的对其方式，该取值可以为 left,right,center.

2.字体标签

字体标签<font>是html中很重要的一个文本标签。

<font face="字体" size="字号" color="字体颜色">内容</font>

face 用于控制文字显示的格式，其取值为特定的字体类型。字体类型可以分为中文字体类型和英文字体类型，中文字体类型只对中文字体有效，英文字体类型只对英文字体有效。
size 属性用于指定的文字显示大小，即字号。size有两种取值：取1~7的自然数，这种取值被称为绝对大小，网页中默认字号为3号，带正负号的取值，区间为[-4，+4]被称为相对取值，它们是相对于绝对大小的字号3的然后进行相应的放大或者缩小。

color 属性用于指定字体现实的颜色，字体颜色的取值可以是使用十六进制颜色，常见的颜色可以使用英文单词表示。

补充字体标签：

<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
这些标签常用于显示计算机/编程代码。

字符标签	说明	备注
<b>……</b>	粗体
<i>……</i>	斜体
<u>……</u>	对文本加下划线
<strong>……</strong>	对文本属性加强效果相当于粗体
<big>……</big>	将当前文字字体大小的基础上增大一号
<small>……</small>	将当前文字字体大小的基础上减小一号
<sup>……</sup>	上标
<snb>……</sub>	下标
<em>……</em>	强调文本，通常以斜体表示

特殊字符	转义字符	备注
空格
大于号 >	>
小于号 <	<
引号 "	"
版权号 ©	©

HTML 中的常用字符实体是不间断空格( )。

浏览器总是会截短 HTML 页面中的空格。如果在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，需要使用   字符实体。

实体名称大小写敏感！

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
’	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

4.3 分隔标签

html分隔标签用于区分文字段落，分为文字分隔标签和分隔线标签两类。

文字分隔标签

强制换行符标签<br>
强制分段标签<p>

<!-- 强制换行符-->
内容1 <br/> 内容2

<!--强制分段符-->
<p>内容</p>

分割线标签
```
<hr width="宽度" size="厚度" color="颜色" align="对齐方式" noshade="阴影"/>
```
width: 用于设置<hr>的宽度，单位为像素(xp)，也可使用百分比(占视口百分比)来设定。

size: 用于设置<hr>的厚度。

color:用于设置分割线的颜色。

noshade:用于设置<hr>的阴影。

4.4 分组标签

div标签

元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

是一个列状的块，可以用于布局。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

span标签

是内联元素，可用作文本的容器

<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。提供独特的字体或者是颜色。

<p>xxxxx<span style="color:blue">xxx</span>xxxxxx</p>  <!--为特定文本修改样式-->

4.5 link 引入标签

link可以引用外部的文件

css文件
js文件
favicon 图标

favicon 图标是显示在页面标签旁的图标，必须使用文件名.ioc 格式的图片充当。

创建步骤：

制作favicon图标
将favicon图标放置到网站的根目录下
html页面引入favicon图标

5 列表

html 列表将相关的信息集合在一起，事条理清晰，便于人们阅读。

5.1无序列表

无序列表又称符号列表，列表的项目可以以任何顺序进行排列。

无序列表的圆形可以更换成圆点或者正方形

<html>
    <head>
        <meta http-eqyuv = "refresh" content ="">
    </head>
    <body>
        <!--顺序无关紧要-->
        <ul>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
        </ul>
    </body>
</html>

5.2 有序列表

有序列表又称编号列表，列表中的项目是按照先后顺序排列的。

有序列表的数字可以更换成大小写字母，大小写罗马字。

<html>
    <head>
        <meta http-eqyuv = "refresh" content = "">
    </head>
    <body>
        <!--顺序排列-->
        <ol>
            <li>项目</li>
            <li>项目</li>
            <li>项目</li>
        </ol>
    </body>
</html>

5.3 自定义列表

自定义列表将列表中的项目与其定义或者描述配对显示。

<html>
    <head>
        <meta http-eqyuv = "refresh" content = "">
    </head>
    <body>
        <!--顺序排列-->
        <dl>
            <dt>分类</dt>
            		<dd>项目</dd>
            		<dd></dd>
            		<dd></dd>
            <dt>分类</dt>
                    <dd></dd>
            		<dd></dd>
            		<dd></dd>
            <dt>分类</dt>
                    <dd></dd>
            		<dd></dd>
            		<dd></dd>
        </dl>
    </body>
</html>

6 超链接

互联网的精髓就在于互相连接，即超链接，一个网站的各个网页都是通过超链接来衔接起来的。

1.文字超链接：在文字上建立超链接。

2.图像超链接：在图像上建立超链接。(<a helf=“跳转地址”>

<img src=“图片路径”></img>

</a>)

3.热区超链接：在图像的指定区域建立超链接。

4.在文档的头部定义<base href=“默认地址” target=“打开方式”> 即使以后超链接标签不设置完整地址，跳转方式，都将使用<base>标签的默认值进行。

<!--打开链接-->
<a href="url" target="……" title="……" id="……">内存</a>

<!--打开默认邮箱-->
<a href="mailto:邮箱地址" target="……" title="……" id="……">内存</a>

<!--设立锚点-->
<a name="锚点名">内容</a> 
<!--跳转到锚点-->
<a href="#锚点名"></a>

href属性：用于定义超来凝结的跳转地址，其取值可以是本地地址，也可以是远程地址，可以是一个网址，甚至是一个html文档的一个位置或者是一个邮箱地址，可以是相对路径也可以是绝对路径。

target属性：用于指定目标的打开位置。

title属性：鼠标悬停在超链接上的时候，下那是该超来凝结的文字注释。

id属性：在目标文件中定义的一个锚点，标识超链接跳转的位置。

内容：这就是所定义的超链接的一个外套。

target属性的取值范围：

值	说明	备注
_self	当前窗口中打开目标文件，默认值
_blank	在新的窗口中打开网页
_top	在顶层框架中打开网页
_parent	在当前框架中的上一层框架打开网页
iframe标签中的定义名	在定义iframe框架中打开网页

7 图像

把图像文件插入到文档中

动图和静态图的插入语法相同

<img str="图像路径" alt="" align="" height="" width="">

str属性：图像路径。

alt属性：浏览器如果没有载入图片功能时，显示alt属性的值。

align属性：设置图片的垂直对齐方向。

height属性：设置图片的高度，缺省显示图片的原始高度。

width属性：设置图片的宽度，缺省显示图片的原始高度。

8 表格标签

表格可以清晰地展现数据之间的关系，实质对比更容易理解。

最外层<table> > <thead> & <tbody> & <tfoot> &<caption> > <tr> & <th> > <td>

表格中还能放表格，列表，极其丧心病狂！

<html>
    <head>
        <meta http-eqyuv = "refresh" content ="">
    </head>
    <body>
        <table>
            <caption>这是一个标题</caption>	<!--定义表格标题-->
            <thead>
                <th>表头</th>		<!--定义表格表头-->
            	<th>表头</th>
            </thead>
            <table>
            <tbody>
                <tr>		<!--定义表格的一行-->
                    <td>数据</td>		<!--定义表格的一个单元格-->
                	<td>数据</td>
                </tr>   <!--定义表格的一行-->
                <tr>
                    <td>数据</td>		<!--定义表格的一个单元格-->
                	<td>数据</td>
                </tr>   
            </tbody>
            <tfoot>
                <tr>		<!--定义表格的一行-->
                    <td>脚注</td>
                </tr>         
            </tfoot>
        
        
        </table>

<table>标签: 定义一个单元格。

<caption>标签: 定义一个表格标题。必须紧跟在<table>之后，且每个表格只能有一个标题。

<th>标签：定义一个单元格内的表头标签，通常是粗体。

<tr>标签：定义表格中的一行。

<td>标签：定义表格中一行中的一个单元格。

<thead>标签：定义表格的表头部分。

<tbody>标签：定义表格的主体部分。可以将白哦个中的一行或者几行分成不同的部分，不同部分不能跨越。

<tfoot>标签：定义表格的页脚。

<col>标签：定义表格中针对一个或者多个列的属性值，只能在表格或<colgroup>标签中使用。

<colgroup>标签：定义表格列的分组，通过此标签可以对列进行组合以便于进行格式化，此标签只能再table内部使用。

表格常用属性：

表格属性	说明	备注
border	设置表格边框
bgcolor	设置表格背景色
background	设置表格背景图片
width	设置表格的宽度，单位像素或者百分比
height	设置表格的长度，单位像素或者百分比
align	设置对齐方式，有left right center
cellspacing	设置单元格之间的距离
cellpadding	设置单元格内容与边框的距离
colspan	单元格水平合并，值为合并单元格的数量	可以看作占水平的格数
rowspan	单元格垂直合并，值为合并单元格的数量	可以看作占垂直的格数

9 区块元素和内联元素

大多数 HTML 元素被定义为块级元素或内联元素。

区块元素：

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

内联元素：

内联元素在显示时通常不会以新行开始。

可以

10 html的布局

网页布局对改善网站的外观非常重要。

1. div 布局法

可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

div布局

2. table布局法

table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

并不推荐，<table>目的是呈现表格化数据，并不用于网页布局。

11 表单

表单是一个包含表单元素的区域。表单并不可见，只是一个透明的容器。

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

表单使用表单标签 <form> 来设置:

属性	值	描述
accept	MIME_type	规定服务器接受的文件类型
accept-charset	character_set	规定服务器可处理的表单数据字符集
action	URL	规定当前提交表单时向何处发送数据
autocomplete	On / off	规定是否启用表单的自动发送功能
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	规定在向服务器发送表单数据之前如何进行编码（适用于 method=“post” 的情况）
method	get / post	规定用于发送表单数据的 HTTP 方法。
name	text	规定表单的名称。
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证。
target	_blank _self _parent _top	规定在何处打开 action URL。

12.1 输入元素

多数情况下被用到的表单标签是输入标签（\

）。输入类型是由类型属性（type）定义的。

<form>
	<input type="输入元素类型" name="键名"><br>
</form>

文本域

文本域通过<input type=“text” name=“键名”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

如果加上 value=“默认值” 定义文本域的默认值

在大多数浏览器中，文本域的默认宽度是 20 个字符。

<form>
创建一个文本域：<input type="text" name="键名"><br>
创建一个文本域：<input type="text" name="键名" value = "未输入时的默认显示">

</form>

密码字段

密码字段通过标签<input type=“password” name=“键名”> 来定义。

密码字段字符不会明文显示，而是以星号或圆点替代。

密码字段并无更具体的保密能力。

<form>
创建密码字段： <input type="password" name="键名">
</form>

单选按钮

<input type=“radio” name=“键名” value=“单选按钮的文本”> 标签定义了表单单选框选项.

多个单选按钮在一个<form>标签中，只能单选其中之一。

同名的为一组单选按钮。

这是一个单选框

<form>
<input type="radio" name="键名一" value="值1">单选框文本<br>
<input type="radio" name="键名一" value="值2">单选框文本
</form>

复选框

定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

同名的为一组复选按钮。

<form>
    
<input type="checkbox" name="键名" value="复选按钮1">复选框文本 	<br>
<input type="checkbox" name="键名" value="复选按钮2">复选框文本
    
</form>

提交按钮

定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。

<form name="input" action="动作相应位置" method="动作请求方式（get/post）">
输入文本框: <input type="text" name="user">
<input type="submit" value="提交按钮">
</form>

复位按钮

当用户单击按钮时，复位按钮所在的标签中的所有内容恢复到默认状态。

<form >
    
<input type="reset" value="重置">
    
</form>

下拉列表

创建一个下拉列表，下拉列表框是一个可选列表。

下拉列表可以选择默认值。

selected属性选定默认值，下拉列表以输入顺序为默认顺序。

<!--无默认值-->
<form action="">
<select name="cars">
<option value="值一">下拉列表文本一</option>
<option value="值二">下拉列表文本二</option>
<option value="值三">下拉列表文本三</option>
<option value="值四">下拉列表文本四</option>
</select>
</form>

<!--设定默认值-->
<form action="">
<select name="cars">
<option value="值一">下拉列表文本一</option>
<option value="值二" selected>下拉列表文本二</option>
<option value="值三">下拉列表文本三</option>
<option value="值四">下拉列表文本四</option>
</select>
</form>

12 iframeset框架

用iframeset来划分页面，将一个页面划分为多个窗口。

<html>
	<head>
   
    	<title></title>
    </head>
	<body>
    	<frameset cols[rows]="10%，*"> <!--使用cols纵向划分，使用rows横向划分，可以控制划分的大小，可以使用具体大小，也可以使用百分比，*号为自动计算-->
        	<frameset cols[rows]="50%，*"> <!--frameset可以嵌套使用，进行继续的划分-->        	
            	<frame src="资源地址" name="窗口名"/><!--可以通过窗口名来指定那个窗口打开链接。-->
                <frame src="资源地址" name="窗口名"/>
        	</frameset>
            
            <frame src="资源地址" name="窗口名"/>      
            
        </frameset>
	</body>
</html>

frameset属性：

属性名	说明	作用
cols	用像素数或者百分比分割左右窗口，*表示剩余部分。
rows	用像素数或者百分比分割上下窗口，*表示剩余部分。
frameborder	设置框架的边框，其值只有0和1.0表示没有边框，1表示显示边框。边框是无法调整粗细的。
framespacing	表示框架与框架间的空白距离。

frame属性：

属性名	描述	备注
bordercolor	设置边框颜色
border	设置边框粗细
name	框架的名称，在设置超链接的时候作为框架的标记。
scrolling	设置设置显示滚动条，yes表示显示，no表示不显示，auto表示根据情况自动调整。
noresize	设置框架大小是否固定，如果不设置则可以使用鼠标进行调整。
marginwidth	设置内容与窗口左右边缘的距离，默认为1
marginheight	设置内容与窗口上下边缘的距离，默认为1
width/height	框架的宽度即高度，默认为100
align	对齐方式

12# iframe框架

URL指向不同的网页

<iframe></iframe>标签用于在一个页面中再嵌套另一个页面

<iframe src="页面的路径" width="单位xp，也可以输入百分比" height="单位xp，也可以输入百分比" frameborder="边框厚度，单位xp" name="iframe的名字"></iframe>

12.1 使用iframe来显示超链接页面

在iframe标签中定义name 属性，在a标签中设定helf在定义target属性等于iframe标签中的name属性，以iframe为打开方式，使用iframe标签在当前页面显示超链接。

iframe中的src属性定义默认显示的页面，a中定义的href属性定义的是点击后跳转的页面。

<iframe src="默认显示文件路径" name="定义名"></iframe>
<a href="超链接网址" target="iframe标签中的定义名" >RUNOOB.COM</a>

13 html颜色

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

浏览器也支持较少的通用单词直接写入属性。

六位十六进制颜色：  #FF00FF     rgb颜色： rgb(225,0,111)	三位十六进制颜色： #0F0

六位十六进制颜色：

# : 标志此代码是16进制颜色,之后的每两位分别表示红绿蓝颜色程度。

rgb颜色：

rgb（）：标志这是一个rgb表示的颜色，每一位坐标表示红绿蓝颜色的成都。

三位十六进制颜色：

# : 标志此代码是16进制颜色,之后的每一位分别表示红绿蓝颜色程度。

14 script脚本

<script> 标签用于定义客户端脚本，比如 JavaScript。

<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。

可以直接在html输出，也可以进行事件响应，也可以处理html样式。

<script>
    
document.write("Hello World!")
    
</script>

15.1 noscript

元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

<script>
document.write("Hello World!")
</script>

<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript> <!--浏览器不支持脚本或者禁用脚本时，才会显示 -->

二.html 5

html5的新增特性主要是针对以前的不足，新增了一些新的标签，新的表单，和新的表单属性。

这些新特性都存在兼容问题，IE9之后才兼容。

<header> :头部标签
<nav>: 导航标签
<article>:内容标签
<section>:定义文档的某个区域
<aside>:侧边栏标签
<footer>:尾部标签

这种语义化标准主要是针对搜索引擎的，这些标签再页面中可以使用多次，再IE9中需要转换为块级元素。移动端更适合。

1.新增的多媒体标签

音频标签：<audio>
视频标签：<video>

可以很方便的再页面中嵌入视频和音频，不用去使用flash和其他浏览器插件。

1.1 视频标签<video>

当前<video>元素支持三种视频格式，尽量使用MP4格式。

浏览器	MP4	webm	ogg
intemet Explorer	y	n	n
Chrome	y	y	y
Firefox	y	y	y
Safari	y	n	n
Opera	y	y	y

语法格式:

<video src="文件路径" controls="controls"></video>

比较完善的使用形式

//从上往下执行，执行成功会跳过下面的代码
<video width="宽度" height="长度" controls>
	<source src="文件.mp4" type="video/mp4"> 
    <source src="文件.ogg" type="video/ogg">
    浏览器不支持video标签！
</video>

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	URL	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

1.2 音频标签<audio>

谷歌浏览器默认为静音播放。

音频标签支持三种格式：

浏览器	MP3	wav	ogg
intemet Explorer	y	n	n
Chrome	y	y	y
Firefox	y	y	y
Safari	y	y	n
Opera	y	y	y

语法格式：

<audio src=""></audio>

比较完善的使用形式：

//从上往下执行，执行成功会跳过下面的代码
<audio width="宽度" height="长度" controls>
	<source src="文件.mp3" type="audio/mp3"> 
    <source src="文件.ogg" type="audio/ogg">
    浏览器不支持audio标签！
</audio>

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	如果出现该属性，则音频输出为静音。
preload	auto metadata none	规定当网页加载时，音频是否默认被加载以及如何被加载。
src	URL	规定音频文件的 URL。

2.新增的表单标签

html5新增了许多表单类型，之前需要使用js才能实现的表单在html5中只需要添加相应的属性即可实现。

以下表单属性对于移动端也适用，且更好。

属性值	说明	备注
type=“email”	限制用户输入必须为Email类型
type=“url”	限制用户输入必须为url类型
type=“data”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type=“number”	限制用户输入必须为数字类型
type=“tel”	手机号码
type=“search”	搜索框
type=“colot”	生成一个颜色选择表单

3.新增的表单属性

HTML5新增了许多表单属性。

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动获取焦点到指定表单
autocomplete	off/on	当用户开始此字段的键入时，浏览器将基于之前键入过的值，应该出现在字段中填写的选项。
multiple	multiole	可以多选文件提交

三.网站TDK三大标签SEO优化

SEO 汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎提升网站的排名，提高网站的知名度。

页面必须有三个标签符合SEO优化。

title标签：
description标签：
keyword标签：

title 网站标题

title 具有不可替代性，是内页的第一个重要的标签，是搜索引擎了解网页的入口对网页主体归属的最佳判断点。

title：网站名 - 网站的介绍（尽量不要超过30个汉字）

description 网站说明

简要的说明网站的主要功能和作用。

多采用：我们提倡，我们是，我们提供，作为。

<meta name=" description" content="网站的介绍">

keywords 关键字

keywords 是页面关键词，是搜索引擎的关注点之一。

keywords最好限制为6~8个词，关键字之间用英文逗号隔开，采用 关键字1,关键字2 的形式。

<meta name="keywords" content="`关键字1,关键字2">

四.重要常识

记载这许多实用的的常识。

LOGO SEO 优化

logo 里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方的重要性。
h1里面再放一个链接，可以返回首页，把logo背景图片给链接即可。
为了搜索引擎收录，可以再链接中放文字(网站名称)，但是文字不要显示出来。
方法1：text-indent移到盒子的外面(text-indent：-9999px)，然后overflow：hidden。
方法2：font-size：0；就看不到文字了。
| |
| placeholder | 提示文本 | 表单的提示信息，存在默认值将不显示 | |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动获取焦点到指定表单 | |
| autocomplete | off/on | 当用户开始此字段的键入时，浏览器将基于之前键入过的值，应该出现在字段中填写的选项。 | |
| multiple | multiole | 可以多选文件提交 | |