web基础

最新推荐文章于 2021-08-11 17:35:16 发布
最新推荐文章于 2021-08-11 17:35:16 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： 前端 文章标签： html web html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FanCheng2017/article/details/116358333
版权

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文档提供额外的信息。

  1. name 和 content

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

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

  2. 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>强调文本，通常以斜体表示
特殊字符转义字符备注
空格&nbsp;
大于号 >&gt;
小于号 <&lt;
引号 "&quot;
版权号 ©&copy;

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

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

实体名称大小写敏感！

显示结果描述实体名称实体编号
空格&nbsp;&#160;
<小于号&lt;&#60;
>大于号&gt;&#62;
&和号&amp;&#38;
"引号&quot;&#34;
’撇号&apos; (IE不支持)&#39;
￠分&cent;&#162;
£镑&pound;&#163;
¥人民币/日元&yen;&#165;
€欧元&euro;&#8364;
§小节&sect;&#167;
©版权&copy;&#169;
®注册商标&reg;&#174;
™商标&trade;&#8482;
×乘号&times;&#215;
÷除号&divide;&#247;
4.3 分隔标签

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

  • 文字分隔标签
  1. 强制换行符标签<br>
  2. 强制分段标签<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 格式的图片充当。

创建步骤：

  1. 制作favicon图标
  2. 将favicon图标放置到网站的根目录下
  3. 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> 来设置:

属性值描述
acceptMIME_type规定服务器接受的文件类型
accept-charsetcharacter_set规定服务器可处理的表单数据字符集
actionURL规定当前提交表单时向何处发送数据
autocompleteOn / off规定是否启用表单的自动发送功能
enctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain		规定在向服务器发送表单数据之前如何进行编码（适用于 method=“post” 的情况）
methodget / post规定用于发送表单数据的 HTTP 方法。
nametext规定表单的名称。
novalidatenovalidate如果使用该属性，则提交表单时不进行验证。
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格式。

浏览器MP4webmogg备注
intemet Explorerynn
Chromeyyy
Firefoxyyy
Safariynn
Operayyy

语法格式:

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

比较完善的使用形式

//从上往下执行，执行成功会跳过下面的代码
<video width="宽度" height="长度" controls>
	<source src="文件.mp4" type="video/mp4"> 
    <source src="文件.ogg" type="video/ogg">
    浏览器不支持video标签！
</video>
属性值描述
autoplayautoplay如果出现该属性，则视频在就绪后马上播放。
controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。
mutedmuted如果出现该属性，视频的音频输出为静音。
posterURL规定视频正在下载时显示的图像，直到用户点击播放按钮。
preloadauto metadata none如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
srcURL要播放的视频的 URL。
widthpixels设置视频播放器的宽度。
1.2 音频标签<audio>

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

音频标签支持三种格式：

浏览器MP3wavogg备注
intemet Explorerynn
Chromeyyy
Firefoxyyy
Safariyyn
Operayyy

语法格式：

<audio src=""></audio>

比较完善的使用形式：

//从上往下执行，执行成功会跳过下面的代码
<audio width="宽度" height="长度" controls>
	<source src="文件.mp3" type="audio/mp3"> 
    <source src="文件.ogg" type="audio/ogg">
    浏览器不支持audio标签！
</audio>
属性值描述
autoplayautoplay如果出现该属性，则音频在就绪后马上播放。
controlscontrols如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
looploop如果出现该属性，则每当音频结束时重新开始播放。
mutedmuted如果出现该属性，则音频输出为静音。
preloadauto metadata none规定当网页加载时，音频是否默认被加载以及如何被加载。
srcURL规定音频文件的 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新增了许多表单属性。

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

三.网站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 优化

  1. logo 里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方的重要性 。
  2. h1里面再放一个链接，可以返回首页，把logo背景图片给链接即可。
  3. 为了搜索引擎收录，可以再链接中放文字(网站名称)，但是文字不要显示出来。
    • 方法1：text-indent移到盒子的外面(text-indent：-9999px)，然后overflow：hidden。
    • 方法2：font-size：0；就看不到文字了。
      | |
      | 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 优化

  1. logo 里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方的重要性 。
  2. h1里面再放一个链接，可以返回首页，把logo背景图片给链接即可。
  3. 为了搜索引擎收录，可以再链接中放文字(网站名称)，但是文字不要显示出来。
    • 方法1：text-indent移到盒子的外面(text-indent：-9999px)，然后overflow：hidden。
    • 方法2：font-size：0；就看不到文字了。
  4. 最后给链接一个title属性。鼠标梵高logo上就会看到提示文字了。
元气满满的凡诚
关注
专栏目录
WEB基础实训漫步时尚广场项目zip__web漫步时尚广场，web漫步时尚广场代码
06-12
【标题】"WEB基础实训漫步时尚广场项目"是针对初学者设计的一个实践项目，旨在帮助学员掌握Web开发的基础技能。这个项目可能包含了实现一个在线购物平台的源代码，即"漫步时尚广场"，并可能涉及网页设计、前端交互...
Web自动化---Web前端三大核心技术
最新发布
伤心的辣条
08-17 1777
HTML是一种用于创建网页结构和内容的标记语言。它由一系列的标签组成，每个标签都有特定的含义和作用。通过使用不同的HTML标签，可以创建标题、段落、链接、列表、图片等元素来构建网页的结构。HTML标签使用尖括号（）包围，通常是成对出现的，有起始标签和结束标签。例如，``表示一级标题的起始标签，而``表示一级标题的结束标签。HTML可以指定元素的属性，如`id`、`class`、`src`等，用于进一步控制元素的样式和行为。
互联网三大基石
是猛男｜二次元｜玩原神｜含盐量极高｜不是GAY｜不玩币｜不接单
03-29 943
一、互联网三大基石：URL、HTTP协议、HTML 1、HTML(Hyper Text Markup Language)：超文本标记语言 是一种用于创建网页的标准标记语言。 可以参考维基百科，网址：https://zh.wikipedia.org/wiki/HTML 2、HTTP(HyperText Transfer Protocol)：超文本传输协议 就是客户端（用户）和服务端（网站）之间请求和应答的标准，通俗地讲就是数据解析的规范。 可以参考维基百科，网址：https://zh.wikipedia.or
Web服务器搭建与安全
xxtk21的专栏
11-02 1158
 简介Web服务是Internet最主要的服务之一，即人们平常说的WWW服务。Web的核心技术是超文本标记语言HTML和超文本传输协议HTTP。 　　Web服务器是指专门提供Web文件保存空间，并负责传送和管理Web文件和支持各种Web程序的服务器，它主要有下面的一些功能：为Web文件提供存放空间；允许Internet用户访问这些Web文件；提供对Web程序的支持；搭建Web服务器可以让用
html属于网络中哪一层,网络层的功能包括哪些
weixin_36199904的博客
06-04 776
网络层是OSI参考模型中的第三层，介于传输层和数据链路层之间，它在数据链路层提供的两个相邻端点之间的数据帧的传送功能上，进一步管理网络中的数据通信，将数据设法从源端经过若干个中间节点传送到目的端，从而向运输层提供最基本的端到端的数据传送服务。主要内容有：虚电路分组交换和数据报分组交换、路由选择算法、阻塞控制方法、X.25协议、综合业务数据网(ISDN)、异步传输模式(ATM)及网际互连原理与实现。...
HTML协议
k3448的博客
08-24 1641
HTTP（超文本传输协议）是一种无状态的协议，无状态是指web浏览器与web服务器之间不需要建立持久的连接。curl+url HTTP遵循请求（request）/应答（response）模型。 HTTP请求 请求行（请求方法）、请求头（消息报头）、请求正文 HTTP响应 状态码 ...
0100_java_web_class2.rar_JAVA WEB基础
09-14
JAVA WEB基础是编程领域中的一个重要话题，主要涵盖了如何使用Java语言进行Web应用程序的开发。这个压缩包文件"0100_java_web_class2.rar_JAVA WEB基础"显然是一个教学资源，旨在通过实例来教授初学者关于Java Web的...
web基础源码
10-22
【web基础源码】是一个适合初学者学习的资源包，主要涵盖了Web开发的基本元素和jQuery 1.7的使用。Web开发是构建互联网应用程序和网站的关键技能，它涉及HTML、CSS、JavaScript等核心技术。在这个压缩包中，你将找到...
web基础教程
04-30
web基础教程之Javascript.基本特点： 脚本编写语言 基于对象的语言 简单性 简化的java语言；变量类型采用弱类型 安全性 只能通过浏览器实现信息浏览或动态交互 动态性 JavaScript是动态的，采用以事件驱动的方式...
web基础（一）使用于小白或者需要web基础复习的人
02-15
【标题】"Web基础（一）：为初学者或复习者准备" 在Web开发的世界里，基础知识至关重要，无论你是新手还是需要重温基础知识的开发者。"Web基础（一）"这个主题旨在提供一个全面的入门指南，帮助你理解Web开发的核心...
java与web基础概念
08-20
java与web基础概念
WEB基础知识
04-13
从本质上讲，Web是基于客户机/服务器的一种体系结构，一般用户的计算机称为客户机，用于提供服务的机器称为服务器。 在Web方式下客户端常用浏览器访问服务器。客户机向服务器发送请求，要求执行某项任务，而服务器...
Python Web基础入门
04-09
### Python Web基础入门知识点概述 #### 一、Python Web开发必备技能 在开始学习Python Web开发之前，确保自己已经掌握了以下几项技能： 1. **Python基础知识**：这是最基本的要求，因为所有Python Web开发的基础...
html协议属于哪层,TCP/IP协议体系结构四层分别是什么?
weixin_39778815的博客
06-03 816
TCP/IP通讯协议采用了4层的层级结构，每一层都呼叫它的下一层所提供的网络来完成自己的需求。这4层分别为:应用层:应用程序间沟通的层，如简单电子邮件传输(SMTP)、文件传输协议(FTP)、网络远程访问协议(Telnet)等。传输层:在此层中，它提供了节点间的数据传送，应用程序之间的通信服务，主要功能是数据格式化、数据确认和丢失重传等。如传输控制协议(TCP)、用户数据报协议(UDP)等，TCP...
web服务器的基础协议是什么,web基础概念
weixin_28366353的博客
08-11 1335
1.转发和重定向的区别实际发生位置不同，地址栏不同转发是发生在服务器的转发是由服务器进行跳转的，细心的朋友会发现，在转发的时候，浏览器的地址栏是没有发生变化的，在我访问Servlet111的时候，即使跳转到了Servlet222的页面，浏览器的地址还是Servlet111的。也就是说浏览器是不知道该跳转的动作，转发是对浏览器透明的。通过上面的转发时序图我们也可以发现，实现转发只是一次的http请求...
Java Web基础：深入理解Servlet
"Java Web基础 Servlet.PPT - 传智播客教学材料，涵盖了Servlet的基础知识，包括URL、HTTP请求与响应格式、MIME类型以及Servlet的介绍。" Servlet是Java Web开发中的核心组件，主要用于处理来自客户端（通常是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值