Web前端第二课(快速入门HTML标签合集、 WebStorm快捷键)Web前端第二课(入门HTML标签合集、 WebStorm快捷键)------初识HTML，基础标签、超链接

75 阅读 0 评论 50 点赞

我是靠谱客的博主诚心小蚂蚁，最近开发中收集的这篇文章主要介绍Web前端第二课(快速入门HTML标签合集、 WebStorm快捷键)Web前端第二课(入门HTML标签合集、 WebStorm快捷键)------初识HTML，基础标签、超链接，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Web前端第二课(入门HTML标签合集、 WebStorm快捷键)

------初识HTML，基础标签、超链接

1.HTML概述

HTML文件由标签语言组成

标签的组成：

1.<元素名 [属性名=“属性值”] …>元素内容</元素名>

如<a href="http://www.zjut.edu.cn/">浙江工业大学</a>就是超链接的语法，标签表示一个超链接，href是属性名指明链接的网址，一个完整的标签要有结束的</元素名>,效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-twEl3WWk-1615822550794)(C:Users86157Pictures截图屏幕截图 2021-03-14 200710.jpg)]

2.空元素标签

<元素名 [属性名=“属性值”] …/>

如插入一张图片

2.常见的标签整理

基本框架

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

`通用标签属性`

属性	值	描述
class	具体的名字	定义属于哪个类
id	具体的id	id是唯一的
title	文本	定义提示工具中显示的文本

注释

`<meta>`标签

http-equiv属性

设定网页缓冲区到期时间,格式如下

<meta http-equiv="expires" content="Fri, 5 Mar 2012 18:18:18 GMT">

GMT是格林尼治时间，北京时间要多8个小时

refresh属性

nrefresh用于刷新与跳转（重定向）页面。

<meta http-equiv="refresh" content="5;url=http://www.tsinghua.edu.cn/" />

其中content值5是指停留5秒钟后自动重定向到URL指定的网址。如果没有指定URL，则5秒钟后页面自动刷新。

name属性

name属性定义meta元信息名称，主要用于描述网页内容和网页相关信息，便于搜索机器人查找和分类。name主要使用的meta名称如下：

keywords：网页的关键字。

description：网页的内容描述。

author：网页的作者。

generator：网页使用的编辑器。

revised：网页修订信息。

如：

<meta name="robots" content="index,follow"/>
<meta name="description" content="HTML meta示例" />
<meta name="keywords" content="HTML,meta" />
<meta name=“author” content=“陆佳炜" />
<meta name="generator" content="JetBrains WebStorm 11.0.3" />

`<header>`标签

定义文档的页眉。通常用来放置整个页面或页面内的一个内容区块的标题。专门用来标识

可以包含heading元素

`<nav>`

定义导航栏

`<article>`

标识一篇文章

`<section>`

定义文档中的一节，标签定义文档中的节（区段）。比如章节、页眉、页脚或文档中的其他部分。

`<aside>`

可用作文章的侧栏或边栏。

`<footer>`

定义文档或节的页脚

页脚通常包含文档的建立日期、作者、版权信息、使用条款链接和联系信息等。可以在一个文档中使用多个

`<details>`

标识该元素内部子元素可以被展开、收缩显示的元素。元素具有一个布尔类型值的open属性，当open属性值为true时，元素内部的子元素被展开显示，当open属性值为false时，其内部的子元素被收缩起来不显示。open属性的默认值为false，当页面打开时其内部的子元素处于收缩状态。

<body>      <!--省略了其它代码-->
这里是细节
<details>
        隐藏
</details>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ig9dBHjw-1615822550796)(C:Users86157AppDataRoamingTyporatypora-user-imagesimage-20210314233609618.png)] 在这里插入图片描述

`<summary>`

可以为元素定义标题，标题是可见的，

如果元素内没有定义元素，浏览器会提供默认的文字显示，如“详细信息”。

目前只有Chrome和Safari6支持标签。

`<div>`

块元素，后面隐藏附带换行符

`<span>`

用来定义文档中一行的一部分，是行内元素，行内元素没有固定的宽度，根据元素的内容决定。元素的内容主要是文本。后一个span可以接着前面的span显示

基础标签

<h1>~<h6> 、<p> 、<br>、 不多赘述

会自动在h和p标签前后加换行

<hr> 水平线

<b> 粗体
<i> 斜体
<big> 大号字体
<small> 小号
<em> 强调
<cite> 引用

文本格式化标签

标签	描述
`<sub>`	下标文本
`<sup>`	上标文本
`<ins>`	插入文本
`<del>`	删除文本
`<wbr>`	定义在文本何处适合添加换行符（HTML5新标签）
`<pre>`	预格式文本

wbr:宽度过小不足以在行末书写完一个完整单词时，会将行末整个单词放到下一行，实现换行，如果在单词中间位置加入<wbr>标签时，就会拆分一个单词换行。（注意中文无效）

pre:<pre>用来定义预格式化文本，在<pre>标签内容中的文本通常会保留空格和换行符，显示为等宽字体。一个常见应用就是用来表示计算机的源代码

引用和术语定义标签

标签	描述
`<abbr>`	缩写
`<address>`	地址
`<bdo>`	文字方向
`<blockquote>`	长的引用语
`<q>`	短的引用语

<abbr>标签表示缩写，比如“IP”。建议在<abbr>标签中使用title属性，这样当鼠标指针移动到<abbr>元素上时会显示简称的完整信息。

<address>标签定义作者的联系信息。如果<address>元素位于<body>元素内，表示文档所有者的联系信息；如果<address>元素位于<article>元素内，表示作者文章的联系信息。<address>元素中的文本通常显示为斜体。

<bdo>通常与dir属性一起使用，可以做到反排效果。如：<bdo dir="rtl">浏览器</bdo>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xaCCg4sP-1615822550799)(C:Users86157AppDataRoamingTyporatypora-user-imagesimage-20210315215133348.png)]

<blockquote>和<q>标签定义引用，最好使用cite属性，cite属性规定引用的来源，属性值是URL。

<blockquote>在浏览器显示时会在左、右两边进行缩进（增加外边距）。<q>标签是用于简短的行内引用，在浏览器显示时会添加引号。

HTML5新增格式标签

标签	描述
`<mark>`	定义有记号的文本（HTML5新标签）
`<meter>`	定义预定义范围内的度量（HTML5新标签）
`<progress>`	定义任何类型的任务的进度（HTML5新标签）
`<rp>`	定义若浏览器不支持ruby元素显示的内容（HTML5新标签）
`<rt>`	定义ruby注释的解释（HTML5新标签）
`<ruby>`	定义ruby注释（HTML5新标签）
`<time>`	定义日期/时间（HTML5新标签）

<mark>标签定义带有记号的文本，表示页面中需要突出显示或高亮显示

<meter>元素表示规定范围内的数量值，称为gauge（尺度）。如磁盘用量、查询结果的相关性等。

属性	值	描述
value	number	必需，规定度量的当前值。在元素中表示实际值，该属性值默认为0
min	number	规定范围的最小值。指规定范围时允许使用的最小值，默认0，值不能小于0
max	number	规定范围的最大值。指定规定范围时允许使用的最大值，如果属性值小于min，那么把min属性值视为最大值。默认值1
low	number	规定被视作低的值的范围。规定范围的下限值，必须小于或者等于high的值,值低于low会用特殊样式进行区分
high	number	规定被视作高的值的范围。规定范围的上限值。如果属性值小于low，那么把low属性值视为high属性值，同样如果属性值大于max，那么把max属性值视为high值，值高于high会用特殊样式进行区分
optimum	number	规定范围的最优值。属性值必须在min属性值与max属性值之间，可以大于high属性值

示例：

<body>
<p>硬盘占用<meter value="80" max="100" min="0"></meter>GB</p>
<p>硬盘存储占用<meter value="80" max="100" min="0" low="20" high="70" optimum="60"></meter>GB</p>
<p>当前任务完成进度: <progress max="100" value="50"></progress></p>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AjcGQScQ-1615822550801)(C:Users86157AppDataRoamingTyporatypora-user-imagesimage-20210315221928999.png)]

列表

标签	描述
`<ol>`	有序列表
`<ul>`	无序列表
`<li>`	列表项
`<dl>`	定义列表
`<dt>`	定义列表项目
`<dd>`	定义列表项目描述

有序列表<ol>常用有二个可选属性，type用来规定列表里项目编号的类型，start规定起始的序号。

属性	值	描述
start	number	规定列表中的起始点
reversed	reversed	规定列表顺序为降序

示例：

<body>
<ol>
    <li>茶</li>
    <li>牛奶</li>
    <li>咖啡</li>
</ol>
<ol start="5" reversed>
    <li>茶</li>
    <li>牛奶</li>
    <li>咖啡</li>
</ol>

</body>

在这里插入图片描述

定义列表效果

<body>
<dl>
    <dt>茶</dt>
    <dd>中华传统饮品</dd>
    <dt>牛奶</dt>
    <dd>白色的冷饮料</dd>
</dl>
</body>

在这里插入图片描述

3.超链接

属性	值	描述
href	URL	连接目标URL
target	_blank _self	规定在何处打开链接文档。其中：_blank在新窗口中打开被链接文档。_self默认，在相同的窗口中打开被链接文档。

下面定义了指向清华大学的链接,点击后在新窗口打开：

<a href="http://www.tsinghua.edu.cn/" target="_blank">清华大学</a>

绝对路径和相对路径

绝对路径是包括通信协议名、服务器名、路径及文件名的完全路径。如连接清华大学信息科学技术学院首页，绝对路径是：“http://www.sist.tsinghua.edu.cn/docinfo/index.jsp”。如果站点之外的文档在本地计算机上，比如连接F盘book_store目录下default.html文件，那么它的路径就是：“file:///F:/book_store/default.html”，这种完整地描述文件位置的路径也是绝对路径。

相对路径包括根相对路径和文档相对路径两种，一般多用文档相对路径。

根相对路径的根是指本站点文件夹（根目录），根相对路径以“/”开头，路径是从当前站点的根目录开始计算。

注意： …/表示上一级文件夹

id属性，可以用来创建书签快速定位跳转

创建指向书签的连接需要两个步骤：

在需要的位置定义书签。

<a id="c12"></a>

在指定位置建立和书签的连接。

<a href="#c12">第12章</a>

在建立和书签连接时，href属性值书签名字前需加“#”号。

当点击第12章就会跳到，书签的位置

<a href="#">表示空链接，对于不确定的链接可以暂时使用空链接代替，等以后确定后在修改

最常用的字符实体

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`'`（IE不支持）	`'`

显示结果	描述	实体名称	实体编号
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	日圆	`¥`	`¥`
§	节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

4.WebStorm快捷键

注释 Ctrl+/

删除行 Ctrl+X

复制行 Ctrl+D

生成代码 Tab 特别好用

格式化代码 Ctrl+Alt+L

查找文本 Ctrl+F

重新开始下一行 Shift+Enter

最后

以上就是诚心小蚂蚁为你收集整理的Web前端第二课(快速入门HTML标签合集、 WebStorm快捷键)Web前端第二课(入门HTML标签合集、 WebStorm快捷键)------初识HTML，基础标签、超链接的全部内容，希望文章能够帮你解决Web前端第二课(快速入门HTML标签合集、 WebStorm快捷键)Web前端第二课(入门HTML标签合集、 WebStorm快捷键)------初识HTML，基础标签、超链接所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：Web前端开发
浏览次数：75 次浏览
发布日期：2023-10-19 10:30:39
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_26_f4_14_z_18_5.html

Web前端第二课(快速入门HTML标签合集、 WebStorm快捷键)Web前端第二课(入门HTML标签合集、 WebStorm快捷键)------初识HTML，基础标签、超链接

概述

Web前端第二课(入门HTML标签合集、 WebStorm快捷键)

------初识HTML，基础标签、超链接

1.HTML概述

2.常见的标签整理

基本框架

`通用标签属性`

注释

`<meta>`标签

`<header>`标签

`<nav>`

`<article>`

`<section>`

`<aside>`

`<footer>`

`<details>`

`<summary>`

`<div>`

`<span>`

基础标签

文本格式化标签

引用和术语定义标签

HTML5新增格式标签

列表

3.超链接

绝对路径和相对路径

id属性，可以用来创建书签快速定位跳转

4.WebStorm快捷键

最后

评论列表共有 0 条评论

发表评论取消回复

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`'`（IE不支持）	`'`

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`'`（IE不支持）	`'`

Web前端第二课(快速入门HTML标签合集、 WebStorm快捷键)Web前端第二课(入门HTML标签合集、 WebStorm快捷键)------初识HTML，基础标签、超链接

概述

Web前端第二课(入门HTML标签合集、 WebStorm快捷键)

------初识HTML，基础标签、超链接

1.HTML概述

2.常见的标签整理

基本框架

通用标签属性

注释

<meta>标签

<header>标签

<nav>

<article>

<section>

<aside>

<footer>

<details>

<summary>

<div>

<span>

基础标签

文本格式化标签

引用和术语定义标签

HTML5新增格式标签

列表

3.超链接

绝对路径和相对路径

id属性，可以用来创建书签快速定位跳转

4.WebStorm快捷键

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

`通用标签属性`

`<meta>`标签

`<header>`标签

`<nav>`

`<article>`

`<section>`

`<aside>`

`<footer>`

`<details>`

`<summary>`

`<div>`

`<span>`

发表评论取消回复

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`'`（IE不支持）	`'`