HTML简介及常用标签与使用方法

最新推荐文章于 2022-10-03 00:01:28 发布
最新推荐文章于 2022-10-03 00:01:28 发布
阅读量2.1k 收藏 12
点赞数 1
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengxueliuke/article/details/109910463
版权

什么是HTML?

HTML: ( Hypertext Markup Language )超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

所谓超文本,有两层含义:

  1. 它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)。
  2. 它还可以从一个文件跳转到另一个文件 ,与世界各地主机的文件连接(超级链接文本)。

特点

超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，其主要特点如下：

  1. 简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
  2. 可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
  3. 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上。
  4. 通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

网页的结构

根据w3c标准,一个网页主要三部分组成:结构,表现,还有行为。

  • 结构:HTML,用于描述页面的结构.
  • 表现:CSS用户控制页面中元素的样式.
  • 行为:JavaScript 用于响应用户的操作.

而HTML它负责网页的三个要素之中的结构,HTML使用标签的的形式来标识网页中的不同组成部分。所谓超文本指的是超链接,使用超链接可以让我们从一个页面跳转到另一个页面。

HTML的基本结构

一个HTML文档结构基本由以下四部分组成:

  1. 文档声明，标志是：<!DOCTYPE HTML> ，声明这是一个HTML文档。
  2. html标签对，标志是：<html></html> ，标签的作用相当于程序在告诉网页浏览器，整个网页是从<html>这里开始的，然后到</html>结束
  3. head标签对，标志是：<head></head>，head标签是页面的头部。
  4. body标签对，标志是：<body></body>，body标签是页面的身体，一般网页绝大多数的标签代码都是在这里进行编写。

完整代码如下:

<!-- 
文档声明,告诉浏览器当前网页的版本,
<!DOCTYPE html> 为html5的声明
-->
<!DOCTYPE html>
<!-- lang 语言种类 -->
<html lang="en">
    <!--
	head是网页的头部,head中的内容不会在网页中直接出现,只要是用来帮助浏览器和搜索引擎来解析网页
    -->
<head>
    <!-- 设置网页编码 -->
    <meta charset="UTF-8">
    <!-- 
   meta标签用来设置网页的元数据 
   常用属性:
	charset表示字符集
	name 指定数据的名称 content指定数据的内容
	
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- keywords表示网站的关键字,可以指定多个关键字,多个用英文逗号隔开 -->
    <meta name="keywords" content="前端,html5,css">
    <!-- description 用于指定网站的描述 网站的描述会显示在搜索引擎的搜索结果中-->
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城"/>

    <!-- 网页的标题 -->
    <title>Document</title>
</head>
    <!-- body是html的子元素,表示网页的主题,网页如中所有的可见内容都应该写在body中 -->
<body>
    
</body>
</html>

基本语法概述:

HTML标签是HTML语言中最基本的单位，标签一般是成对出现,但是页存在一些自结束标签，HTML标签的大小写无关的，例如“主体”< body>跟< BODY>表示的意思是一样的，但推荐使用小写。
HTML 标签是由尖括号包围的关键词，例如 < html>。
HTML 标签通常是成对出现的，例如 < html> 和 < /html> ，我们称为双标签。标签对中的第一个标签是 开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签，例如 < br />，我们称为单标签。

标签特点
  1. 由尖括号包围的关键词，比如 <html>
  2. 通常是成对出现的，比如 <div> 和 </div>
  3. 标签对中的第一个标签是开始标签，第二个标签是结束标签；
  4. 开始和结束标签也被称为开放标签和闭合标签。
  5. 也有单独呈现的标签，如：< img src="百度百科.jpg" />等。
  6. 一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值。如< h1>标题</h1>和 <input type="text" value="按钮" />。
  7. 网页的内容需在<html>标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在<head>标签中，而网页需展示的内容需嵌套在<body>标签中。某些时候不按标准书写代码虽然可以正常显示，但是作为职业素养，还是应该养成正规编写习惯。
标签关系:

双标签关系可以分为两类：包含关系和并列关系。

包含关系:
<head>
    <title></title>
</head>
并列关系:
<head></head>
<body></body>
标签中的属性:

在标签中(开始标签或自结束标签),还可以设置属性,属性是一个名值对(x=y),属性和标签名或其他属性应该使用空格隔开,有的属性拥有属性值,有些没有,如果有属性值的话,属性值应该使用引号引起来.

例如:

<!-- 拥有属性值的标签 -->
<meta charset="UTF-8">

语义标签:

在网页中,html专门用来负责网页的结构,所以在使用html标签时,我们应该关注的是我们标签的语义,而不是它的样式.以下拿几个常用的举例说明:

标题标签
< h1> ~ < h6>

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题，即< h1> ~ < h6>，代码如下:

<!--
单词 head 的缩写，意为头部、标题。
标签语义：作为标题使用，并且依据重要性递减。
-->
<h1> 我是一级标题 </h1>
<h2> 我是二级标题 </h2>
<h3> 我是三级标题 </h3>
<h4> 我是四级标题 </h4>
<h5> 我是五级标题 </h5>
<h6> 我是六级标题 </h6>

特点：

  1. 加了标题的文字会变的加粗，字号也会依次变大。
  2. 一个标题独占一行。
段落

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，< p>标签用于定义段落，它可以将整个网页分为若干个段落。

<!--
单词 paragraph [ˈpærəgræf] 的缩写，意为段落。
标签语义：可以把 HTML 文档分割为若干段落。
-->
<p> 我是一个段落标签 </p>

特点：

  1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
  2. 段落和段落之间保有空隙。
换行标签:

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 < br />。

<!--
单词 break 的缩写，意为打断、换行。
标签语义：强制换行。
-->
<br />

特点：

  1. <br/> 是个单标签。
  2. <br/> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
文本格式化标签:

在网页中，有时需要为文字设置粗体、斜体、或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示，以便突出重要性, 比普通文字更重要。

在这里插入图片描述

补充
标签描述
<article>定义文章。
<aside>定义页面内容以外的内容。
<details>定义用户能够查看或隐藏的额外细节。
<figcaption>定义 <figure> 元素的标题。
<figure>规定自包含内容，比如图示、图表、照片、代码清单等。
<footer>定义文档或节的页脚。
<header>规定文档或节的页眉。
<main>规定文档的主内容。
<mark>定义重要的或强调的文本。
<nav>定义导航链接。
<section>定义文档中的节。
<summary>定义 <details> 元素的可见标题。
<time>定义日期/时间。

HTML 常用标签

<div> 和<span>标签

<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。

<div> 这是div标签 </div>
<span> 这是span标签 </span>

div 是 division 的缩写，表示分割、分区。span 意为跨度、跨距。

特点：
  1. <div> 标签用来布局，但是现在一行只能放一个<div>。
  2. <span> 标签用来布局，一行上可以多个 <span>。
图像标签

在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。

<img src="图像URL" />

img 是单词 image 的缩写，意为图像。src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

代码示例:

    <img src="./img/1.gif" alt="松鼠">

其中,<img> 标签必需的属性:

属性值描述
alttext规定图像的替代文本。
srcURL规定显示图像的 URL。

url可以使用绝对路径或者相对路径:
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.baidu.com/images/logo.gif”。

相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级 、下一级和同一级就是 图片相对于 HTML 页面的位置。

<!-- 相对路径写法 -->
<!-- ./ 表示当前文件所在目录，即G:/images/ -->
<!-- ./可省略不写 -->
<img src = "logo.png"/>
<img src = "./logo.png"/>

<!-- ../ 表示当前文件所在目录的上级目录，即G:/ -->
<img src = "../images/logo.png"/>

<!-- /表示根路径，即G:/ -->
<img src = "/images/logo.png"/>

<img> 可选属性:

属性值描述
aligntop
bottom
middle
left
right		不推荐使用。规定如何根据周围的文本来排列图像。
borderpixels不推荐使用。定义图像周围的边框。
heightpixels*%*定义图像的高度。
hspacepixels不推荐使用。定义图像左侧和右侧的空白。
ismapURL将图像定义为服务器端图像映射。
longdescURL指向包含长的图像描述文档的 URL。
usemapURL将图像定义为客户器端图像映射。
vspacepixels不推荐使用。定义图像顶部和底部的空白。
widthpixels*%*设置图像的宽度。

超链接

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置.

超链接的语法格式:
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

a为单词 anchor [ˈæŋkə®] 的缩写，意为：锚。

可选属性:
属性值描述
downloadfilename规定被下载的超链接目标。
hrefURL规定链接指向的页面的 URL。
hreflanglanguage_code规定被链接文档的语言。
mediamedia_query规定被链接文档是为何种媒介/设备优化的。
reltext规定当前文档与被链接文档之间的关系。
target_blank
_parent
_self
_top
framename		规定在何处打开链接文档。
typeMIME type规定被链接文档的的 MIME 类型。
链接分类:

  • 外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >。

  • 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >。

  • 空链接: 如果当时没有确定链接目标时，<a href="#"> 首页 </a > 。

  • 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。

  • 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.

  • 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.

    • 在链接文本的 href 属性中，设置属性值为 #名字 的形式，如< a href="#two"> 第2集 </a>
    • 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：</h3 id="two">第2集介绍</h3>

代码示例:

	 <!-- 定义外部链接 -->
     <a href="https://www.baidu.com">百度</a>  
     <!-- 定义内部链接 -->  
     <a href="07.列表.html">超链接2</a>
     <!-- 定义空链接 -->  
	 <a href="#"> 首页 </a > 
	 <!-- 定义下载链接 -->  
	 <a href="http://css.doyoe.com/css.chm"> css.chm </a > 
	 <!-- 定义锚点链接 -->  
	 <a href="#bottom">去底部</a>
	 
	 <!-- 可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生 -->
    <a href="javascript:;">这是一个新的超链接</a>

表格标签

表格是网页制作中使用最多的工具之一，在制作网页时，使用表格可以更清晰地排列数据。

表格的基本语法
<!-- <table> </table> 是用于定义表格的标签。 -->  
<table>
	<!-- <tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。-->  
	<tr>
		<!-- 
		<td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
		字母 td 指表格数据（table data），即数据单元格的内容。
		-->  
		<td>单元格内的文字</td>
	</tr>
</table>
表头单元格标签

定义表格内的表头单元格，一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.
<th> 标签表示 HTML 表格的表头部分(table head 的缩写)

<table>
	<tr>
		<th>姓名</th>
	...
	</tr>
...
</table>
表格结构标签

因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成 表格头部和表格主体两大部分.
在表格标签中，分别用：<thead>标签 表格的头部区域、<tbody>标签 表格的主体区域. <tfoot>用来存放表格脚注,这样可以更好的分清表格结构。

代码示例:

<table width="800">
<thead>
      <tr>
        <td>head</td>
      </tr>
</thead>
<tbody>
      <tr>
        <td>body</td>
      </tr>
      <tr>
        <td> </td>
      </tr>
</tbody>
<tfoot>
      <tr>
        <td>foot</td>
      </tr>
</tfoot>
</table>
合并单元格

跨行合并： 此属性可以实现跨行单元格合并效果。rowspan是一个合成词:row(行)+span(跨度)。属性值是数字，表示跨几个列合并单元格——rowspan=“合并单元格的个数”

跨列合并： colspan属性:此属性可以实现横向跨列单元格合并效果。colspan是一个合成词:column(列)+span(跨度)。属性值是数字，表示跨几个列合并单元格——colspan=“合并单元格的个数”

代码示例:

 <table border= "1"   width= "200" >
        <tr>
           <td colspan="4"  >我是表格
           </td>
        </tr>
        <tr>
           <td   width= "25% "> 　 </td>  
           <td   width= "25% "> 　 </td>  
           <td   width= "25% "> 　 </td>  
           <td   width= "25% "> 　 </td> 
        </tr>
        <tr>
           <td   width= "25% "rowspan="2"> 　 </td>  
           <td   width= "25% "> 　 </td>  
           <td   width= "25% "> 　 </td>  
           <td   width= "25% "> 　 </td> 
        </tr>
        <tr>
           <td   width= "25% "> 　 </td>  
           <td   width= "25% " rowspan="3"> 　 </td>  
           <td   width= "25% "> 　 </td> 
        </tr>
        <tr>
           <td   width= "25% " colspan="2"  > 　 </td>  
           <td   width= "25% "> 　 </td>  
        </tr>
        <tr>
           <td   width= "25% "> 　 </td>  
           <td   width= "25% "> 　 </td>  
           <td   width= "25% "> 　 </td>  
   
        </tr>
   </table>

效果图:

在这里插入图片描述

列表标签

列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

无序列表

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。

无序列表的基本语法格式如下：

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
		 ...
</ul>

注意事项:

  1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。
  2. <ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。
  3. <li> 与 </li> 之间相当于一个容器，可以容纳所有元素。
  4. 无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。

效果图:
在这里插入图片描述

有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。
在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。

有序列表的基本语法格式如下：

<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
		 ...
</ol>

注意事项:

  1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
  2. <li> 与 </li>之间相当于一个容器，可以容纳所有元素。
  3. 有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。
自定义列表

在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。

其基本语法如下：

<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
</dl>

注意事项:

  1. <dl></dl> 里面只能包含 <dt> 和 <dd>。
  2. <dt> 和 <dd>个数没有限制，经常是一个<dt> 对应多个<dd>。

表单标签

在 HTML 中，HTML 表单常用于收集用户输入，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。
在这里插入图片描述

表单域

表单域是一个包含表单元素的区域。在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。 <form> 会把它范围内的表单元素信息提交给服务器.

代码示例:
<form action=“url地址” method=“提交方式” name=“表单域名称">
各种表单元素控件
</form>

form属性:

属性描述
accept-charset规定在被提交表单中使用的字符集（默认：页面字符集）。
action规定向何处提交表单的地址（URL）（提交页面）。
autocomplete规定浏览器应该自动完成表单（默认：开启）。
enctype规定被提交数据的编码（默认：url-encoded）。
method规定在提交表单时所用的 HTTP 方法（默认：GET）。
name规定识别表单的名称（用于区分同一页面的多个表单域）。
novalidate规定浏览器不验证表单。
target规定 action 属性中地址的目标（默认：_self）。
表单控件(表单元素)

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。
接下来我们一起来学习:

  1. input输入表单元素
  2. select下拉表单元素
  3. textarea 文本域元素
<input> 表单元素

在英文单词中，input 是输入的意思，而在表单元素中 <input> 标签用于收集用户信息。
<input> 标签包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

代码示例:

<input type="属性值" />

注意事项:

  • <input /> 标签为单标签
  • type 属性设置不同的属性值用来指定不同的控件类型

type 属性的属性值及其描述如下：

值描述
button定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox定义复选框。
file定义输入字段和 "浏览"按钮，供文件上传。
hidden定义隐藏的输入字段。
image定义图像形式的提交按钮。
password定义密码字段。该字段中的字符被掩码。
radio定义单选按钮。
reset定义重置按钮。重置按钮会清除表单中的所有数据。
submit定义提交按钮。提交按钮会把表单数据发送到服务器。
text定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

除 type 属性外，<input>标签还有其他很多属性，其常用属性如下：

值属性值描述
name用户自定义定义input元素的名称
value用户自定义规定input元素的值
checkedchecked规定此input元素首次加载时应当会选中
maxlength正整数规定输入字段中字符的最大长度

注意事项:

  1. name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
  2. name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.
  3. checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
  4. maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.

代码示例:

<!-- 使用placeholder来定义提示文本,该提示会在输入字段为空时显示，并会在字段获得焦点时消失。 -->
用户名: <input type="text" placeholder="请输入用户名"/>
<!-- 使用value规定 input 元素的默认值。 -->
用户名: <input type="text" placeholder="请输入用户名" value="张三"/>
<!-- 使用name的来用于区别不同的表单。 -->
用户名: <input type="text" placeholder="请输入用户名" value="张三" name="username" />

<!-- radio (或者checkbox）如果是一组，我们可以给他们命名相同的名字 -->
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女

<!-- 使用checked 属性：表示默认选中状态。用于单选按钮和复选按钮。 -->
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
<label>标签

<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
需要注意的是, <label> 标签的 for 属性应当与相关元素的 id 属性相同。

代码示例:

<body>
<p>请点击文本标记之一，就可以触发相关控件：</p>
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
</body>

效果图:
在这里插入图片描述

<select>表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。

语法：

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
	...
</select>

注意事项:

  1. <select> 中至少包含一对<option> 。
  2. 在<option> 中定义 selected =“ selected " 时，当前项即为默认选中项。

属性:

属性值描述
autofocusautofocus规定在页面加载后文本区域自动获得焦点。
disableddisabled规定禁用该下拉列表。
formform_id规定文本区域所属的一个或多个表单。
multiplemultiple规定可选择多个选项。
namename规定下拉列表的名称。
requiredrequired规定文本区域是必填的。
sizenumber规定下拉列表中可见选项的数目。
<textarea> 表单元素

<textarea> 标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本，该控件常见于留言板，评论。其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

语法:

<textarea rows="3" cols="20">
文本内容
</textarea>

属性:

属性值描述
autofocusautofocus规定当页面加载时，文本区域自动获得焦点。
colsnumber规定文本区域内可见的宽度。
disableddisabled规定禁用文本区域。
formform_id定义文本区域所属的一个或多个表单。
maxlengthnumber规定文本区域允许的最大字符数。
nametext规定文本区域的名称。
placeholdertext规定一个简短的提示，描述文本区域期望的输入值。
readonlyreadonly规定文本区域为只读。
requiredrequired规定文本区域是必需的/必填的。
rowsnumber规定文本区域内可见的行数。
wraphard soft规定当提交表单时，文本区域中的文本应该怎样换行。
风雪留客
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 超链接标签
lixingecho的博客
01-30 2722
超链接标签即a标签，键入a，点击tab即可生成，基本代码如下： <a href=""></a> 关于html超链接标签，主要介绍以下三种类型： 页面间链接 锚链接 功能性链接 一、页面间链接 点击超链接，跳转到对应的页面。 点击文字，跳转到其他页面 <!-- a标签： 1.生成：键入a，点击tab生成 2.href：必填，表示要跳转到哪个页面 【页面可以填写本项目中的其他html文件，也可以填写网上的页面】
20.2 HTML 常用标签
最新发布
07-28
在“20.2 HTML 常用标签”这个主题中，我们将深入探讨一些HTML中不可或缺的核心标签，这些标签对于创建功能性且结构清晰的网页至关重要。 1. **文档类型声明（<!DOCTYPE html>）**：这是每个HTML文档的开头，用于...
html中超链接使用_HTML利用超链接打开链接文件的方法介绍
weixin_39892311的博客
02-23 730
a和href属性HTML用来表示超链接，英文叫anchor。可以指向任何一个文件源：一个HTML网页，一个图片，一个影视文件等。用法如下：链接的显示文字点击当中的内容，即可打开一个链接文件，href属性则表示这个链接文件的路径。比如链接到jb51.net站点首页，就可以这样表示：多特软件站jb51.net首页target属性使用target属性，可以在一个新窗口里打开链接文件。多特软件站jb51....
HTML之超链接标签
David_house的博客
10-02 400
HTML之超链接标签超链接标签表示属性 超链接标签 表示 <a>访问方式</a> 注意：超链接标签中一定要声明方式，访问方式可以是文字也可以是图片 属性 href：要跳转的网页资源路径 本地资源：相对路径（绝对路径也可以，不推荐） 网络资源：网页的URL target：指明要跳转的网页资源的显示位置 target的取值： 符号 意义 _self 在当前页中刷新显示 _blank 在新的标签中显示 _top 在顶层页面中显示 _parent 在父级页面
HTML常用标签及其用法
asdasdas1414的博客
05-07 1872
1.HTML分块--------< div> div标签可以控制文字大小，字体，颜色等等。常用属性如下： color : #999999 文字颜色 font-family : 宋体 文字字型 font-size : 10pt 文字大小 font-style:itelic 文字斜体育 font-variant:small-caps 小字体 letter-spacing : 1pt 文字间距 line-height : 200% 设定行高 font-weight:bold 文字粗体
html 超链接 get方式提交表单
chen249191508的专栏
09-05 955
// 这里是点击标签，get方式提交数据。 <a href='www.hehefo.com/index?station_info=station_info0'><font color='#000000'>首页</font></a> 点击首页后，在 python flask 后台获取get到的参数 @app.route('/index', met...
HTML常用标签大全及html标签的特点
09-28
本篇文章给大家整理些关于html常用标签大全及html标签的特点，希望对大家学习html相关知识有所帮助，感兴趣的朋友一起学习吧
HTML常用标签代码
05-07
在本资源中，我们看到的"HTML常用标签代码"显然是一个帮助初学者或开发者学习和练习HTML标签的资料。下面将详细介绍一些常见的HTML标签及其用法。 1. `<html>`: 这是每个HTML文档的根元素，包含整个网页的代码。...
HTML简介及常用标签（中）
05-10
span 标签默认浏览器中没有效果，strong\b标签默认是加粗显示，但strong更多是有强调的作用。i\em是倾斜的意见，但em具有强调的作用。br表示换行的意思。
HTML系列（五）：超链接
weixin_30703911的博客
03-03 295
<a> 标签定义超链接，最重要的属性是 href 属性，它指示链接的目标。通过将href属性设定不同类型的值可以使链接指向不同类型的链接地址：内部链接、外部链接、锚链接。 内部链接指的是同一域名网站内部页面的相互链接；外部链接指从某一域名网页指向外部域名网站的链接；锚链接指从某个域名外部所有以文字带超链接指向这个域名的链接，是影响网站关键词在搜索引擎中排名的重要因...
HTML5 对各个标签的定义与规定：article
11-21
<article> 标签装载显示一个独立的文章内容。 例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章等等，一个用户评论等等 artilce可以嵌套，则内层的artilce对外层的article标签有隶属的关系。 例如，一个博客文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。 示例代码： 代码: 全选 运行 <!DOCTYPE html>
HTML常用标签之超链接标签
xinxin的博客
10-03 2217
2、内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如< a href=“first_page.html” >首页< /a >。第二步：找到目标位置标签，里面添加一个id属性=刚才的名字，如：< h3 id=“two”>第二集介绍< /h3 >3、空链接：如果编写程序的时候没有确定链接目标时，可使用：< a href = “#”> 首页 < /a >。1、外部链接：例如< a href = “http://www.baidu.com”>百度< /a >。
【HTML】html中的超文本链接
04-22 1万+
关于超文本链接：1、定义： 超文本链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。 2、作用： (1)通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站，这符合人类的跳跃思维方式。 (2)链接的标志有文字和图形两种。可以制作一些精美的图形作为链接按钮，使它和整个网页融为一体。 3、方式： (1)所谓的超文本链接是指从一个网页指向一个目标的连接
在html中超链接_HTML超链接
weixin_32271623的博客
12-31 887
HTML超链接网站的各个HTML文档通过超链接的方式相互连接在一起，形成一个连贯的网站。用户可以通过点击超链接跳转到自己希望浏览的页面中。因此超链接在任何一个网站中都可以看到，是串联网站形成整体的核心组成部分。锚点的布置HTML超链接以标签作为锚点进行触发，锚点需要有一个载体，而这个载体可以是一个文字、一个词、或者一句话，也可以是图像或者某个形状。当鼠标移动到带有锚点的载体上时，鼠标会变成一个小手...
HTML学习记录二:html标签（五）：超链接标签
吮指原味鸡的博客
10-29 1218
HTML学习记录二:html标签（五）：超链接标签一、超链接标签二、超链接标签的属性三、超链接的锚点用法四、链接分类： 一、超链接标签 在 HTML 标签中， 标签用于定义超链接，作用是从一个页面链接到另一个页面。 <a href = "跳转的路径url" title ="鼠标移到链接上的时候显示的文字" taget = "打开窗口的方式">超链接</a> 二、超链接标签的属性 属性 值 href 链接去往的路径，必写属性，没有就是空链，用#填写，最好不要为空
html标记表示超链接,HTML常见标签学习
weixin_35705382的博客
06-20 569
关于表格的HTML标签的介绍表示一个表格，表示表格的一行，表示表格一行中的一个单元格，和一样，只不过标签让内容居中并加粗，常用语表示表头的信息。表示表格第一行表头。表示表格最底部一行。关于超链接的HTML标签介绍表示超链接。链接 href属性表示点击超链接跳转到哪个地方。herf属性的其它写法1. herf='//qq.com' 无协议绝对地址,自动继承...
html中超链接使用_HTML+CSS 基础知识-链接与图像
weixin_29486701的博客
01-08 360
一、链接1、概述HTML 页面使用超链接与网络上的另一个 HTML 页面相连。几乎可以在所有的网页中找到链接，点击链接可以从一张页面跳转到另一张页面。 ​ 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的 HTML 页面或者当前 HTML 页面中的某个部分。 ​ 当把鼠标指针移动到 HTML 页面中的某个链接上时，箭头默认会变为一只小手的样式。2、链接元素HT...
Web基础 HTML标签 六种超链接标签的使用方式
运维派大星
03-29 3万+
Web基础 HTML标签 六种超链接标签的使用方式 分别是：外部链接、内部链接、空链接、下载链接、网页元素链接、锚点链接的使用方式
HTML超链接详解
热门推荐
JiuMeilove的博客
08-26 5万+
超链接定义及使用说明 < a> 标签定义超链接，用于从一个页面链接到另一个页面。 < a> 元素最重要的属性是 href 属性，它指定链接的目标。 在所有浏览器中，链接的默认外观如下： 未被访问的链接带有下划线而且是蓝色的 已被访问的链接带有下划线而且是紫色的 活动链接带有下划线而且是红色的 提示和注释 提示：如果没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属性。 提示：通常在当前浏览器窗口中显示被链接页面，除非规定了
HTML常用标签总结
03-09
<!DOCTYPE>声明文档类型，通常使用的文档类型为html5，但还有许多版本的文档类型如...希望通过对HTML常用标签的总结和学习，能够帮助大家更好地理解和应用HTML标签，为日后的网页开发工作打下坚实的基础。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值