01-HTML基础_若要在网页中显示包含4个字符的字符串“<br>”,则html源码为( )。-程序员宅基地

技术标签： HTML

一、HTML概述

1、HTML：超文本标记语言

注：

（1）静态网页的扩展名：.html、.htm

（2）动态网页的扩展名：.asp、.jsp、.aspx、.php

2、HTML标签不区分大小写，但建议小写。所有内容都使用标签完成，不是标签的，浏览器会作为纯文本来解析（HTML解析引擎中只认标签）

注：

（1）标签与标签之间是可以嵌套的，但先后顺序必须保持一致

（2）操作思想：对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作（标签就相当于一个容器）

3、HTML注释

（1）源文件中会存在HTML的注释，但注释的内容不会显示在页面上

（2）注释标记中不能嵌套注释标记

    <!-- 注释语句 -->

4、HTML格式

<!DOCTYPE html>
<html lang="en">
    <!-- <head>最先加载。辅助信息和一些需要先加载的内容写在<head>中 -->
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!-- 99%的内容都在<body>中 -->
    </body>
</html>

5、<标签名属性名1="属性值1" 属性名2='属性值2' ...> 内容 </标签名>

注：一般使用双引号。双引号中可以嵌套单引号，单引号中也可以嵌套双引号，但单引号和双引号都必须成对出现

6、所有标签的通用属性：id、class、title、style

二、<head>标签

1、<head></head>标签用于定义文档的头部，它是所有头部元素的容器。头部中定义的都是网页的一些辅助信息，以及需要先加载的内容

2、<head>中的标签：头部元素有<title>、<meta>、<link>、<style>、<script>等标签

<head>
    <title></title>
    <meta />
    <link />
    <style></style>
    <script></script>
</head>

（1）<title></title>：浏览器标题栏显示的内容。网页的<title>标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速判断出网页的主题。每个网页都应该有一个独一无二的title

（2）<base href="网页中所有超链接的目录，可以是本地目录或网络目录。只作用于相对路径的超链接文件" target="打开超链接的方式，_blank表示所有的超链接都用新窗口打开">：超链接的基本设置（统一设置）

注：<base>针对的是页面中的所有超链接，设置它们链接资源的位置，以及打开资源的方式

（3）<meta name="网页的描述信息。当name取值为keywords时，content属性的内容就作为搜索引擎的关键字进行搜索" http-equiv="模拟http协议的响应消息头，后面用服务端实现" content="text/html; charset=utf-8" />：模拟http消息，设置页面的一些相关内容

eg：

（4）<link href="链接进来的目标文档，url" ref="描述目标文档与当前文档的关系，stylesheet" type="文档类型，text/css或text/javascript" media="指定目标文档在哪种设备上起作用" />：引入外部文件（链接一个与该网页有关的其他文件资源），可以有多个

（5）<style type="text/css"></style>：内嵌的css样式

三、列表标签

1、作用：格式化数据

2、列表标签分为三类

（1）列表标签<dl></dl>

<dl>
    <dt>上层项目：定义标题（必有）</dt>
    <dd>下层项目：描述信息，有自动缩进效果（可有可无，可多个）</dd>
    <dd>下层项目：描述信息，有自动缩进效果（可有可无，可多个）</dd>
</dl>

（2）无序的项目列表<ul></ul>

<ul type="排序方式。disc实心圆（默认）/circle空心圆/square（实心方块）">
    <li>无序的项目列表：至少有一对 li </li>
    <li>无序的项目列表：至少有一对 li </li>
</ul>

注：为了使<li>中的n个小盒子对齐，对它们均设置左浮动 -- css使用技巧

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            li {
                list-style: none;
                float: left;
                margin-left: 10px;
            }
        </style>
    </head>
    <body>
        <!-- 例子：页码：1 2 3 ... -->
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
    </body>
</html>

（3）有序的项目列表<ol></ol>

<ol type="排序方式，默认的序号为1 2 3">
    <li>有序的项目列表：至少有一对 li </li>
    <li>有序的项目列表：至少有一对 li </li>
</ol>

3、编号列表相互嵌套，在<li>中可以嵌套若干个完整的<ul>或<ol>

4、无论有序和无序，条目的封装用的都是<li>，而且它们都有缩进效果（与<dd>相同）

四、表格标签<table></table>

1、作用：格式化数据

2、基础表格

<!-- cellpadding是单元格的内边距，即 单元格内的文字距单元格边框的距离 -->
<!-- cellspacing是单元格的外边距，即 单元格与单元格之间的距离 -->
<!-- 
    在没有添加css样式之前（默认情况下），表格的边框border=0，即 没有边框（没有表格线）
    表格的宽度和高度靠其自身的内容来支撑，也可以设width和height
 -->
<!-- <tr>的宽度取决于<table> -->
<table border="1" bordercolor="#0000ff" cellpadding="10" cellspacing="5" width="500" 
   summary="表格的摘要。摘要的内容不会在浏览器中显示，它的作用是增强表格的可读性（语义化），使搜索引擎更好的读懂表格内容">
    <!-- 表格标题，默认居中 -->
    <caption>表格标题</caption>
    <tr>
        <!-- th：表头，默认加粗并居中 -->
        <th>第一行第一列标题</th>
        <th>第一行第二列标题</th>
    </tr>
    <tr>
        <!-- td：默认居左 -->
        <td>第二行第一列内容</td>
        <td>第二行第二列内容</td>
    </tr>
    <tr>
        <!-- 如果单元格为空格，使用空格占位 -->
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

3、不规则表格：左右合并、上下合并

<!-- 不规则表格，先确定有多少行，再确定每行有多少个单元格，然后合并单元格 -->
<table border="1" bordercolor="#0000ff" cellpadding="10" cellspacing="0" width="500">
    <caption>不规则表格标题</caption>
    <tr>
        <!-- colspan：合并列（左右合并） -->
        <th colspan="2">第一行：左右合并后的标题</th>
    </tr>
    <tr>
        <td>第二行第一列内容</td>
        <td>第二行第二列内容</td>
    </tr>
</table>
<br />
<table border="1" bordercolor="#0000ff" cellpadding="10" cellspacing="0" width="500">
    <caption>不规则表格标题</caption>
    <tr>
        <!-- rowspan：合并行（上下合并） -->
        <th rowspan="2">第一行第一列：上下合并后的标题</th>
        <td>第一行第二列内容</td>
    </tr>
    <tr>
        <td>第二行第二列内容</td>
    </tr>
</table>

4、表格分体：分段加载、显示，提高加载速度

<table>

    <!--
        表格分体：一个<table>有一个<thead>和一个<tfoot>，可以有多个<tbody>
        如果没有表格分体，<table>要全部加载完之后才能显示
        有了表格分体，<table>可以按结构一块块的显示，<tbody>中的内容加载完优先显示，不用等到全部<table>都加载完再显示
        如果表格内容很多，可以用多个<tbody>分段，一部分一部分的加载、显示
    -->

    <!-- 
        table内标签的书写顺序是：thead(一个) -> tfoot(一个) -> tbody(可多个)
        这样写是为了浏览器在收到全部数据之前即可显示页脚
     -->
    <thead>导航栏，一个</thead>

    <tfoot>页脚：企业基本信息，一个</tfoot>

    <!-- <table>的下一级标签是<tbody>，不写也有（默认）。可以有多个<tbody> -->
    <tbody>

    </tbody>

    <tbody>

    </tbody>
</table>

5、表格嵌套表格：里面表格的宽度一般用百分比（不设固定值），根据外面表格的变化而变化

6、<table>边框的分离与合并

（1）border-collapse: separate; ：边框分离（默认）

（2）border-collapse: collapse; ：边框合并。此时HTML中设置的cellspacing属性值无效

7、关于<tr>和<td>

（1）<tr>中无width属性，其宽度取决于<table>的位置

（2）<tr>没有border属性，但<th>、<td>有border属性

（3）<td>中有padding属性，但无margin属性（对<td>设置margin无效）

8、其他

（1）<table>搜索层次多，<div>搜索层次少（最多三层）。所以，使用<div>有利于网站的优化

（2）<table>外最好嵌套一个<div>，因为<table>不能加滚动条，可以加给<div>，使用 overflow: auto;（<div>要设定高度height）

五、网站的优化（SEO）

1、关键字、网页描述、title、<title>、静态化（扩展名为.html等，易于抓取关键字）、排版上DIV+CSS（比纯表格排版）搜索到的几率高

六、图片标记<img />

1、常用的图片格式：GIF、JPG、PNG

2、<img src="url，图片地址（相对路径）" alt="图片说明文字：图片不能显示时的替换文本（有利于搜索引擎的优化）。此属性的浏览器兼容性很差" title="鼠标悬停时显示的内容（有利于SEO优化）" border="边框：默认情况下图片不显示边框，但在图片作为超链接时，会显示边框。border=0即可消除边框" width="通常width、height只设置其中一个，另一个会按原图等比例显示" height="" />

注：

（1）通过HTML访问本地图片，使用绝对路径会有问题

（2）图片是单独的文件数据，网页也是单独的文件数据，在网页中指定图片的位置，浏览器对图片的位置进行解析并将图片展示出来。所以，访问带有图片的网页时共发送了两次请求，一次请求html页面，另一次请求图片数据

七、超链接标签<a></a>

1、超链接标签<a>如果没有指定任何属性，此超链接是没有效果的

2、<a href="跳转目标，必选属性，不写该属性没有点击效果。值为空，默认打开当前文件所在的目录" target="目标窗口的弹出方式。默认在当前页面打开_self，_blank是在新页面打开。_top和_parent用于框架技术中" title="鼠标滑过链接时显示的内容。在实际开发中，主要是为了方便搜索引擎了解链接地址的内容（语义化更友好）">超链接显示在页面上的内容</a>

注：有了href属性，才有了点击效果。href属性的值的不同，解析方式也不同。如果href的值中没有指定过任何协议，解析时按照默认协议来解析该值，默认的协议是file协议（文件协议）。即把href的值当做文件，打开此文件所在的目录 --看浏览器左下角状态栏

3、超链接的作用：

（1）连接资源

    <!-- <a>中属性href的值，会启动相对应的协议引擎（应用程序）来解析该href的值 -->
    <a>超链接如果没有指定href属性，则该超链接是没有效果的</a>
    <a href="#">表示一个空链接。即 此链接无任何点击效果</a>
    <a href="">未指定过资源，默认打开当前文件所在的目录</a>

    <a href="imgs/1.jpg">链接本地文件</a>
    <a href="www.sina.com.cn">href的值没有指定任何协议，用默认的file协议来解析，把href的值(www.sina.com.cn)当做文件（本地文件资源），打开此文件所在的目录</a>
    <!-- 启动了相对应的协议引擎（应用程序）来解析href的值 -->
    <a href="http://www.sina.com.cn">打开新浪网，用http协议。http是公共协议，谁都可以解析</a>

    <a href="mailto:[email protected]">打开电子邮件应用，使用mailto协议。mailto协议（邮件协议）浏览器解析不了，浏览器会找电脑中可以解析该协议的引擎 -- outlook等</a>
    <a href="thunder:...">thunder协议是迅雷自己自定义的协议，将 http://www.xunlei.com/movies/xxx.rmvb 地址加密了。因为http协议是公共协议，谁都可以解析
        thunder协议浏览器解析不了，浏览器会找电脑中可以解析该协议的应用软件 -- 迅雷</a>
    <a href="javascript:void(0)" onclick="alert('弹出')">指定了一个协议，javascript协议。此时会启动javascript解析引擎，对void(0)内容进行解析：什么都不做。
        javascript:void(0)：取消超链接的默认点击效果。onclick：自定义该超链接的点击效果</a>

    <!-- 锚 -->
    <a href="top">href的值没有指定任何协议，用默认的file协议来解析。会将top视为一个文件，启动文件引擎。
        但top不是文件，而是文件中的一个位置。所以，需要在top前加一个 # ，标识一下这是一个位置</a>
    <a href="#top">锚xxx</a>

（2）定位标记（锚）：快速定位到目标内容（定位资源）

    <a name="位置">定义要定位到的位置，一般不写内容</a>
    <a href="#位置">链接文本，内容多为：回到xxx位置</a>

    <!-- 定位标记（锚） -->
    <a name="top">顶部位置</a>
    <hr />
    
    <a name="center">中间位置</a>
    <hr />
    
    <a href="#top">回到顶部位置</a>
    <a href="#center">回到中间位置</a>

4、<a></a>标签不仅可以创建超文本链接，在网页中，各种网页元素（eg：图片、表格、音频、视频等）都可以添加超链接

5、去掉超链接图片的边框，只需将图片的边框border设置为0即可

    <a href="#"><img src="xxx" border="0" /></a>

八、图像地图<map></map>

1、<map></map>标签要和<img />标签联合使用

    <!-- 一个图片可以加多个链接 -->
    <img src="xxx.jpg" alt="图片说明文字" usemap="#Map：文件路径"/>
    <map id="Map：热点区域" name="Map">
        <area shape="形状" coords="坐标" href="点击图片链接到哪里"/>
    </map>

九、框架标签<frameset><frame /><frameset>

1、<frameset></frameset>：把一个窗体分割成几个部分，每一个部分都可以链接一个网页

2、框架标签不要写在<body>中，它不属于主体中的内容，要单独定义出来。使用了框架<frameset>标签，需要把<body>去掉？？？

<!DOCTYPE html>
<html lang="en">
    <head>
    </head>
    
    <frameset>
        <frame src="" />
    </frameset>
    
    <body>
    </body>
</html>

3、框架主要应用于：电子书、帮助手册、企业网站的后台管理等

4、网站后台一般使用框架实现，而网站前端一般不用框架实现，因为框架无兼容性（前端是用户用的，后台是网站维护人员用的）

<!-- 一个窗体显示多个资源 -->
<!-- 先上下分，用rows -->
<frameset rows="30%, *">
    <!-- src：该部分需要展示的页面地址 -->
    <frame src="top.html" name="top"/>
    <!-- 下面的再左右分，用cols -->
    <frameset cols="30%, *">
        <frame src="left.html" name="left" />
        <frame src="right.html" name="right" />
    </frameset>
</frameset>

<!-- left.html中，有超链接<a>，想让超链接的内容在右侧显示，需要给每个<frame>添加name属性（起个名字），以便准确定位 -->
<a href="链接的文件地址" target="<frame>标签中name属性的值。若在右侧显示，值为right"></a>

注：使用<frameset></frameset>时，最上面的过渡型要改成框架型

5、如何返回框架首页，取决于<a>标签的target属性值

（1）target = "_top"：返回框架最顶层

（2）多层框架时，_top是返回到最顶层，_parent是返回到上一级

6、框架的宽度和显示器的宽度一样，可以用<div>包裹，然后用<div>调整框架的宽度

十、画中画标签<iframe></iframe>

1、<iframe></iframe>是<body>的子标签

2、可以在窗体的任意位置打开一个区域，并链接资源进去

    <iframe src="链接的资源">此处写的文字不会显示出来。如果能看到此处的提示信息，说明浏览器不支持<iframe>标签</iframe>

3、如果<iframe>的height、width都是0，你看不到任何东西（画中画窗体的宽高都是0），但是访问了src链接的资源，可能是恶意文件。多看看状态栏访问的网址是否是正确的网址

    <!-- 恶意程序 -->
    <iframe src="http://www.xxx.com.1.js" width="0" height="0">xxx</iframe>

十一、表单标签<form></form>

1、表单标签<form></form>是最常用的标签，用于与服务器端的交互

2、表单的主要作用：收集用户信息

3、表单的工作原理

（1）填写有表单的网页，点击“提交”按钮进行提交

（2）表单数据通过互联网传递到服务器

（3）服务器上有专门的程序，对提交的表单数据进行验证（此时数据在内存中）

（4）如果验证通过，直接写入数据库

（5）如果验证失败，将返回一个错误信息

4、表单的开发分两个部分：一是前端表单页面的制作和排版，二是后台程序对表单数据的验证和写入数据库

5、表单<form>和表格<table>嵌套时，是在<form>中嵌套<table>

6、<input>标签：type属性的值（10种）

<form>

    <!--
        如果要向服务端提交表单数据，表单中的组件都必须具备name和value两个属性（需要用户输入值的组件，其value属性可省略）
        value是要提交到服务器的数据，也是数据库要保存的值
        用于给服务端获取数据方便
    -->

    <input type="text\password\radio\checkbox\reset\submit\image\button\file\hidden" name="xxx" value="xxx，需要用户输入值的组件，该属性可省略" />

    <!-- 单选框和复选框，name值相同为一组，且必须有value，否则浏览器地址栏不显示值 -->
    <!-- 单选按钮radio：一次只能选一个，要把选项放在一个组里面，用name属性标识是否是同一个组 -->
    <input type="radio" name="xxx" value="xxx" ckecked="checked，可选择的属性，加上ckecked属性表示默认被选中" />页面显示的文字
    <!-- 复选框 -->
    <input type="checkbox" name="xxx" value="xxx" ckecked="checked，可选择的属性，加上ckecked属性表示默认被选中" />页面显示的文字

    <!-- 重置：将所有表单中的组件进行状态的还原，恢复到初始状态 -->
    <input type="reset" value="按钮上显示的文字" />
    <!-- 提交：将数据提交到服务端（如果没有指定服务端，数据会提交到当前页面） -->
    <input type="submit" value="按钮上显示的文字" />
    <!-- 图片，具备提交的效果（默认动作是提交表单），和submit的效果一样，但比submit漂亮 -->
    <input type="image" src="图片地址" />
    <!-- 按钮：不具备默认的点击效果，可以自定义点击事件效果，需要和js一起使用 -->
    <input type="button" value="按钮上显示的文字" onclick="点击触发的事件" />

    <!-- 选择文件（上传文件） -->
    <!-- 如果要限制上传文件的类型，需要配合js来实现验证 -->
    <!-- 对于文件上传的安全检查，一是扩展名的检查（enctype="multipart/form-data"），二是文件数据内容的检查（文件是否具有破坏性） -->
    <input type="file" name="file" />
    <!-- 隐藏组件：开发时很常用。数据不需要客户端知道，但是需要将其提交到服务端 -->
    <input type="hidden" name="xxx" value="xxx" />

</form>

7、<select>标签：下拉菜单

<form>
    <!-- 下拉框 -->
    <!-- multiple="multiple"：下拉列表的多选操作。Ctrl+单击，可以选择多个选项（Mac下用Command+单击） -->
    <select name="xxx" multiple="multiple">
        <!-- 每一个下拉菜单选项都必须使用<option>封装 -->
        <option value="向服务器提交的值" selected="selected，可选择的属性，加上selected属性表示默认被选中">页面显示的值</option>
        <option value="向服务器提交的值">页面显示的值</option>
        <option value="向服务器提交的值">页面显示的值</option>
    </select>
</form>

<form>
    <!-- 下拉菜单分组显示 -->
    <select name="xxx">
        <optgroup label="组名1">
            <option value="向服务器提交的值">页面显示的值</option>
            <option value="向服务器提交的值">页面显示的值</option>
        </optgroup>
        <optgroup label="组名2">
            <option value="向服务器提交的值">页面显示的值</option>
            <option value="向服务器提交的值">页面显示的值</option>
        </optgroup>
    </select>
</form>

8、<textarea>标签：文本框

<form>
    <!-- 文本框 -->
    <!-- 
        单行文本框（type="text"）最多只能输入255个字符
        文本框（<textarea></textarea>）对输入文字的个数没有限制
        更多使用width、height替代cols、rows
     -->
    <textarea name="xxx" cols="" rows="">文本框内容</textarea>
</form>

9、<label for="xxx"><input type="" name="" value="" id="xxx" /></label>

当用户单击选中<label>标签时，浏览器会自动将焦点转到和<label>标签相关联的表单控件上，就自动选中和<label>标签相关联的表单控件

<form>
    <!-- 加上<label>后，点击选择框或文字都可以选中 -->
    <!-- 
        <label>的for属性的值为相应表单控件<input>的id值时，即可将<label>标注的内容绑定到指定id的表单控件上
        当点击<label>中的内容时，相应的表单控件就会被选中
     -->
    <label for="boy"><input type="radio" value="male" name="sex" id="boy" />男</label>
    <label for="girl"><input type="radio" value="female" name="sex" id="girl" />女</label>
</form>

10、<form>标签的属性

<form action="" method="" id="" name="" enctype="">

</form>

（1）action：指定数据要提交到服务端的位置，一般是后台程序（可以设为.html或.jsp页面）。如果没有指定服务端，数据会提交到当前页面（默认提交到当前页面）

eg：action="http://10.1.31.69:9090" -- 自己搭建的服务器

（2）method：提交方式，有get和post两个值。method属性省略不写，默认使用get方式

（3）enctype：表单数据的编码方式（加密方式），一般情况下不需要该属性。只能在post方式下使用，多在文件上传时使用此属性。取值有两个：

application/x-www-form-urlencoded

multipart/form-data（上传文件的加密类型）

注：所有表单控件都必须放在<form>表单中，否则用户输入的信息提交不到服务端

<form action="" method="" id="" name="" enctype="">
    <!-- 为表单内容分组 -->
    <fieldset>
        <legend>第一个表单组名称</legend>
        <input type="" name="" value="" />
        <input type="" name="" value="" />
    </fieldset>
    <fieldset>
        <legend>第二个表单组名称</legend>
        <input type="" name="" value="" />
        <input type="" name="" value="" />
    </fieldset>
</form>

11、get提交和post提交的区别

（1）get提交，提交的信息都显示在地址栏中

post提交，提交的信息不显示在地址栏中（在请求体中）

（2）get提交，对于敏感的数据信息不安全

post提交，对于敏感信息安全

（3）get提交，对于大数据不行，因为地址栏存储体积有限

post提交，可以提交大体积数据（文件上传用post）

（4）get提交，将信息封装到了请求消息的请求行中

post提交，将信息封装到了请求体中

12、在服务端的区别

（1）如果将中文提交到tomcat服务器，服务器默认用ISO8859-1进行解码，会出现乱码。先通过ISO8859-1进行编码，得到中文的原码，再用指定的中文码表解码即可。这种方式对get提交和post提交都有效

（2）对于post提交方式提交的中文，还有另一种解决办法，就是直接使用服务端的request对象的setCharacterEncoding()方法，直接设置指定的中文码表，就可以将中文数据解析出来。这个方法（request对象的setCharacterEncoding()方法）只对请求体中的数据进行解码

综上，表单提交建议使用post

十二、与服务端交互的三种方式

1、在地址栏输入url地址（get请求）

eg：url地址？属性(name)=值(value)&name=value... （type为text、password、textarea的value属性可以省略，其值为文本框中输入的内容）

2、超链接<a>（get请求）

3、表单（get请求或post请求）

十三、客户端和服务端的校验问题

1、问：如果在客户端进行了增强型的校验（只要有一个组件的内容是错误的，就不能继续提交 -- 只有全部正确才可以提交），服务端收到数据后，还需要校验吗？

答：需要，为了安全性。

注：

（1）表单是互联网上的网页，这个网页带着增强型校验，但校验是本地的。直接打开源文件，将其中的增强型校验的代码删掉，目标地址保持不变（相对路径地址很麻烦，绝对路径地址没问题）。此时，提交出去有问题的表单，服务器不做校验会出事

（2）另一种做法：与服务器交互有三种方式，除了表单提交，还可以用在地址栏输入url的方式。记住地址和每一个组件的name值，就可以修改value值后提交（绕过客户端的校验）

（3）实际开发中，每次注册都要验证码，就是为了防止暴力注册

2、问：如果服务端做了增强型的校验，客户端还需要校验吗？

答：需要，因为要减轻服务器端的压力，同时提高用户的上网体验效果

十四、相对路径与绝对路径

1、路径不能含有特殊符号，所以路径一般不用中文（一般使用相对路径）

2、相对路径：一个文件相对于另一个文件的位置。一般是用于链接本网站（配有服务器的电脑）中的各个文件的路径（链接到本地的）

（1）目标文件和当前文件是平级关系的路径，直接写目标文件名

（2）目标文件在下一级，先写同级的文件名称，再加一个斜线，后跟目标文件名

（3）目标文件在上一级，往上一级就写一个 ../

eg：../：代表上一级文件夹

../../：代表上二级文件夹

3、绝对路径（不推荐使用）：一般是以主机名或IP地址开始的一个路径（链接到外网的），是带有盘符的路径或完整的网络地址

4、绝对URL的访问，总是从一个固定的起点开始，但它们访问的目标文件不相同。即起点是固定的，目标是可变的

5、访问本地文件的协议：file:///

访问互联网的协议：http://

十五、其他标签

1、<h1>：标题。<h1>一般用在网站名称上，<h2>一般用做栏目标题

2、<p>：段落。段落前和段落后都会有空白，可以用css样式删除或改变这些空白

3、<q>：短文本引用。浏览器会对<q>标签中的内容自动添加双引号（头和尾处）

注：引用别人的话使用短文本引用

4、<blockquote>：长文本引用。浏览器对<blockquote>标签的解析是缩进样式，即每行前后都有缩进

注：引用整首诗使用长文本引用

5、<pre>：预定义标签。可以将文本内容按在代码区中的样子显示在页面上，即保留文本在代码区的格式（原样输出）。被包围在<pre>元素中的文本通常会保留空格和换行符。如果需要在网页中预显示格式，可以使用<pre>。<pre>一个常见的应用是用来展示计算机的源代码，即 <pre>多行语言代码段</pre>

6、<code>：<code>一行代码语言</code>，即<code>中的代码在一行显示

7、<marquee direction="运动的方向，例如：down，从上向下运动" behavior="运动的方式，例如：slide（较常用），单次运动，运动完之后停在某个位置">显示的内容</marquee>：滚动字幕标记（现已不用）。能运动的标签，用于打开网站时看到的会移动的公告

8、<address>：为网页加入网站的联系地址、电子邮件地址、签名、文档的作者身份等信息。<address>在浏览器上显示的样式为斜体，可用css样式修改默认样式

9、换行：<br />

10、水平线：<hr />

11、粗体：<b></b>、<strong></strong>

12、斜体：<i></i>、<em></em>

13、删除线：<s></s>、<del></del>

14、下划线：<u></u>、<ins></ins>

15、上标：<sup></sup>

16、下标：<sub></sub>

十六、特殊字符标记：&字符;

1、空格： 

2、&：&

3、<：<

4、>：>

5、乘号X：×

6、除号：÷

7、上标2：²

8、下标3：&sub3;

9、￥：¥

10、摄氏度℃：°

11、：©

12、：®

十七、其他常用的链接

1、Email链接：<a href="mailto:[email protected]?cc=抄送地址&bcc=密件抄送地址&subject=邮件主题&body=邮件内容">发邮件</a>，点击链接会打开电子邮件应用，并自动填写收件人等设置好的信息

注：使用mailto在网页中链接Email地址。如果mailto后面同时有多个参数，第一个参数必须以"?"开头，后面的参数每一个都以"&"分隔

2、下载链接：任何网页不能直接执行的文件，都会出现下载对话框

注：网页可以直接执行的文件：.html、.css、.js、.gif、.htm

3、空链接：<a href="#">xxx</a>。空链接多用于未开发完成的内容

4、JS空链接：<a href="javascript:void(0)">js空链接</a>

注：在HTML中写js程序时，一般是以“javascript”开头，void(0)返回一个假值，什么也不做（0：假）

5、JS弹出的警告窗口：<a href="javascript:alert('弹出框内容')">超链接的文字</a>

十八、HTML、XHTML和XML

1、HTML：超文本标记语言

2、XHTML：可扩展的超文本标记语言

3、XML：可扩展标记语言（不是超文本）

4、HTML和XML的区别

（1）HTML的标签名全都是固定的

XML的标签名是可以自定义的

（2）HTML提供标签对数据进行封装，是对数据显示进行描述

XML是对数据信息进行描述，描述的是数据之间的关系

（3）XML代码的规定更为严格，标签不结束被视为错误。XML规范可以被更多的应用程序所解释，将成为一种通用的数据交换语言。各个服务器、框架都将XML作为配置文件

十九、标签的分类

1、标签分为三大类

（1）块元素：标签结束后都有换行（独占一行）。<div>、<p>（换行后加多一行空行）、<hx>、<dl>、<ol>、<ul>、<table>、<form>、<title>、<address>、<blockquote>

（2）行内元素：标签结束后没有换行（和其他元素都在一行上），只有一个空格。<span>、<a>、<br>、<font>、<label>、<select>、<q>、<code>、<em>、<strong>

（3）行内块元素：<img>、<input>

注：

（1）<div>和<span>标签都没有特殊含义，它们的作用就是为了封装数据，设置单独的样式

（2）<div>后面有换行，<span>后面没有换行，<p>前后都有空行

2、若想知道一个标记是块元素还是行内元素，在层叠样式中为其加边框即可

3、三大类标签的特点

（1）块元素特点：

a). 每个块元素都从新的一行开始，并且其后的元素也另起一行（一个块元素独占一行）

b). 元素的高度、宽度、行高以及顶和底边距都可设置

c). 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度

（2）行内元素特点：

a). 和其他元素都在一行上

b). 元素的高度、宽度及顶部和底部边距不可设置

c). 元素的宽度就是它包含的文字或图片的宽度，不可改变

注：行内元素不可以设置宽和高，想要设置宽高，可以将行内元素变成行内块元素

（3）行内块元素特点：

a). 和其他元素都在一行上

b). 元素的高度、宽度、行高以及顶和底边距都可设置

4、块元素和行内元素的区别

（1）块元素可以设置宽高和对齐属性，行内元素不可以设置宽高和对齐属性（宽高由内容决定）

（2）行内元素可以嵌套在块元素中，而块元素不可以嵌套在行内元素中

（3）行内块元素：可设宽高和对齐属性，但不能独占一行

5、display属性

（1）a{display: block;}：行内元素 --> 块元素

（2）div{display: inline;}：块元素 --> 行内元素

（3）display: inline-block;：行内块元素

（4）display: none：元素被隐藏（相当于该元素不存在）

6、行内元素没有宽和高，其宽和高由内容决定。想要有宽高，有四种方式：

（1）用 display: block; 将行内元素转成块元素 -- 块元素

（2）浮动float: left | right; -- 行内块元素

（3）固定定位position: fixed; -- 行内块元素

（4）绝对定位position: absolute; -- 行内块元素

注：行内元素只可以定义左右外边距，定义上下外边距无效

本文链接：https://blog.csdn.net/ruyu00/article/details/81001096

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

ffmpeg-linux Makefile运行环境配置_makefile 使用ffmpeg -l-程序员宅基地

文章浏览阅读963次。/tmp/ccvTv2zi.o: In function `av_make_error_string':encode_video.c:(.text+0x24): undefined reference to `av_strerror'/tmp/ccvTv2zi.o: In function `encode':encode_video.c:(.text+0x79): undefined reference to `avcodec_send_frame'encode_video.c:(.text+0xc_makefile 使用ffmpeg -l

git tag常用命令_git tag 参数-程序员宅基地

文章浏览阅读4.8k次。创建tag$ git tag -a v0.1.0 -m “release 0.1.0 version”解释：创建附注标签时，参数-a即annotated的缩写，指定标签类型，后附标签名。参数m指定标签说明，说明信息会保存在标签对象中。查看tag列出当前仓库的所有标签$ git tag切换tag切换标签与切换分支命令相同$ git checkout [tagname]解..._git tag 参数

2018年8月12日，已经很没有写过博客了_2018 写博客的地方-程序员宅基地

文章浏览阅读215次。已经很久没有写过博客了，期间也只是断断续续的写过两三篇最近比较的烦躁，可能是因为在家里待久了把因为每天基本上没有在学习，所以感觉自己的生活过的不是很充实有时候真的感觉自己很颓废。这两天开始学习那个微信小程序，在看那个官网的开发文档，感觉还挺不错的以后有时间尽量每天都来写一篇感悟今日心得体会和学习收获的博客吧，字数不在多认清自己在进步就好。..._2018 写博客的地方

vue js 监听页面滚动触底 && 监听iframe滚动及触底 && 带你搞清 offsetHeight，scrollTop，scrollHeight区别_vue scrollheight-程序员宅基地

文章浏览阅读3.7k次。想要监听页面滚动是否触底，你要先搞清offsetHeight，scrollTop，scrollHeight区别，以及如何让应用，话不多说上代码????????offsetHeight：它是包括padding、border、水平滚动条，但不包括margin的元素的高度。️：对于行内元素这个属性值一直是0，单位px，是只读元素。scrollTop：表示在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度即“卷”起来的高度。️：在无滚动条时scrollTop==0恒成立，单位_vue scrollheight

LOAD_TEMP - Unable to get database metadata from this database connection-程序员宅基地

文章浏览阅读1w次。关于kettle 写入mysql 遇到一个问题：LOAD_TEMP - Unable to get database metadata from this database connection，报错大致如下：2021/11/26 14:05:12 - LOAD_TEMP - ERROR (version 5.3.0.0-213, build 1 from 2015-02-02_12-17-08 by buildguy) : org.pentaho.di.core.exception.KettleDa_unable to get database metadata from this database connection

XPath详解_如何定义xpath-程序员宅基地

文章浏览阅读935次。XPath简介XPath 是一门在 XML 文档中查找信息的语言。XPath 用于在 XML 文档中通过元素和属性进行导航什么是 XPath?XPath 使用路径表达式在 XML 文档中进行导航XPath 包含一个标准函数库XPath 是 XSLT 中的主要元素XPath 是一个 W3C 标准XPath 路径表达式XPath 使用路径表达式来选取 XML 文档中的节点或者节点集。这些路径表达式和我们在常规的电脑文件系统中看到的表达式非常相似。XPath 标准函数XPath 含有超过 _如何定义xpath

随便推点

最强PostMan使用教程（1）-程序员宅基地

文章浏览阅读10w+次，点赞235次，收藏993次。最近需要测试产品中的REST API，无意中发现了PostMan这个chrome插件，把玩了一下，发现postman秉承了一贯以来google工具强大，易用的特质。独乐乐不如众乐乐，特此共享出来给大伙。Postman介绍Postman是google开发的一款功能强大的网页调试与发送网页HTTP请求，并能运行测试用例的的Chrome插件。其主要功能包括：模拟各种HTTP requests从常用的_postman

PTA 单链表结点删除_pta带头结点的有序单链表插入及删除。-程序员宅基地

文章浏览阅读2.4k次。本题要求实现两个函数，分别将读入的数据存储为单链表、将链表中所有存储了某给定值的结点删除。链表结点定义如下：struct ListNode { int data; ListNode *next;};函数接口定义：struct ListNode *readlist();struct ListNode *deletem( struct ListNode *L, i..._pta带头结点的有序单链表插入及删除。

"session marked for kill " 处理杀不掉的锁，立即释放会话资源-程序员宅基地

文章浏览阅读7.9k次，点赞4次，收藏12次。ORA-00031: session marked for kill 处理Oracle中杀不掉的锁最近遇到，ORACLE中的进程被杀掉后，状态被置为"killed"，但是锁定的资源很长时间不释放现在提供一种方法解决这种问题，那就是在ORACLE中杀不掉的，在OS一级再杀。 1.下面的语句用来查询哪些对象被锁： SELECT S.USERNAME,S.OSUSER,S._session marked for kill

git命令-笔记_git show current-程序员宅基地

文章浏览阅读205次。1 下载地址Windows版本：https://git-scm.com/download/winGit-2.29.1-64-bit.exe 2.29.12 相关命令2.1 基本git init 初始化代码仓库git status 查询仓库索引状态git add <文件名/目录> 添加文件到仓库git config --global user.email “[email protected]” 配置全局的提交者邮箱git config --global user.name “Y_git show current

unity3d UnityScript to C# Convertor 1.4 扩展下载-程序员宅基地

文章浏览阅读538次。资源名称:UnityScript to C# Convertor　　资源版本:1.4　　资源类型:.unitypackage　　资源大小:293K　　更新时间:2014-01-13　　资源图片: unity3d下载地址:http://www.unitymanual.com/thread-10680-1-1.html

STM32 磁场传感器HMC5883-程序员宅基地

文章浏览阅读1.7k次。一、IIC协议默认（出厂） HMC5883LL 7 位从机地址为0x3C 的写入操作，或0x3D 的读出操作。要改变测量模式到连续测量模式，在通电时间后传送三个字节：0x3C 0x02 0x00将00写入第二寄存器或模式寄存器以完成从单一模式切换到连续测量模式的设置。随着数据速率在出厂默认的15Hz更新，在查询HMC5883L数据寄存器进行新的测量之前，I2C主机允许产生一个..._hmc5883l 从机地址地址位