01-html标签图文详解(一)

本文主要内容

  • 头标签
  • 排版标签:



  • 字体标记:

  • 超链接
  • 图片标签

前言

web标准

web标准介绍:

  • w3c:万维网联盟组织,用来制定web标准的机构(组织)
  • web标准:制作网页要遵循的规范。
  • web标准规范的分类:结构标准、表现标准、行为标准。
  • 结构:html表现:css行为:JavaScript

web标准总结:

  • 结构标准:相当于人的身体。html就是用来制作网页的。
  • 表现标准: 相当于人的衣服。css就是对网页进行美化的。
  • 行为标准: 相当于人的动作。JS就是让网页动起来,具有生命力的。

浏览器介绍

浏览器是网页运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、猎豹浏览器、SafariOpera等。如下图所示:

01-html标签图文详解(一)_第1张图片

浏览器内核:

浏览器 内核
IE trident
chrome / 欧鹏 blink
火狐 gecko
Safari webkit

PS:「浏览器内核」也就是浏览器所采用的「渲染引擎」,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。渲染引擎是兼容性问题出现的根本原因。

一、HTML的介绍

1、HTML的概述:

html全称为HyperText Markup Language,译为超文本标记语言,不是一种编程语言,是一种描述性的标记语言,用于描述超文本中内容的显示方式。比如字体什么颜色,大小等。

  • 超文本:音频,视频,图片称为超文本。
  • 标记 :<英文单词或者字母>称为标记,一个HTML页面都是由各种标记组成。

作用HTML是负责描述文档语义的语言。

注意HTML语言不是一个编程语言(有编译过程),而是一个标记语言(没有编译过程),HTML页面直接由浏览器解析执行。

HTML是负责描述文档语义的语言

html中,除了语义,其他什么都没有。

html是一个纯本文文件(就是用txt文件改名而成),用一些标签来描述文字的语义,这些标签在浏览器里面是看不到的,所以称为“超文本”,所以就是“超文本标记语言”了。
所以,接下来,我们肯定要学习一堆html中的标签对儿,这些标签对儿能够给文本不同的语义。

比如,面试的时候问你,h1标签有什么作用?

  • 正确答案:给文本增加主标题的语义。
  • 错误答案:给文字加粗、加黑、变大。

2、HTML的历史

01-html标签图文详解(一)_第2张图片

我们专门来对XHTML做一个介绍。

XHTML介绍:
XHTML:Extensible Hypertext Markup Language,可扩展超文本标注语言。
XHTML的主要目的是为了取代HTML,也可以理解为HTML的升级版。
HTML的标记书写很不规范,会造成其它的设备(ipad、手机、电视等)无法正常显示。
XHTML与HTML4.0的标记基本上一样。
XHTML是严格的、纯净的HTML。

我们稍后将对XHTML的编写规范进行介绍。

3、HTML的网络术语

  • 网页 :由各种标记组成的一个页面就叫网页。
  • 主页(首页) : 一个网站的起始页面或者导航页面。
  • 标记:

    称为开始标记 ,

    称为结束标记,也叫标签。每个标签都规定好了特殊的含义。
  • 元素:

    内容

    称为元素.
  • 属性:给每一个标签所做的辅助信息。
  • xhtml: 符合XML语法标准的HTML。
  • dhtml:dynamic,动态的。javascript + css + html合起来的页面就是一个dhtml。
  • http:超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。
  • SMTP:邮件传输协议,ftp:文件传输协议。

4、HTML的编辑工具

  • NotePad:记事本。
  • EditPlus:语法高亮显示。技巧: 根据颜色判断单词是否出错 (不是100%)。不好的地方:没有代码提示。
  • UltraEdit:根据颜色判断单词是否出错,可以显示2进制数据。
  • Sublime Text:新一代的代码编辑器(用的人很多)。
  • Visual Studio Code:一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。

PS:后缀名不能决定文件格式,只能决定打开文件打开的方式。

5、计算机编码介绍

计算机,不能直接存储文字,存储的是编码。

计算机只能处理二进制的数据,其它数据,比如:0-9、a-z、A-Z,这些字符,我们定义一套规则来表示。假如:A用110表示,B用111表示等。

ASCII码:
美国发布的,用1个字节(8位二进制)来表示一个字符,共可以表示2^8=256个字符。
美国的国家语言是英语,只要能表示0-9、a-z、A-Z、特殊符号。

ANSI编码:
每个国家为了显示本国的语言,都对ASCII码进行了扩展。用2个字节(16位二进制)来表示一个汉字,共可以表示2^16=65536个汉字。例如:
中国的ANSI编码是GB2312编码(简体),对6763汉字进行编码,含600多特殊字符。另外还有GBK(简体)。
日本的ANSI编码是JIS编码。
台湾的ANSI编码是BIG5编码(繁体)。

GBK:
对GB2312进行了扩展,用来显示罕见的、古汉语的汉字。现在已经收录了2.1万左右。并提供了1890个汉字码位。K的含义就是“扩展”。

Unicode编码(统一编码):
用4个字节(32位二进制)来表示一个字符,想法不错,但效率太低。例如,字母A用ASCII表示的话一个字节就够,可用Unicode编码的话,得用4个字节表示,造成了空间的极大浪费。A的Unicode编码是0000 0000 0000 0000 0000 0000 0100 0000

UTF-8(Unicode Transform Format)编码:
根据字符的不同,选择其编码的长度。比如:一个字符A用1个字节表示,一个汉字用2个字节表示。

毫无疑问,开发中,都用UTF-8编码吧,准没错。

中文能够使用的字符集两种:

  • 第一种:UTF-8。UTF-8是国际通用字库,里面涵盖了所有地球上所有人类的语言文字,比如阿拉伯文、汉语、鸟语……

  • 第二种:GBK(对GB2312进行了扩展)。gb2312 是国标,是中国的字库,里面仅涵盖了汉字和一些常用外文,比如日文片假名,和常见的符号。

字库规模: UTF-8(字全) > gb2312(只有汉字)

重点1:避免乱码

我们用meta标签声明的当前这个html文档的字库,一定要和保存的文件编码类型一样,否则乱码!(重点)。

当我们不设置的时候,sublime默认类型就是UTF-8。而一旦更改为gb2312的时候,就一定要记得设置一下sublime的保存类型: 文件→ set File Encoding to → Chinese Simplified(GBK)

重点2:UTF-8和gb2312的比较

保存大小:UTF-8(更臃肿、加载更慢) > gb2312 (更小巧,加载更快)

总结:

  • UTF-8:字多,有各种国家的语言,但是保存尺寸大,文件臃肿;
  • gb2312:字少,只用中文和少数外语和符号,但是尺寸小,文件小巧。

列出2个使用情形:

1) 你们公司是做日本动漫的,经常出现一些日语动漫的名字,网页要使用UTF-8。如果用gb2312将无法显示日语。
2) 你们公司就是中文网页,极度的追求网页的显示速度,要使用gb2312。如果使用UTF-8将每个汉字多一个byte,所以5000个汉字,多5kb。

我们亲测:

  • qq网、网易、搜狐都是使用gb2312。这些公司,都追求显示速度。
  • 新华网藏语频道,使用的是UTF-8,保证字符集的数量。

对了,我们是怎么查看网页的编码方式的呢?在浏览器中打开网页,右键,选择“查看网页源代码”,找到me标签中的charset属性即可。
那么,我们为什么可以查看网页的源代码呢?因为这个打开的网页已经存到我的临时文件夹里了,临时文件夹里的html是纯文本文件,纯文本文件自然剋以查看网页的源代码了。

6、HTML颜色介绍

颜色表示:

  • 纯单词表示:red、green、blue、orange、gray等
  • 10进制表示:rgb(255,0,0)
  • 16进制表示:#FF0000、#0000FF、#00FF00等

RGB色彩模式:

  • 自然界中所有的颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得,这就是人们常说的三原色原理。
  • RGB三原色也叫加色模式,这是因为当我们把不同光的波长加到一起的时候,可以得到不同的混合色。例:红+绿=黄色,红+蓝=紫色,绿+蓝=青
  • 在数字视频中,对RGB三基色各进行8位编码就构成了大约1678万种颜色,这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。
  • RGB各有256级(0-255)亮度,256级的RGB色彩总共能组合出约1678万种色彩,即256×256×256=16777216。

二、HTML的规范

  • HTML是一个弱势语言
  • HTML不区分大小写
  • HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符,比如dos系统)
  • HTML的结构:
    • 声明部分:主要作用是用来告诉浏览器这个页面使用的是哪个标准。是HTML5标准。
    • head部分:将页面的一些额外信息告诉服务器。不会显示在页面上。
    • body部分:我们所写的代码必须放在此标签內。

1、编写XHTML的规范:

(1)所有标记元素都要正确的嵌套,不能交叉嵌套。正确写法举例:

(2)所有的标记都必须小写。

(3)所有的标记都必须关闭。

  • 双边标记:
  • 单边标记:
    转成

    转成
    ,还有

(4)所有的属性值必须加引号。

(5)所有的属性必须有值。


(6)XHTML文档开头必须要有DTD文档类型定义

2、HTML的基本语法特性

(1)HTML对换行不敏感,对tab不敏感

HTML只在乎标签的嵌套结构,嵌套的关系。谁嵌套了谁,谁被谁嵌套了,和换行、tab无关。换不换行、tab不tab,都不影响页面的结构。

也就是说,HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系。但是,我们发现有良好的缩进,代码更易读。要求大家都正确缩进标签。

百度为了追求极致的显示速度,所以HTML标签都没有换行、都没有缩进(tab),HTML和换不换行无关,标签的层次依然清晰,只不过程序员不可读了。如下图所示:

(2)空白折叠现象

HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示。

举例如下:

01-html标签图文详解(一)_第3张图片

(3)标签要严格封闭

标签不封闭是灾难性的。

标签不封闭的举例如下:
01-html标签图文详解(一)_第4张图片

三、HTML结构详解

备注:

  • 所有的浏览器默认情况下都会忽略空格和空行
  • 每个标签都有私有属性。也都有公有属性。
  • html中表示长度的单位都是像素。HTML只有一种单位就是像素。

HTML标签通常是成对出现的(双边标记),比如

,也有单独呈现的标签(单边标记),如:

等。

属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。

使用Emmet插件快速生成html的骨架

Sublime Text中安装Emmet插件。

新建html文件,输入html:xt,按Tab键后(或者按Ctrl+E),自动生成的代码如下:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Documenttitle>
head>
<body>

body>
html>

新建html,输入html:5后,按 Tab键后,自动生成的代码如下:


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
head>
<body>

body>
html>

1、文档声明头

任何一个标准的HTML页面,第一行一定是一个以

开头的语句。
这一行,就是文档声明头,DocType Declaration,简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

HTML4.01有哪些规范呢?

首先我们先确定一件事儿,我们现在学习的是HTML4.01这个版本,这个版本是IE6开始兼容的。HTML5是IE9开开始兼容的。但是IE6、7、8这些浏览器还不能过早的淘汰,所以这几年网页还是应该用HTML4.01来制作。如今,手机、移动端的网页,就可以使用HTML5了,因为其兼容性更高。

说个题外话,html1 至 html3 是美国军方以及高等研究所用的,并未对外公开。

HTML4.01里面有两大种规范,每大种规范里面又各有3种小规范。所以一共6种规范(见下面):

HTML4.01里面规定了普通XHTML两大种规范。

HTML觉得自己有一些规定不严谨,比如,标签是否可以用大写字母呢?

所以,HTML就觉得,把一些规范严格的标准,又制定了一个XHTML1.0。在XHTML中的字母X,表示“严格的”。

总结一下,HTML4.01一共有6种DTD,说白了,HTML第一行语句一共有6种:
01-html标签图文详解(一)_第5张图片

下面对上图中的三种小规范进行解释:

  • strict:表示“严格的”,这种模式里面的要求更为严格。这种严格体现在哪里?有一些标签不能使用。
    比如,u标签,就是给一个本文加下划线,但是这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而u这个下划线是样式。所以,在strict中是不能使用u标签的。
    那怎么给文本增加下划线呢?今后的css将使用css属性来解决。
    那么,XHTML1.0更为严格,因为这个体系本身规定比如标签必须是小写字母、必须严格闭合标签、必须使用引号引起属性等等。

  • Transitional:表示“普通的”,这种模式就是没有一些别的规范。

  • Frameset:表示“框架”,在框架的页面使用。

在sublime输入的html:xt,x表示XHTML,t表示transitional。
HTML5中极大的简化了DTD,也就是说HTML5中就没有XHTML了(W3C自己打脸了):


2、头标签

头标签都放在头部分之间。包括:</code>、<code><base></code>、<code><meta></code>、<code><link></code></p> <ul> <li><code><title></code>:指定整个网页的标题,在浏览器最上方显示。</li> <li><code><base></code>:为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。</li> <li><code><meta></code>:提供有关页面的基本信息</li> <li><code><body></code>:用于定义HTML文档所要显示的内容,也称为主体标签。我们所写的代码必须放在此标签內。</li> <li><code><link></code>:定义文档与外部资源的关系。</li> </ul> <p>我们打开EditPlus软件,新建一个html文件,自动生成的代码如下:</p> <pre><code class="prism language-html"><span class="token doctype"><!doctype html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Generator<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>EditPlus®<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Author<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Keywords<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>上面的<code><meta></code>标签都不用记,但是另外还有一个<code><meta></code>标签是需要记住的:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>refresh<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3;http://www.baidu.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>上面这个标签的意思是说,3秒之后,自动跳转到百度页面。</p> <p>我们接下来对各个头标签进行介绍。</p> <h4>(1)字符集 charset</h4> <p>我们发现,在头标签中,有下面这种标签:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Content-Type<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/html;charset=UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>字符集用meta标签中的<code>charset</code>定义,meta表示“元”。“元”配置,就是表示基本的配置项目。</p> <p>charset就是charactor set(即“字符集”),这里采用的是。这个meta不用背,用sublime生成就行。</p> <p>浏览器就是通过meta来看网页是什么字符集的。比如你保存的时候,meta写的和声明的不匹配,那么浏览器就是乱码。</p> <h4>(2)定义“关键词”</h4> <p>举例如下:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Keywords<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> </code></pre> <p>这些关键词,就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率。让别人能够找到你,搜索到你。</p> <h4>(3)定义“页面描述”</h4> <p>meta除了可以设置字符集,还可以设置关键字和页面描述。</p> <p>我们把含有<code>meta</code>标签的这一行代码抽象一下:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span> <span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span> <span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>name即“名字”,content即“内容”。</p> <p>只要设置Description页面描述,那么百度搜索结果,就能够显示这些语句,这个技术叫做<strong>SEO</strong>(search engine optimization,搜索引擎优化)。</p> <p>设置页面描述的举例:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> </code></pre> <p>效果如下:</p> <p><a href="http://img.e-com-net.com/image/info8/40ffe7c9cc3545ad9be96aa7e1d81c05.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/40ffe7c9cc3545ad9be96aa7e1d81c05.jpg" alt="01-html标签图文详解(一)_第6张图片" width="650" height="123" style="border:1px solid black;"></a></p> <h4>(4)title标签</h4> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>网页的标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> </code></pre> <p>title也是有助于SEO搜索引擎优化的。</p> <h4>html的完整骨架:</h4> <p>综上所述,html的比较完整的骨架是这样:</p> <pre><code class="prism language-html"> <span class="token doctype"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.w3.org/1999/xhtml<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xml:</span>lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Content-Type<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/html;charset=UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Keywords<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>牛逼,很牛逼,特别牛逼<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>面试题:</p> <ul> <li>问:网页的head标签里面,表示的是页面的配置,有什么配置?</li> <li>答:字符集、关键词、页面描述、页面标题。(今后我们还能看见一些其他的配置:IE适配、视口、iPhone小图标等等)</li> </ul> <h3>3、<code><body></code>标签的属性</h3> <p>其属性有:</p> <ul> <li><code>bgcolor</code>:设置整个网页的背景颜色。</li> <li><code>background</code>:设置整个网页的背景图片。</li> <li><code>text</code>:设置网页中的文本颜色。</li> <li><code>leftmargin</code>:网页的左边距。IE浏览器默认是8个像素。</li> <li><code>topmargin</code>:网页的上边距。</li> <li><code>rightmargin</code>:网页的右边距。</li> <li><code>bottommargin</code>:网页的下边距。</li> </ul> <p><code><body></code>标签另外还有一些属性,这里用个例子来解释:</p> <p><a href="http://img.e-com-net.com/image/info8/5b98b62698604c21bc2567388f87d144.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5b98b62698604c21bc2567388f87d144.jpg" alt="01-html标签图文详解(一)_第7张图片" width="650" height="136" style="border:1px solid black;"></a><br> 上方代码中,当我们对<code>点我点我</code>这几个字使用超链时,<code>link</code>属性表示默认显示的颜色、<code>alink</code>属性表示鼠标点击但是还没有松开时的颜色、<code>vlink</code>属性表示点击完成之后显示的颜色。效果如下:<br> <a href="http://img.e-com-net.com/image/info8/ec6c3dd7e5a146778bed0411fe1a3ca7.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/ec6c3dd7e5a146778bed0411fe1a3ca7.png" alt="01-html标签图文详解(一)_第8张图片" width="289" height="115" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/35dae402b77d46b1aca30d36b391851f.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/35dae402b77d46b1aca30d36b391851f.png" alt="01-html标签图文详解(一)_第9张图片" width="220" height="116" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/00053bfaa28d4c93a86802da3076a74d.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/00053bfaa28d4c93a86802da3076a74d.png" alt="01-html标签图文详解(一)_第10张图片" width="319" height="152" style="border:1px solid black;"></a><br> 接下来,我们讲一下<code><body></code>里的各种标签的属性。</p> <h2>一、排版标签</h2> <h3>注释标签</h3> <pre><code class="prism language-html"><span class="token comment"><!-- 注释 --></span> </code></pre> <h3>段落标签<code><p></code></h3> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This is a paragraph<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This is another paragraph<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p>属性:</p> <ul> <li><code>align="属性值"</code>:对齐方式。属性值包括left center right。<br> 举例:<br> <a href="http://img.e-com-net.com/image/info8/9bef7310d30f40d29537aae93bbd45ae.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9bef7310d30f40d29537aae93bbd45ae.jpg" alt="01-html标签图文详解(一)_第11张图片" width="650" height="120" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/2fcee4f7b3634edb81145510a58bfe49.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2fcee4f7b3634edb81145510a58bfe49.jpg" alt="在这里插入图片描述" width="650" height="54"></a></li> </ul> <br> <p>段落,是英语paragraph“段落”缩写。</p> <p>HTML标签是分等级的,HTML将所有的标签分为两种:</p> <ul> <li> <p><strong>文本级标签</strong>:p、span、a、b、i、u、em。文本级标签里只能放<strong>文字、图片、表单元素</strong>。(a标签里不能放a和input)</p> </li> <li> <p><strong>容器级标签</strong>:div、h系列、li、dt、dd。容器级标签里可以放置任何东西。</p> </li> </ul> <p>从学习p的第一天开始,就要死死记住:<strong>p标签是一个文本级标签,p里面只能放文字、图片、表单元素</strong>。其他的一律不能放。</p> <p>错误写法:(尝试把 h 放到 p 里)</p> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 我是一个小段落 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>我是一级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p>网页效果如下:<br> <a href="http://img.e-com-net.com/image/info8/9aeeae6738e348dcb1502488f5a0b55a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9aeeae6738e348dcb1502488f5a0b55a.jpg" alt="01-html标签图文详解(一)_第12张图片" width="507" height="585" style="border:1px solid black;"></a></p> <p>上图显示,浏览器不允许你这么做,我们使用Chrome的F12审查元素发现,浏览器自己把p封闭掉了,不让你去包裹h1。</p> <p>PS:Chrome浏览器是世界上HTML5支持最好的浏览器。提供了非常好的开发工具,非常适合我们开发人员使用。审查元素功能的快捷键是F12。</p> <h3>块级标签 <code><div></code>和<code><span></code></h3> <blockquote> <p>div和span是非常重要的标签,div的语义是division“分割”; span的语义就是span“范围、跨度”。</p> </blockquote> <blockquote> <p>CSS课程中你将知道,这两个东西,都是最最重要的“盒子”。</p> </blockquote> <p>div:把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。</p> <p>div标签的属性:</p> <ul> <li><code>align="属性值"</code>:设置块儿的位置。属性值可选择:left、right、 center。</li> </ul> <br> <p><strong><code><span></code>和<code><div></code>唯一的区别在于</strong>:<code><span></code>是不换行的,而<code><div></code>是换行的。</p> <p>如果单独在网页中插入这两个元素,不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说,DIV+CSS来实现各种样式。</p> <p>效果举例:</p> <p><a href="http://img.e-com-net.com/image/info8/909b9fcdb097462d9a04d668881c9aff.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/909b9fcdb097462d9a04d668881c9aff.jpg" alt="01-html标签图文详解(一)_第13张图片" width="337" height="556" style="border:1px solid black;"></a></p> <p>div在浏览器中,默认是不会增加任何的效果的,但是语义变了,div中的所有元素是一个小区域。<br> div标签是一个<strong>容器级</strong>标签,里面什么都能放,甚至可以放div自己。</p> <p>span也是表达“小区域、小跨度”的标签,但是是一个<strong>文本级</strong>的标签。<br> 就是说,span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。</p> <p>span里面是放置小元素的,div里面放置大东西的。举例如下:</p> <p>span举例:</p> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 简介简介简介简介简介简介简介简介 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>详细信息<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>购买<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p>div举例:</p> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>logo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>guanggao<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dongxi<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>所以,我们亲切的称呼这种模式叫做“<strong>div+css</strong>”。<strong>div标签负责布局,负责结构,负责分块。css负责样式</strong>。</p> <h3>换行标签<code><br></code>(已废弃)</h3> <p>当你打算结束一行,而又不想开始一个新段落时,<code><br></code>标签就派上用场了。无论你将它置于何处,<code><br></code>标签都会产生一个强制的换行。</p> <pre><code class="prism language-html">This <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> is a para<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>graph with line breaks </code></pre> <p>效果如下:<br> <a href="http://img.e-com-net.com/image/info8/ea742e84472641bfb275bfc4ba7dfa80.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ea742e84472641bfb275bfc4ba7dfa80.jpg" alt="01-html标签图文详解(一)_第14张图片" width="476" height="754" style="border:1px solid black;"></a></p> <p>上图显示,<strong><code><p></code>标签和<code><br></code>标签的区别在于</strong>:<code><p></code>标签会在段落的前后自动插入一个空行,而<code><br></code>标签没有空行;而且<code><br></code>标签没有属性。</p> <p>注意<code><br></code> 没有结束标签,把<code><br></code>标签写为 <code><br/></code> 是经得起未来考验的做法,XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。</p> <br> <h3>水平线标签<code><hr></code>(已废弃)</h3> <p>水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。<br> 效果如下:<br> <a href="http://img.e-com-net.com/image/info8/ff22d96941064c44a5b58057d893a547.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ff22d96941064c44a5b58057d893a547.jpg" alt="01-html标签图文详解(一)_第15张图片" width="383" height="559" style="border:1px solid black;"></a></p> <p>属性:</p> <ul> <li><code>align="属性值"</code>:设定线条置放位置。属性值可选择:left right center。</li> <li><code>size="2"</code>:设定线条粗细。以像素为单位,内定为2。</li> <li><code>width="500"</code>或<code>width="70%"</code>:设定线条长度。可以是绝对值(单位是像素)或相对值。如果设置为相对值的话,内定为100%。</li> <li><code>color="#0000FF"</code>:设置线条颜色。</li> <li><code>noshade</code>:不要阴影,即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体,这是内定值。<br> 属性效果演示:<br> <a href="http://img.e-com-net.com/image/info8/14f47d26e4b348f8b1bafc4086e89038.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/14f47d26e4b348f8b1bafc4086e89038.jpg" alt="01-html标签图文详解(一)_第16张图片" width="650" height="221" style="border:1px solid black;"></a></li> </ul> <br> <h3>内容居中标签 <code><center></code></h3> <p>此时center代表是一个标签,而不是一个属性值了。只要是在这个标签里面的内容,都会居于浏览器的中间。<br> 效果演示:<br> <a href="http://img.e-com-net.com/image/info8/54ddb054c33047018e98fadad872982d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/54ddb054c33047018e98fadad872982d.jpg" alt="01-html标签图文详解(一)_第17张图片" width="650" height="229" style="border:1px solid black;"></a></p> <p>到了H5里面,center标签不建议使用。</p> <br> <h3>预定义(预格式化)标签:<code><pre></code></h3> <p>含义:将保留其中的所有的空白字符(空格、换行符),原封不动的输出结果(告诉浏览器不要忽略空格和空行)<br> 说明:真正排网页过程中,<code><pre></code>标签几乎用不着。但在PHP中用于打印一个数组时使用。</p> <p>效果演示:<br> <a href="http://img.e-com-net.com/image/info8/72dd13d6469146eca0d844d71332020d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/72dd13d6469146eca0d844d71332020d.jpg" alt="01-html标签图文详解(一)_第18张图片" width="650" height="635" style="border:1px solid black;"></a></p> <p>上图中,好像红框部分的字体变小了,而且还出现了缩进,好吧, 这个其实是浏览器搞的鬼。<br> 为什么要有<code><pre></code>这个标签呢?答案是:</p> <blockquote> <p>所有的浏览器默认情况下都会忽略空格和空行。</p> </blockquote> <p>好吧,其实这个标签也用的比较少。</p> <h2>二、字体标签</h2> <h3>标题</h3> <p>标题使用<code><h1></code>至<code><h6></code>标签进行定义。<code><h1></code>定义最大的标题,<code><h6></code>定义最小的标题。具有align属性,属性值可以是:left、center、right。<br> 效果演示:<br> <a href="http://img.e-com-net.com/image/info8/10041420c15a49138227c32c8670c85a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/10041420c15a49138227c32c8670c85a.jpg" alt="01-html标签图文详解(一)_第19张图片" width="650" height="893" style="border:1px solid black;"></a></p> <h3>字体标签<code><font></code>(已废弃)</h3> <p>属性:</p> <ul> <li><code>color="红色"</code>或<code>color="#ff00cc"</code>或<code>color="new rgb(0,0,255)"</code>:设置字体颜色。<br> 设置方式:单词 \ #ff00cc \ rgb(0,0,255)</li> <li><code>size</code>:设置字体大小。 取值范围只能是:1至7。取值时,如果取值大于7那就按照7来算,如果取值小于1那就按照1来算。如果想要更大的字体,那就只能通过css样式来解决。<br> 设置:用’+2’代表值是5 或直接给值</li> <li><code>face="微软雅黑"</code>:设置字体类型。注意在写字体时,“微软雅黑”这个字不能写错。<br> 举例:</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>font</span> <span class="token attr-name">face</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>微软雅黑<span class="token punctuation">"</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#FF0000<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>vae<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>font</span><span class="token punctuation">></span></span> </code></pre> <p>效果:<br> <a href="http://img.e-com-net.com/image/info8/582b55ef78c24c87bc1ae6d11cc329d6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/582b55ef78c24c87bc1ae6d11cc329d6.jpg" alt="01-html标签图文详解(一)_第20张图片" width="650" height="281" style="border:1px solid black;"></a></p> <h3>特殊字符(转义字符)</h3> <ul> <li><code> </code>:空格 (non-breaking spacing,不断打空格)</li> <li><code><</code>:小于号(less than)</li> <li><code>></code>:大于号(greater than)</li> <li><code>&</code>:符号<code>&</code></li> <li><code>"</code>:双引号</li> <li><code>'</code>:单引号</li> <li><code>©</code>:版权<code>©</code></li> <li><code>™</code>:商标<code>™</code></li> <li><code>绐</code>:文字<code>绐</code>。其实,<code>#32464</code>是汉字<code>绐</code>的unicode编码。</li> </ul> <p>要求背诵的特殊字符有:<code> </code>、<code><</code>、<code>></code>、<code>©</code>。</p> <p>比如说,你想把<code><p></code>作为一个文本在页面上显示,直接写<code><p></code>是肯定不行的,因为这代表的是一个段落标签,所以这里需要用到<strong>转义字符</strong>。应该这么写:</p> <pre><code class="prism language-html">这是一个HTML语言的<span class="token entity"><</span>p<span class="token entity">></span>标签 </code></pre> <p>正确的效果如下:</p> <p><a href="http://img.e-com-net.com/image/info8/16af0cfcfb5443208028dbf7543efffd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/16af0cfcfb5443208028dbf7543efffd.jpg" alt="01-html标签图文详解(一)_第21张图片" width="650" height="276" style="border:1px solid black;"></a></p> <p>错误的效果如下:</p> <p><a href="http://img.e-com-net.com/image/info8/e089a01c74cf4fd988415782c4b9936f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e089a01c74cf4fd988415782c4b9936f.jpg" alt="01-html标签图文详解(一)_第22张图片" width="588" height="667" style="border:1px solid black;"></a></p> <p>其实我们只要记住前三个符号就行了,其他的在需要的时候查一下就行了。而且,EditPlus软件中是可以直接点击这些符号进行选择的:</p> <p><img src="http://img.e-com-net.com/image/info8/0058266447e24041ac838f4458ca9c7c.jpg" alt="Paste_Image.png" width="0" height="0"></p> <p>来一张表格,方便需要的时候查询:</p> <table> <thead> <tr> <th align="left">特殊字符</th> <th align="left">描述</th> <th align="left">字符的代码</th> </tr> </thead> <tbody> <tr> <td align="left"></td> <td align="left">空格符</td> <td align="left"><code> </code></td> </tr> <tr> <td align="left"><</td> <td align="left">小于号</td> <td align="left"><code><</code></td> </tr> <tr> <td align="left">></td> <td align="left">大于号</td> <td align="left"><code>></code></td> </tr> <tr> <td align="left">&</td> <td align="left">和号</td> <td align="left"><code>&</code></td> </tr> <tr> <td align="left">¥</td> <td align="left">人民币</td> <td align="left"><code>¥</code></td> </tr> <tr> <td align="left">©</td> <td align="left">版权</td> <td align="left"><code>©</code></td> </tr> <tr> <td align="left">®</td> <td align="left">注册商标</td> <td align="left"><code>®</code></td> </tr> <tr> <td align="left">°</td> <td align="left">摄氏度</td> <td align="left"><code>°</code></td> </tr> <tr> <td align="left">±</td> <td align="left">正负号</td> <td align="left"><code>±</code></td> </tr> <tr> <td align="left">×</td> <td align="left">乘号</td> <td align="left"><code>×</code></td> </tr> <tr> <td align="left">÷</td> <td align="left">除号</td> <td align="left"><code>÷</code></td> </tr> <tr> <td align="left">²</td> <td align="left">平方2(上标2)</td> <td align="left"><code>²</code></td> </tr> <tr> <td align="left">³</td> <td align="left">立方3(上标3)</td> <td align="left"><code>³</code></td> </tr> </tbody> </table> <h3>一些小标签/小标记</h3> <ul> <li> <p><code><u></code>:下划线标记</p> </li> <li> <p><code><s></code>或<code><del></code>:中划线标记(删除线)</p> </li> <li> <p><code><i></code>或<code><em></code>:斜体标记</p> </li> </ul> <p>效果:</p> <p><a href="http://img.e-com-net.com/image/info8/44e364c83e3640309e110bc8be3d91d8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/44e364c83e3640309e110bc8be3d91d8.jpg" alt="01-html标签图文详解(一)_第23张图片" width="650" height="344" style="border:1px solid black;"></a><br> 上面的这几个标签,常用于做一些小装饰、小图标。比如:</p> <p>20180118_2340.png</p> <p>这张图中,我们通过查看京东网站的代码发现,箭头处的小图标都是用的标签<code><i></code>。</p> <p>div的主要目的是用来布局,而小装饰却可以用来</p> <h3>粗体标签<code><b></code>或<code><strong></code>(已废弃)</h3> <p>效果:</p> <p><a href="http://img.e-com-net.com/image/info8/21b8b109fb3e414cb1407da013aedd8d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/21b8b109fb3e414cb1407da013aedd8d.jpg" alt="01-html标签图文详解(一)_第24张图片" width="650" height="274" style="border:1px solid black;"></a></p> <br> <h3>上标<code><sup></code> 下标<code><sub></code></h3> <p>上小标这两个标签容易混淆,怎么记呢?这样记:<code>b</code>的意思是<code>bottom:底部</code><br> 举例:</p> <pre><code class="prism language-html">O<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sup</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sup</span><span class="token punctuation">></span></span> 5<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sub</span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sub</span><span class="token punctuation">></span></span> </code></pre> <p>效果:</p> <p><a href="http://img.e-com-net.com/image/info8/a33d26114ad44d8db58cdb270574be91.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a33d26114ad44d8db58cdb270574be91.jpg" alt="01-html标签图文详解(一)_第25张图片" width="650" height="311" style="border:1px solid black;"></a></p> <h2>三、超链接</h2> <p>超链接有三种形式:</p> <p><strong>1、外部链接</strong>:链接到外部文件。举例:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>02页面.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>点击进入另外一个文件<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> <p>a是英语<code>anchor</code>“锚”的意思,就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。</p> <p>href是英语<code>hypertext reference</code>超文本地址的缩写。读作“喝瑞夫”,不要读作“喝夫”。</p> <p>效果:</p> <p><a href="http://img.e-com-net.com/image/info8/68489b10362340ed99d02e64bc89e15c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/68489b10362340ed99d02e64bc89e15c.jpg" alt="01-html标签图文详解(一)_第26张图片" width="650" height="258" style="border:1px solid black;"></a></p> <p>当然,我们也可以直接点进链接,访问一个网址。举例如下;</p> <pre><code> <a href="http://www.baidu.com" target="_blank">点我点我</a> </code></pre> <p><strong>2、锚链接</strong>:<br> 指给超链接起一个名字,作用是<strong>在本页面或者其他页面的的不同位置进行跳转</strong>。比如说,在网页底部有一个向上箭头,点击箭头后回到顶部,这个就是利用到了锚链接。<br> 首先我们要创建一个<strong>锚点</strong>,也就是说,使用<code>name</code>属性或者<code>id</code>属性给那个特定的位置起个名字。效果如下:</p> <p><a href="http://img.e-com-net.com/image/info8/4fc486f9442a44389fba4bf4819da244.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4fc486f9442a44389fba4bf4819da244.jpg" alt="01-html标签图文详解(一)_第27张图片" width="650" height="458" style="border:1px solid black;"></a></p> <p>上图中解释:</p> <p>11行代码表示,顶部这个锚的名字叫做name1。<br> 然后在底部设置超链接,点击时将回到顶部(此时,网页中的url的末尾也出现了<code>#name1</code>)。注意<strong>上图中红框部分的<code>#</code>号不要忘记了</strong>,表示跳到名为name1的特定位置,这是规定。如果少了<code>#</code>号,点击之后,就会跳到name1这个文件或者name1这个文件夹中去。</p> <p>如果我们将上图中的第28行代码写成:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>a.html#name1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>回到顶部<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> <p>那就表示,点击之后,跳转到<code>a.html</code>页面的<code>name1锚点</code>中去。</p> <p>说明:name属性是HTML4.0以前使用的,id属性是HTML4.0后才开始使用。为了向前兼容,因此,name和id这两个属性都要写上,并且值是一样的。</p> <p><strong>3、邮件链接</strong>:<br> 代码举例:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mailto:smyhvae@163.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>点击进入我的邮箱<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> <p>效果:点击之后,会弹出outlook,作用不大。</p> <h3>超链接的属性</h3> <ul> <li><code>href</code>:目标URL</li> <li><code>title</code>:悬停文本。</li> <li><code>name</code>:主要用于设置一个锚点的名称。</li> <li><code>target</code>:告诉浏览器用什么方式来打开目标页面。<code>target</code>属性有以下几个值: <ul> <li><code>_self</code>:在同一个网页中显示(默认值)</li> <li><code>_blank</code>:<strong>在新的窗口中打开</strong>。</li> <li><code>_parent</code>:在父窗口中显示</li> <li><code>_top</code>:在顶级窗口中显示</li> </ul> </li> </ul> <p><code>title</code>属性举例:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>09_img.html<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>很好看哦<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>结婚照<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> <p>效果如下:</p> <p><a href="http://img.e-com-net.com/image/info8/aa8673789ce546f0a892305b3b3e58b9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/aa8673789ce546f0a892305b3b3e58b9.jpg" alt="01-html标签图文详解(一)_第28张图片" width="650" height="181" style="border:1px solid black;"></a></p> <p><code>target</code>属性举例:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1.html<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>悬停文本<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>链接的内容<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> <p>blank就是“空白”的意思,就表示新建一个空白窗口。为啥有一个_ ,就是规定,没啥好解释的。<br> 也就是说,如果不写<code>target=”_blank”</code>那么就是在相同的标签页打开,如果写了<code>target=”_blank”</code>,就是在新的空白标签页中打开。</p> <h4>备注1:分清楚img和a标签的各自的属性</h4> <p>区别如下:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1.jpg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> <h4>备注2:a是一个文本级的标签</h4> <p>比如一个段落中的所有文字都能够被点击,那么应该是p包裹a:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>段落段落段落段落段落段落<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p>而不是a包裹p:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 段落段落段落段落段落段落 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> <p>a的语义要小于p,a就是可以当做文本来处理,所以p里面相当于放的就是纯文字。</p> <h2>四、图片标签</h2> <p>img: 代表的就是一张图片。是单边标记。</p> <p>img是自封闭标签,也称为单标签。</p> <h4>能插入的图片类型:</h4> <ul> <li> <p>能够插入的图片类型是:jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别,css课上讲。</p> </li> <li> <p>不能往网页中插入的图片格式是:psd、ai</p> </li> </ul> <blockquote> <p>HTML页面不是直接插入图片,而是插入图片的引用地址,所以也要把图片上传到服务器上。</p> </blockquote> <h3><code>src</code>属性:图片的相对路径和绝对路径</h3> <p>这里涉及到图片的一个属性:</p> <ul> <li><code>src</code>属性:指图片的路径。</li> </ul> <p>在写<strong>图片的路径</strong>时,有两种写法:相对路径、绝对路径</p> <h4>1、<strong>写法一:相对路径</strong></h4> <p>相对当前页面所在的路径。两个标记 <code>.</code> 和 <code>..</code> 分表代表当前目录和父路径。</p> <p>举例1:</p> <pre><code class="prism language-html"><span class="token comment"><!-- 当前目录中的图片 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2.jpg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>.\2.jpg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!-- 上一级目录中的图片 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>..\2.jpg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>img 是image“图片”的简写,src 是英语source“资源”的缩写。</p> <p>相对路径不会出现这种情况:</p> <pre><code class="prism language-html">aaa/../bbb/1.jpg </code></pre> <p><code>../</code>要么不写,要么就写在开头。</p> <p>举例2:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>images/1.jpg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>上方代码的意思是说,当前页面有一个并列的文件夹<code>images</code>,在文件夹<code>images</code>中存放了一张图片<code>1.jpg</code><br> 效果:</p> <p><a href="http://img.e-com-net.com/image/info8/55e5bcea1ab244c5b787fbc1a160815e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/55e5bcea1ab244c5b787fbc1a160815e.jpg" alt="01-html标签图文详解(一)_第29张图片" width="650" height="533" style="border:1px solid black;"></a></p> <p>相对路径的面试题。现有如下文件层级图:</p> <p><a href="http://img.e-com-net.com/image/info8/94e978ba7a134421aa545a2c806815d5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/94e978ba7a134421aa545a2c806815d5.jpg" alt="01-html标签图文详解(一)_第30张图片" width="524" height="305" style="border:1px solid black;"></a></p> <p>问题:如果想在index.html中插入1.png,那么对应的img语句是?</p> <p>分析:</p> <p>现在document是最大的文件夹,里面有两个文件夹work和photo。work中又有一个文件夹叫做myweb。myweb文件夹里面有index.html。 所以index.html在myweb文件夹里面,上一级就是work文件夹,上两级就是document文件夹。通过document文件夹当做一个中转站,进入photo文件夹,看到了1.png。</p> <p>答案:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>../../photo/1.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> </code></pre> <h4>2、写法二:<strong>绝对路径</strong></h4> <p>绝对路径包括以下两种:</p> <p>(1)以盘符开始的绝对路径。举例:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>C:\Users\smyhvae\Desktop\html\images\1.jpg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>(2)网络路径。举例:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://img.smyhvae.com/2016040102.jpg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>大家打开上面的img中的链接,扫一扫,可能有惊喜哦。</p> <h3>相对路径和绝对路径的总结</h3> <p>相对路径的好处:站点不管拷贝到哪里,文件和图片的相对路径关系都是不变的。<br> 相对路径使用有一个前提,就是网页文件和你的图片,必须在一个服务器上。</p> <p>问题:我的网页在C盘,图片却在D盘,能不能插入呢?</p> <p>答案: 用相对路径不能,用绝对路径也不能。</p> <p>注意:可以使用file://来插入,但是这种方法,没有任何意义!因为服务器上没有所谓c盘、d盘。</p> <p>下面的方法是行的,但是没有任何工程上的意义,这是因为服务器没有盘符,linux系统没有盘符:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>file://C:\Users\Danny\Pictures\明星\1.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> </code></pre> <p>总结一下:</p> <ul> <li> <p>我们现在无论是在a标签、img标签,如果要用路径。只有两种路径能用,就是相对路径和绝对路径。</p> </li> <li> <p>相对路径,就是…/ image/ 这种路径。从自己出发,找到别人;</p> </li> <li> <p>绝对路径,就是http://开头的路径。</p> </li> <li> <p>绝对不允许使用file://开头的东西,这个是完全错误的!</p> </li> </ul> <h3>img标签的其他属性</h3> <ul> <li> <p><code>width</code>:宽度</p> </li> <li> <p><code>height</code>:高度</p> </li> <li> <p><code>Align</code>:指图片的水平对齐方式,属性值可以是:left、center、right</p> </li> <li> <p><code>title</code>:<strong>提示性文本</strong>。公有属性。也就是鼠标悬停时出现的文本。</p> </li> <li> <p><code>border</code>:给图片加边框(描边),单位是像素,边框的颜色是黑色</p> </li> <li> <p><code>Hspace</code>:指图片左右的边距</p> </li> <li> <p><code>Vspace</code>:指图片上下的边距</p> </li> <li> <p><code>Alt</code>:当图片显示不出来的时候,代替图片显示的内容。alt是英语 alternate “替代”的意思。(有的浏览器不支持)</p> </li> </ul> <p>举例:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>images/1.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>`188<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>这是美女<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>效果:</p> <p><a href="http://img.e-com-net.com/image/info8/528f0c9fe6674ed28d63a8fdd84cbfbd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/528f0c9fe6674ed28d63a8fdd84cbfbd.jpg" alt="01-html标签图文详解(一)_第31张图片" width="650" height="358" style="border:1px solid black;"></a></p> <p><code>Alt</code>属性效果演示:</p> <p><a href="http://img.e-com-net.com/image/info8/82d541df6af748d19c2985ca600f4848.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/82d541df6af748d19c2985ca600f4848.jpg" alt="01-html标签图文详解(一)_第32张图片" width="650" height="225" style="border:1px solid black;"></a></p> <ul> <li>图片的<code>align</code>属性:<strong>图片和周围文字的相对位置</strong>。属性取值可以是:bottom(默认)、center、top、left、right。<br> 我们来分别看一下这<code>align</code>属性的这几个属性值的区别。<br> 1、<code>align=""</code>,图片和文字低端对齐。即默认情况下的显示效果:</li> </ul> <p><a href="http://img.e-com-net.com/image/info8/ece6064df2bb4bf5bb48e5851deaf18e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ece6064df2bb4bf5bb48e5851deaf18e.jpg" alt="01-html标签图文详解(一)_第33张图片" width="650" height="361" style="border:1px solid black;"></a></p> <p>2、<code>align="center"</code>:图片和文字水平方向上居中对齐。显示效果:<br> <a href="http://img.e-com-net.com/image/info8/d9374dcc62dd434699bfbf35c4c8ccf3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d9374dcc62dd434699bfbf35c4c8ccf3.jpg" alt="01-html标签图文详解(一)_第34张图片" width="650" height="356" style="border:1px solid black;"></a><br> 3、<code>align="top"</code>:图片与文字顶端对齐。显示效果:<br> <a href="http://img.e-com-net.com/image/info8/6c8aa8cd098b4e3b9023ca8ca3da9e56.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6c8aa8cd098b4e3b9023ca8ca3da9e56.jpg" alt="01-html标签图文详解(一)_第35张图片" width="650" height="323" style="border:1px solid black;"></a><br> 4、<code>align="left"</code>:图片在文字的左边。显示效果:</p> <p><a href="http://img.e-com-net.com/image/info8/968db8b15e2a458d81f83ea1461d306b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/968db8b15e2a458d81f83ea1461d306b.jpg" alt="01-html标签图文详解(一)_第36张图片" width="650" height="315" style="border:1px solid black;"></a></p> <p>5、<code>align="right"</code>:图片在文字的右边。显示效果:</p> <p><a href="http://img.e-com-net.com/image/info8/700aa5e8b1ad47ed8a6fa0e4f3a9a0e2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/700aa5e8b1ad47ed8a6fa0e4f3a9a0e2.jpg" alt="01-html标签图文详解(一)_第37张图片" width="650" height="634" style="border:1px solid black;"></a></p> <p><strong>注意事项:</strong><br> (1)如果要想保证图片等比例缩放,请只设置width和height中其中一个。<br> (2)如果想实现图文混排的效果,请使用align属性,取值为left或right。</p> <br> <h3>热点问题</h3> <p>指的是对图片的<strong>局部区域</strong>加超链接。<br> 我们知道,如果给图片加一个超链接,那个点击这个图片的任意区域,都会跳转到新的位置。举例:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>网页2.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2.jpg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> <p>上方代码表明:给图片加一个超链接,那个点击这个图片的任意区域,都会跳转到新的位置。<br> 现在,我只想对图片的局部区域加超链接,该怎么做呢?这里的难点在于坐标的确定,此时需要用到Dreamweaver。</p> <p><a href="http://img.e-com-net.com/image/info8/90814beeb6ef48e6927ec3e5c59e946b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/90814beeb6ef48e6927ec3e5c59e946b.jpg" alt="01-html标签图文详解(一)_第38张图片" width="650" height="245" style="border:1px solid black;"></a></p> <p>上图中,切换到“设计”标签,然后:</p> <p><a href="http://img.e-com-net.com/image/info8/0920cb0ab57a4ebe86a0ab4c7217bbe4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0920cb0ab57a4ebe86a0ab4c7217bbe4.jpg" alt="01-html标签图文详解(一)_第39张图片" width="627" height="632" style="border:1px solid black;"></a></p> <p>上图中,点击菜单栏<code>插入-图像</code>,导入图片:</p> <p><a href="http://img.e-com-net.com/image/info8/205fc9cd0aa946b7acddf5002b947fcd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/205fc9cd0aa946b7acddf5002b947fcd.jpg" alt="01-html标签图文详解(一)_第40张图片" width="650" height="731" style="border:1px solid black;"></a></p> <p>,在图片上点击右键,选择<code>属性</code>,弹出属性面板:</p> <p><a href="http://img.e-com-net.com/image/info8/7e40877df61449658686cff156648c4e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7e40877df61449658686cff156648c4e.jpg" alt="01-html标签图文详解(一)_第41张图片" width="650" height="554" style="border:1px solid black;"></a></p> <p>上图中,我们可以利用红框部分的<code>地图</code>绘制需要添加超链接的区域。箭头处表示的是要链接到的文件。蓝框部分表示打开新页面的方式,蓝狂部分的<code>new</code>是没有下划线的,它和<code>_blank</code>的含义是一样的。</p> <p><a href="http://img.e-com-net.com/image/info8/eb3a8583b470436694e35a290febdc5f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/eb3a8583b470436694e35a290febdc5f.jpg" alt="01-html标签图文详解(一)_第42张图片" width="650" height="256" style="border:1px solid black;"></a><br> 局部区域的热点设置完毕后,上图显示,红框部分就是多出的代码,也正是我们需要的代码。多出的代码如下:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>file:///C|/Users/smyhvae/Desktop/html/1.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>488<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>730<span class="token punctuation">"</span></span> <span class="token attr-name">usemap</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#Map<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>map</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Map<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>227,374,63<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>file:///C|/Users/smyhvae/Desktop/html/网页2.html<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>map</span><span class="token punctuation">></span></span> </code></pre> <p>上方代码中,第一行的<code>usemap="#Map"</code>表示我要引用名为<code>Map</code>的地图。<br> 然后第02至第04行就给出了地图的定义。<br> 效果演示:</p> <p><img src="http://img.e-com-net.com/image/info8/406c56fbc6e7470290ccddaca0bd9f7e.gif" alt="3.gif" width="0" height="0"></p> <p>最后,送上妹子的近照一张。楼主已经仁至义尽了。</p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1600862390184869888"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端,html标签详解)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题,尤其是当后端使用Java的Long类型(64位)与前端JavaScript的Number类型(最大安全整数为2^53-1,即16位)进行数据交互时,很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835505606245576704.htm" title="Python中os.environ基本介绍及使用方法" target="_blank">Python中os.environ基本介绍及使用方法</a> <span class="text-muted">鹤冲天Pro</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>文章目录python中os.environos.environ简介os.environ进行环境变量的增删改查python中os.environ的使用详解1.简介2.key字段详解2.1常见key字段3.os.environ.get()用法4.环境变量的增删改查和判断是否存在4.1新增环境变量4.2更新环境变量4.3获取环境变量4.4删除环境变量4.5判断环境变量是否存在python中os.envi</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> <span class="text-muted">彩云飘过</span> <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记,使用的openlayers5.3.xapi。源码见1032.html,对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业:【HTML5网页期末作业(1000套)】程序员有趣的告白方式:【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835497792265613312.htm" title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a> <span class="text-muted">加密社</span> <a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>加密社引言在Solidity合约开发过程中,事件(Events)是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更,还能够让外部系统(如前端应用)监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时,该事件会被记录在区块链的交易收据中。具体而言,事件</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业,Web大学生网页HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript:做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835490218845761536.htm" title="Python爬虫解析工具之xpath使用详解" target="_blank">Python爬虫解析工具之xpath使用详解</a> <span class="text-muted">eqa11</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>文章目录Python爬虫解析工具之xpath使用详解一、引言二、环境准备1、插件安装2、依赖库安装三、xpath语法详解1、路径表达式2、通配符3、谓语4、常用函数四、xpath在Python代码中的使用1、文档树的创建2、使用xpath表达式3、获取元素内容和属性五、总结Python爬虫解析工具之xpath使用详解一、引言在Python爬虫开发中,数据提取是一个至关重要的环节。xpath作为一门</div> </li> <li><a href="/article/1835457443690278912.htm" title="[Python] 数据结构 详解及代码" target="_blank">[Python] 数据结构 详解及代码</a> <span class="text-muted">AIAdvocate</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E9%93%BE%E8%A1%A8/1.htm">链表</a> <div>今日内容大纲介绍数据结构介绍列表链表1.数据结构和算法简介程序大白话翻译,程序=数据结构+算法数据结构指的是存储,组织数据的方式.算法指的是为了解决实际业务问题而思考思路和方法,就叫:算法.2.算法的5大特性介绍算法具有独立性算法是解决问题的思路和方式,最重要的是思维,而不是语言,其(算法)可以通过多种语言进行演绎.5大特性有输入,需要传入1或者多个参数有输出,需要返回1个或者多个结果有穷性,执行</div> </li> <li><a href="/article/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> <span class="text-muted">苹果酱0567</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>这段时间抽空给女朋友搭建一个个人博客,想着记录一下建站的过程,就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站,或者用cms系统,三四个小时就可以做出一个前后台都有的网站,而且想做成啥样也都行。但是就是要从新做,自己做的意义不一样,更何况,俺就是专门干这个的,嘿嘿嘿要做一个网站,而且从零开始,首先呢就是技术选型了,经过一番思量决定选择-SpringBoot做后端,前端使用Vue做一</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> <span class="text-muted">2401_85194651</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架:后端:Java+SpringBoot数据库:MySQL前端:Vue.js数据库连接:JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835435141535723520.htm" title="详解:如何设计出健壮的秒杀系统?" target="_blank">详解:如何设计出健壮的秒杀系统?</a> <span class="text-muted">夜空_2cd3</span> <div>作者:Yrion博客园:cnblogs.com/wyq178/p/11261711.html前言:秒杀系统相信很多人见过,比如京东或者淘宝的秒杀,小米手机的秒杀。那么秒杀系统的后台是如何实现的呢?我们如何设计一个秒杀系统呢?对于秒杀系统应该考虑哪些问题?如何设计出健壮的秒杀系统?本期我们就来探讨一下这个问题:image目录一:****秒杀系统应该考虑的问题二:****秒杀系统的设计和技术方案三:*</div> </li> <li><a href="/article/1835428317084348416.htm" title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a> <span class="text-muted">全能全知者</span> <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了,所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态:sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器:安装Apache:sudoyuminstallhttpd启动Apache:sudosystemctl</div> </li> <li><a href="/article/1835427057752961024.htm" title="补充元象二面" target="_blank">补充元象二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.请尽可能详细地说明,防抖和节流的区别,应用场景?你的回答中不要写出示例代码。防抖(Debounce)和节流(Throttle)是两种常用的前端性能优化技术,它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明:防抖和节流的定义防抖:在一段时间内,多次执行变为只执行最后一次。防抖的原理是,当事件被触发后,设置一个延迟定时器。如果在这个延迟时间内事件再次被触发,则重</div> </li> <li><a href="/article/1835421888088731648.htm" title="MyBatis 详解" target="_blank">MyBatis 详解</a> <span class="text-muted">阿贾克斯的黎明</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div>目录目录一、MyBatis是什么二、为什么使用MyBatis(一)灵活性高(二)性能优化(三)易于维护三、怎么用MyBatis(一)添加依赖(二)配置MyBatis(三)创建实体类和接口(四)使用MyBatis一、MyBatis是什么MyBatis是一个优秀的持久层框架,它支持自定义SQL、存储过程以及高级映射。MyBatis免除了几乎所有的JDBC代码以及设置参数和获取结果集的工作。它可以通过简</div> </li> <li><a href="/article/1835420753252675584.htm" title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a> <span class="text-muted">jun778895</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务(可选)以及微信小程序平台特性的综合性项目。这里,我将详细介绍一个典型的小程序开发项目的全过程,包括项目规划、设计、开发、测试及部署上线等各个环节,并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序,旨在为学生提供一站式校园生活服务,包括课程表查询、图书馆座位预约、食堂</div> </li> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人,面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中,我获得了宝贵的实践经验和深刻的行业洞察,以下是我的主要收获和感悟:一、专业技能提升框架应用熟练度:通过实际项目,我深入掌握了React、Vue等前端框架的使用,不仅提升了编码效率,还学会了如何根据项目需求选择合适的框架。问题解决能力:在实习期间,我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/1835401975269781504.htm" title="vue render 函数详解 (配参数详解)" target="_blank">vue render 函数详解 (配参数详解)</a> <span class="text-muted">你的眼睛會笑</span> <a class="tag" taget="_blank" href="/search/vue2/1.htm">vue2</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>vuerender函数详解(配参数详解)在Vue3中,`render`函数被用来代替Vue2中的模板语法。它接收一个h函数(或者是`createElement`函数的别名),并且返回一个虚拟DOM。render函数的语法结构如下:render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中,我们使用h函数创建了一个div元素</div> </li> <li><a href="/article/1835398064727224320.htm" title="前端代码上传文件" target="_blank">前端代码上传文件</a> <span class="text-muted">余生逆风飞翔</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div> </li> <li><a href="/article/1835395039572881408.htm" title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a> <span class="text-muted">清风怎不知意</span> <a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>许多同学不知道Dockerfile应该如何写,不清楚Dockerfile中的指令分别有什么意义,能达到什么样的目的,接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是,按照惯例,它们应该是大写的,以便更容易地将它们与参数区分开来。(引用</div> </li> <li><a href="/article/1835394786899619840.htm" title="Dockerfile(1) - FROM 指令详解" target="_blank">Dockerfile(1) - FROM 指令详解</a> <span class="text-muted">小菠萝测试笔记</span> <a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/cmd/1.htm">cmd</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>FROM指明当前的镜像基于哪个镜像构建dockerfile必须以FROM开头,除了ARG命令可以在FROM前面FROM[--platform=][AS]FROM[--platform=][:][AS]FROM[--platform=][@][AS]小栗子FROMalpine:latest一个dockerfile可以有多个FROM可以有多个FROM来创建多个镜像,或区分构建阶段,将一个构建阶段作为另</div> </li> <li><a href="/article/1835390752381825024.htm" title="详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因" target="_blank">详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因</a> <span class="text-muted">hw_happy</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>前情提要在一个vue文件中需要引入定义的b.vue文件,但是提示b文件没有默认导出,对于vue2文件来说有exportdefault,在中,所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此,不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误,原来是我的项目使用了ts和vite\webpack,因为TypeScript和Vue的默认导出</div> </li> <li><a href="/article/1835385458356482048.htm" title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a> <span class="text-muted">2401_85123349</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢?比如说上面gif图中的这些人物对象,有一些已被该用户添加为关心,那么当用户下一次进入该页面时,这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大,只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先,整体的思路是利用动态类名对不同的元素进行选择。</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> <span class="text-muted">马小蜗</span> <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点:灵活度、可控性、性能</div> </li> <li><a href="/article/1835369443379736576.htm" title="【显示 后台运行 & 的命令】" target="_blank">【显示 后台运行 & 的命令】</a> <span class="text-muted">晨春计</span> <a class="tag" taget="_blank" href="/search/debug/1.htm">debug</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>目录背景步骤详解示例背景当你在Linuxshell中使用&符号将一个命令放到后台运行时,你可以使用jobs命令来查看这些后台进程的状态。但是,jobs命令并不会直接显示进程的PID(进程ID)。它会显示一个作业列表,其中包括每个作业的状态和一个作业标识符(通常是百分号%后面跟着一个数字),但不会直接显示PID。获取后台进程的PID步骤:1、使用jobs命令查看后台作业。2、使用ps命令配合grep</div> </li> <li><a href="/article/1835368019430305792.htm" title="Vue + Express实现一个表单提交" target="_blank">Vue + Express实现一个表单提交</a> <span class="text-muted">九旬大爷的梦</span> <div>最近在折腾一个cms系统,用的vue+express,但是就一个表单提交就弄了好久,记录一下。环境:Node10+前端:Vue服务端:Express依赖包:vueexpressaxiosexpress-formidableelement-ui(可选)前言:axiosget请求参数是:paramsaxiospost请求参数是:dataexpressget接受参数是req.queryexpresspo</div> </li> <li><a href="/article/1835354447627251712.htm" title="前端知识点" target="_blank">前端知识点</a> <span class="text-muted">ZhangTao_zata</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div> </li> <li><a href="/article/1835352325032603648.htm" title="第三十一节:Vue路由:前端路由vs后端路由的了解" target="_blank">第三十一节:Vue路由:前端路由vs后端路由的了解</a> <span class="text-muted">曹老师</span> <div>1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访</div> </li> <li><a href="/article/1835351925957160960.htm" title="k8s中Service暴露的种类以及用法" target="_blank">k8s中Service暴露的种类以及用法</a> <span class="text-muted">听说唐僧不吃肉</span> <a class="tag" taget="_blank" href="/search/K8S/1.htm">K8S</a><a class="tag" taget="_blank" href="/search/kubernetes/1.htm">kubernetes</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E5%8E%9F%E7%94%9F/1.htm">云原生</a> <div>一、说明在Kubernetes中,有几种不同的方式可以将服务(Service)暴露给外部流量。这些方式通过定义服务的spec.type字段来确定。二、详解1.ClusterIP定义:默认类型,服务只能在集群内部访问。作用:通过集群内部IP地址暴露服务。示例:spec:type:ClusterIPports:-port:80targetPo</div> </li> <li><a href="/article/1835350917352878080.htm" title="华雁智科前端面试题" target="_blank">华雁智科前端面试题</a> <span class="text-muted">因为奋斗超太帅啦</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AF%95%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98%E6%95%B4%E7%90%86/1.htm">前端笔试面试问题整理</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>1.var变量的提升题目:vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果:undefined、1答错了,给一个大嘴巴子,错误答案输出结果为:2,1此题主要考察var定义的变量,作用域提升的问题,相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l</div> </li> <li><a href="/article/126.htm" title="插入表主键冲突做更新" target="_blank">插入表主键冲突做更新</a> <span class="text-muted">a-john</span> <div>有以下场景: 用户下了一个订单,订单内的内容较多,且来自多表,首次下单的时候,内容可能会不全(部分内容不是必须,出现有些表根本就没有没有该订单的值)。在以后更改订单时,有些内容会更改,有些内容会新增。 问题: 如果在sql语句中执行update操作,在没有数据的表中会出错。如果在逻辑代码中先做查询,查询结果有做更新,没有做插入,这样会将代码复杂化。 解决: mysql中提供了一个sql语</div> </li> <li><a href="/article/253.htm" title="Android xml资源文件中@、@android:type、@*、?、@+含义和区别" target="_blank">Android xml资源文件中@、@android:type、@*、?、@+含义和区别</a> <span class="text-muted">Cb123456</span> <a class="tag" taget="_blank" href="/search/%40%2B/1.htm">@+</a><a class="tag" taget="_blank" href="/search/%40/1.htm">@</a><a class="tag" taget="_blank" href="/search/%3F/1.htm">?</a><a class="tag" taget="_blank" href="/search/%40*/1.htm">@*</a> <div>一.@代表引用资源 1.引用自定义资源。格式:@[package:]type/name android:text="@string/hello"   2.引用系统资源。格式:@android:type/name     android:textColor="@android:color/opaque_red"</div> </li> <li><a href="/article/380.htm" title="数据结构的基本介绍" target="_blank">数据结构的基本介绍</a> <span class="text-muted">天子之骄</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E6%95%A3%E5%88%97%E8%A1%A8/1.htm">散列表</a><a class="tag" taget="_blank" href="/search/%E6%A0%91%E3%80%81%E5%9B%BE/1.htm">树、图</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E6%80%A7%E7%BB%93%E6%9E%84/1.htm">线性结构</a><a class="tag" taget="_blank" href="/search/%E4%BB%B7%E6%A0%BC%E6%A0%87%E7%AD%BE/1.htm">价格标签</a> <div>数据结构的基本介绍 数据结构就是数据的组织形式,用一种提前设计好的框架去存取数据,以便更方便,高效的对数据进行增删查改。正确选择合适的数据结构,对软件程序的高效执行的影响作用不亚于算法的设计。此外,在计算机系统中数据结构的作用也是非同小可。例如常常在编程语言中听到的栈,堆等,就是经典的数据结构。   经典的数据结构大致如下:   一:线性数据结构 (1):列表 a</div> </li> <li><a href="/article/507.htm" title="通过二维码开放平台的API快速生成二维码" target="_blank">通过二维码开放平台的API快速生成二维码</a> <span class="text-muted">一炮送你回车库</span> <a class="tag" taget="_blank" href="/search/api/1.htm">api</a> <div> 现在很多网站都有通过扫二维码用手机连接的功能,联图网(http://www.liantu.com/pingtai/)的二维码开放平台开放了一个生成二维码图片的Api,挺方便使用的。闲着无聊,写了个前台快速生成二维码的方法。        html代码如下:(二维码将生成在这div下) ? 1  &nbs</div> </li> <li><a href="/article/634.htm" title="ImageIO读取一张图片改变大小" target="_blank">ImageIO读取一张图片改变大小</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/IO/1.htm">IO</a><a class="tag" taget="_blank" href="/search/image/1.htm">image</a><a class="tag" taget="_blank" href="/search/BufferedImage/1.htm">BufferedImage</a> <div> package com.demo; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; /** * @Description 读取一张图片改变大小 * @author FuJianyon</div> </li> <li><a href="/article/761.htm" title="myeclipse集成svn(一针见血)" target="_blank">myeclipse集成svn(一针见血)</a> <span class="text-muted">7454103</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/SVN/1.htm">SVN</a><a class="tag" taget="_blank" href="/search/MyEclipse/1.htm">MyEclipse</a> <div>                                 &n</div> </li> <li><a href="/article/888.htm" title="装箱与拆箱----autoboxing和unboxing" target="_blank">装箱与拆箱----autoboxing和unboxing</a> <span class="text-muted">darkranger</span> <a class="tag" taget="_blank" href="/search/J2SE/1.htm">J2SE</a> <div>4.2 自动装箱和拆箱 基本数据(Primitive)类型的自动装箱(autoboxing)、拆箱(unboxing)是自J2SE 5.0开始提供的功能。虽然为您打包基本数据类型提供了方便,但提供方便的同时表示隐藏了细节,建议在能够区分基本数据类型与对象的差别时再使用。 4.2.1 autoboxing和unboxing 在Java中,所有要处理的东西几乎都是对象(Object)</div> </li> <li><a href="/article/1015.htm" title="ajax传统的方式制作ajax" target="_blank">ajax传统的方式制作ajax</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>//这是前台的代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+</div> </li> <li><a href="/article/1142.htm" title="只用jre的eclipse是怎么编译java源文件的?" target="_blank">只用jre的eclipse是怎么编译java源文件的?</a> <span class="text-muted">avords</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a> <div>eclipse只需要jre就可以运行开发java程序了,也能自动 编译java源代码,但是jre不是java的运行环境么,难道jre中也带有编译工具? 还是eclipse自己实现的?谁能给解释一下呢问题补充:假设系统中没有安装jdk or jre,只在eclipse的目录中有一个jre,那么eclipse会采用该jre,问题是eclipse照样可以编译java源文件,为什么呢? &nb</div> </li> <li><a href="/article/1269.htm" title="前端模块化" target="_blank">前端模块化</a> <span class="text-muted">bee1314</span> <a class="tag" taget="_blank" href="/search/%E6%A8%A1%E5%9D%97%E5%8C%96/1.htm">模块化</a> <div>背景: 前端JavaScript模块化,其实已经不是什么新鲜事了。但是很多的项目还没有真正的使用起来,还处于刀耕火种的野蛮生长阶段。   JavaScript一直缺乏有效的包管理机制,造成了大量的全局变量,大量的方法冲突。我们多么渴望有天能像Java(import),Python (import),Ruby(require)那样写代码。在没有包管理机制的年代,我们是怎么避免所</div> </li> <li><a href="/article/1396.htm" title="处理百万级以上的数据处理" target="_blank">处理百万级以上的数据处理</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E8%AF%A2/1.htm">查询</a> <div>一.处理百万级以上的数据提高查询速度的方法:        1.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索引而进行全表扫描。         2.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 o</div> </li> <li><a href="/article/1523.htm" title="mac 卸载 java 1.7 或更高版本" target="_blank">mac 卸载 java 1.7 或更高版本</a> <span class="text-muted">征客丶</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/OS/1.htm">OS</a> <div>卸载 java 1.7 或更高 sudo rm -rf /Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin 成功执行此命令后,还可以执行 java 与 javac 命令 sudo rm -rf /Library/PreferencePanes/JavaControlPanel.prefPane 成功执行此命令后,还可以执行 java </div> </li> <li><a href="/article/1650.htm" title="【Spark六十一】Spark Streaming结合Flume、Kafka进行日志分析" target="_blank">【Spark六十一】Spark Streaming结合Flume、Kafka进行日志分析</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Stream/1.htm">Stream</a> <div>第一步,Flume和Kakfa对接,Flume抓取日志,写到Kafka中 第二部,Spark Streaming读取Kafka中的数据,进行实时分析   本文首先使用Kakfa自带的消息处理(脚本)来获取消息,走通Flume和Kafka的对接 1. Flume配置 1. 下载Flume和Kafka集成的插件,下载地址:https://github.com/beyondj2ee/f</div> </li> <li><a href="/article/1777.htm" title="Erlang vs TNSDL" target="_blank">Erlang vs TNSDL</a> <span class="text-muted">bookjovi</span> <a class="tag" taget="_blank" href="/search/erlang/1.htm">erlang</a> <div>      TNSDL是Nokia内部用于开发电信交换软件的私有语言,是在SDL语言的基础上加以修改而成,TNSDL需翻译成C语言得以编译执行,TNSDL语言中实现了异步并行的特点,当然要完整实现异步并行还需要运行时动态库的支持,异步并行类似于Erlang的process(轻量级进程),TNSDL中则称之为hand,Erlang是基于vm(beam)开发,</div> </li> <li><a href="/article/1904.htm" title="非常希望有一个预防疲劳的java软件, 预防过劳死和眼睛疲劳,大家一起努力搞一个" target="_blank">非常希望有一个预防疲劳的java软件, 预防过劳死和眼睛疲劳,大家一起努力搞一个</a> <span class="text-muted">ljy325</span> <a class="tag" taget="_blank" href="/search/%E4%BC%81%E4%B8%9A%E5%BA%94%E7%94%A8/1.htm">企业应用</a> <div> 非常希望有一个预防疲劳的java软件,我看新闻和网站,国防科技大学的科学家累死了,太疲劳,老是加班,不休息,经常吃药,吃药根本就没用,根本原因是疲劳过度。我以前做java,那会公司垃圾,老想赶快学习到东西跳槽离开,搞得超负荷,不明理。深圳做软件开发经常累死人,总有不明理的人,有个软件提醒限制很好,可以挽救很多人的生命。 相关新闻: (1)IT行业成五大疾病重灾区:过劳死平均37.9岁 </div> </li> <li><a href="/article/2031.htm" title="读《研磨设计模式》-代码笔记-原型模式" target="_blank">读《研磨设计模式》-代码笔记-原型模式</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>声明: 本文只为方便我个人查阅和理解,详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /** * Effective Java 建议使用copy constructor or copy factory来代替clone()方法: * 1.public Product copy(Product p){} * 2.publi</div> </li> <li><a href="/article/2158.htm" title="配置管理---svn工具之权限配置" target="_blank">配置管理---svn工具之权限配置</a> <span class="text-muted">chenyu19891124</span> <a class="tag" taget="_blank" href="/search/SVN/1.htm">SVN</a> <div>今天花了大半天的功夫,终于弄懂svn权限配置。下面是今天收获的战绩。 安装完svn后就是在svn中建立版本库,比如我本地的是版本库路径是C:\Repositories\pepos。pepos是我的版本库。在pepos的目录结构 pepos    component    webapps 在conf里面的auth里赋予的权限配置为 [groups]</div> </li> <li><a href="/article/2285.htm" title="浅谈程序员的数学修养" target="_blank">浅谈程序员的数学修养</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E6%8B%9B%E8%81%98/1.htm">招聘</a> <div>                                 浅谈程序员的数学修养 </div> </li> <li><a href="/article/2412.htm" title="批量执行 bulk collect与forall用法" target="_blank">批量执行 bulk collect与forall用法</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/bulk+collect/1.htm">bulk collect</a><a class="tag" taget="_blank" href="/search/forall/1.htm">forall</a> <div>BULK COLLECT 子句会批量检索结果,即一次性将结果集绑定到一个集合变量中,并从SQL引擎发送到PL/SQL引擎。通常可以在SELECT INTO、 FETCH INTO以及RETURNING INTO子句中使用BULK COLLECT。本文将逐一描述BULK COLLECT在这几种情形下的用法。     有关FORALL语句的用法请参考:批量SQL之 F</div> </li> <li><a href="/article/2539.htm" title="Linux下使用rsync最快速删除海量文件的方法" target="_blank">Linux下使用rsync最快速删除海量文件的方法</a> <span class="text-muted">dongwei_6688</span> <a class="tag" taget="_blank" href="/search/OS/1.htm">OS</a> <div>1、先安装rsync:yum install rsync 2、建立一个空的文件夹:mkdir /tmp/test 3、用rsync删除目标目录:rsync --delete-before -a -H -v --progress --stats /tmp/test/ log/这样我们要删除的log目录就会被清空了,删除的速度会非常快。rsync实际上用的是替换原理,处理数十万个文件也是秒删。 </div> </li> <li><a href="/article/2666.htm" title="Yii CModel中rules验证规格" target="_blank">Yii CModel中rules验证规格</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/rules/1.htm">rules</a><a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a><a class="tag" taget="_blank" href="/search/validate/1.htm">validate</a> <div>Yii cValidator主要用法分析:  yii验证rulesit 分类: Yii yii的rules验证 cValidator主要属性 attributes ,builtInValidators,enableClientValidation,message,on,safe,skipOnError  </div> </li> <li><a href="/article/2793.htm" title="基于vagrant的redis主从实验" target="_blank">基于vagrant的redis主从实验</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/vagrant/1.htm">vagrant</a> <div>平台: Mac 工具: Vagrant 系统: Centos6.5 实验目的: Redis主从   实现思路 制作一个基于sentos6.5, 已经安装好reids的box, 添加一个脚本配置从机, 然后作为后面主机从机的基础box   制作sentos6.5+redis的box   mkdir vagrant_redis cd vagrant_</div> </li> <li><a href="/article/2920.htm" title="Memcached(二)、Centos安装Memcached服务器" target="_blank">Memcached(二)、Centos安装Memcached服务器</a> <span class="text-muted">frank1234</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a><a class="tag" taget="_blank" href="/search/memcached/1.htm">memcached</a> <div>一、安装gcc rpm和yum安装memcached服务器连接没有找到,所以我使用的是make的方式安装,由于make依赖于gcc,所以要先安装gcc 开始安装,命令如下,[color=red][b]顺序一定不能出错[/b][/color]: 建议可以先切换到root用户,不然可能会遇到权限问题:su root 输入密码...... rpm -ivh kernel-head</div> </li> <li><a href="/article/3047.htm" title="Remove Duplicates from Sorted List" target="_blank">Remove Duplicates from Sorted List</a> <span class="text-muted">hcx2013</span> <a class="tag" taget="_blank" href="/search/remove/1.htm">remove</a> <div>Given a sorted linked list, delete all duplicates such that each element appear only once. For example,Given 1->1->2, return 1->2.Given 1->1->2->3->3, return&</div> </li> <li><a href="/article/3174.htm" title="Spring4新特性——JSR310日期时间API的支持" target="_blank">Spring4新特性——JSR310日期时间API的支持</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/spring4/1.htm">spring4</a> <div>Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新</div> </li> <li><a href="/article/3301.htm" title="浅谈enum与单例设计模式" target="_blank">浅谈enum与单例设计模式</a> <span class="text-muted">247687009</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a> <div>在JDK1.5之前的单例实现方式有两种(懒汉式和饿汉式并无设计上的区别故看做一种),两者同是私有构 造器,导出静态成员变量,以便调用者访问。 第一种 package singleton; public class Singleton { //导出全局成员 public final static Singleton INSTANCE = new S</div> </li> <li><a href="/article/3428.htm" title="使用switch条件语句需要注意的几点" target="_blank">使用switch条件语句需要注意的几点</a> <span class="text-muted">openwrt</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/break/1.htm">break</a><a class="tag" taget="_blank" href="/search/switch/1.htm">switch</a> <div>1. 当满足条件的case中没有break,程序将依次执行其后的每种条件(包括default)直到遇到break跳出 int main() { int n = 1; switch(n) { case 1: printf("--1--\n"); default: printf("defa</div> </li> <li><a href="/article/3555.htm" title="配置Spring Mybatis JUnit测试环境的应用上下文" target="_blank">配置Spring Mybatis JUnit测试环境的应用上下文</a> <span class="text-muted">schnell18</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a> <div>Spring-test模块中的应用上下文和web及spring boot的有很大差异。主要试下来差异有: 单元测试的app context不支持从外部properties文件注入属性 @Value注解不能解析带通配符的路径字符串 解决第一个问题可以配置一个PropertyPlaceholderConfigurer的bean。 第二个问题的具体实例是:    </div> </li> <li><a href="/article/3682.htm" title="Java 定时任务总结一" target="_blank">Java 定时任务总结一</a> <span class="text-muted">tuoni</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/timer/1.htm">timer</a><a class="tag" taget="_blank" href="/search/quartz/1.htm">quartz</a><a class="tag" taget="_blank" href="/search/timertask/1.htm">timertask</a> <div> Java定时任务总结  一.从技术上分类大概分为以下三种方式:  1.Java自带的java.util.Timer类,这个类允许你调度一个java.util.TimerTask任务;   说明:    java.util.Timer定时器,实际上是个线程,定时执行TimerTask类 &</div> </li> <li><a href="/article/3809.htm" title="一种防止用户生成内容站点出现商业广告以及非法有害等垃圾信息的方法" target="_blank">一种防止用户生成内容站点出现商业广告以及非法有害等垃圾信息的方法</a> <span class="text-muted">yangshangchuan</span> <a class="tag" taget="_blank" href="/search/rank/1.htm">rank</a><a class="tag" taget="_blank" href="/search/%E7%9B%B8%E4%BC%BC%E5%BA%A6%E8%AE%A1%E7%AE%97/1.htm">相似度计算</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E6%9C%AC%E7%9B%B8%E4%BC%BC%E5%BA%A6/1.htm">文本相似度</a><a class="tag" taget="_blank" href="/search/%E8%AF%8D%E8%A2%8B%E6%A8%A1%E5%9E%8B/1.htm">词袋模型</a><a class="tag" taget="_blank" href="/search/%E4%BD%99%E5%BC%A6%E7%9B%B8%E4%BC%BC%E5%BA%A6/1.htm">余弦相似度</a> <div>本文描述了一种在ITEYE博客频道上面出现的新型的商业广告形式及其应对方法,对于其他的用户生成内容站点类型也具有同样的适用性。   最近在ITEYE博客频道上面出现了一种新型的商业广告形式,方法如下:     1、注册多个账号(一般10个以上)。     2、从多个账号中选择一个账号,发表1-2篇博文</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类:</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>