HTML——1.Sublime快捷键、HTML常用标签

已于 2022-06-21 14:49:39 修改
阅读量1.5k 收藏 22
点赞数 3
分类专栏： 前端 文章标签： html5 html 前端 sublime
于 2022-04-25 19:42:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46279684/article/details/124402456
版权

目录

Sublime快捷键

页面骨架

浏览页面

选中多行

注释

生成标签

生成多个相同标签

父子级关系的标签

兄弟级关系的标签

生成带有类名或者id的div

生成有顺序的div类名

找到对应行

页面语言lang

字符集

排版标签

标题标签h

段落标签p

水平线标签hr

换行标签br

div和span标签

文本格式化标签

图像标签img

链接标签

注释标签

路径

相对路径

绝对路径

锚点定位

base标签

预格式化文本标签

特殊字符

Sublime快捷键

页面骨架

  • html:5 + Tab
  • ! + Tab

浏览页面

  • 直接在空白处，右键——在浏览器中打开

选中多行

  • 按住滚轮往下拉

注释

  • Ctrl + /（?）：把光标定在想要注释的语句上就行
  • Ctrl + shift + /：选中语句

生成标签

  • 标签名+Tab键

生成多个相同标签

  • 比如div*5

父子级关系的标签

  • 用> 例：ul>li + Tab键

兄弟级关系的标签

  • 用+ 例：div+p +Tab键

生成带有类名或者id的div

  • 用.类名+Tab键 / #id名+Tab键

生成有顺序的div类名

  • 用自增符号$ 例： .demo$*5

找到对应行

  • ctrl + g，输入数字，可以跳到对应的行

页面语言lang

<html lang="en"> 指定html语言种类

最常见的两个

  • en：英语
  • zh-CN：中文

字符集

字符集是多个字符的集合。计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。

<meta charset="UTF-8" />

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

  • GB2312：简单中文，包括6763个汉字 国标
  • BIG5：繁体中文，港澳台等用
  • GBK：包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312.
  • UTF-8：基本包含全世界所有国家需要用到的字符。
  • 这句代码是必须要写的，否则可能会引起乱码的情况。

排版标签

标签名定义
<hx></hx>标题标签
<p></p>段落标签
<hr />水平线标签
<br />换行标签
<div></div>div标签 
<span></span>span标签

标题标签h

作为标题使用，并且依据重要性递减

<h1> 标题文本 </h1>
<h2> 标题文本 </h2>
<h3> 标题文本 </h3>
<h4> 标题文本 </h4>
<h5> 标题文本 </h5>
<h6> 标题文本 </h6>

段落标签p

<p> 文本内容 </p>

水平线标签hr

<hr /> 这个是单标签

换行标签br

强制换行

<br />

br和p标签的换行区别

我爱喝奶茶<br>
我超爱喝奶茶<br>
    ------br标签
<p>我爱喝奶茶</p>
<p>我爱喝珍珠奶茶</p>
	------p标签

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lmw5aW26Iy255qE5bCP5a2p,size_4,color_FFFFFF,t_70,g_se,x_16

div和span标签

  • div标签：块级元素，相当于一个盒子，里面可以装很多标签，独占一行，可以改变宽度和高度
  • span标签：行内元素，在一行显示，不能改大小，只能放文本或者其他行内元素
<div>珍珠奶茶</div>
<div>芋泥奶茶</div>
<span>蛋黄酥</span>
<span>蛋挞</span>

d68b12f6436c4878baa0507bfc1fcb50.png

文本格式化标签

标签显示效果
<b></b>和<strong></strong>粗体
<i></i>和<em></em>斜体
<s></s>和<del></del>加删除线
<u></u>和<ins></ins>加下划线

图像标签img

<img src="图像URL" /> 单标签
属性属性值描述
srcURL图像的路径
alt文本图像不能显示时的替换文本
title文本鼠标悬停时显示的内容
width像素设置图像的宽度
height像素设置图像的高度
border数字设置图像边框的宽度

链接标签

<a href="目的地址" target="窗口弹出方式>文本或图像</a>
属性作用
href目的URL地址
target

页面打开方式

_self:默认值

_blank:在新窗口打开

如果页面还没有写好，可以用“#”代替

<a href="#">奶茶</a>

注释标签

<!-- 注释标签 -->

快捷键

  • Ctrl + /（?）：把光标定在想要注释的语句上就行
  • Ctrl + shift + /：选中语句

路径

相对路径

路径分类符号说明
同一级路径

在一个文件夹中

只输入图像名字就可以

<img src="img.jpg"/>
下一级路径"/"

图片放在和html同级的文件夹中

<img src="images/img.jpg" />

上一级路径

"../"

"../"意思是可以返回上一级

html文件放在和图片同级的文件夹中

<img src="../img.jpg" />
<img src="../../img.jpg" />
<!-- 返回两级 -->

绝对路径

  • 直接复制电脑里的路径就ok
  • 也可以直接复制网页里面图片的地址，网络地址

不提倡使用，换个电脑或者换个路径就不行

锚点定位

就像上面的目录一样，点击然后跳到相应的位置

步骤

  1. 将目标标签加上id
  2. 将要点击的那个加上a标签，href=“#id名”
<a href="#milk">找奶茶</a>
<h3 id="milk">奶茶在这里</h3>

base标签

设置所有链接的打开方式，要写在<head></head>里面，单标签

<head>
    <base target="_blank">
</head>
<body>
    <a href="#">奶茶</a>
    <a href="#">芋圆</a>
</body>

预格式化文本标签

<pre>文本</pre>

可以按照标签里面文本的格式进行展示，可以保留空格和换行等，就不用写换行和段落标签了，但不推荐，不好控制

特殊字符

特殊字符描述字符代码
空格符&nbsp;
<小于号&lt;
>大于号&gt;
&和号&amp;
￥人民币&yen;
©版权&copy;
®注册商标&reg;
°摄氏度&deg;
±正负号&plusmn;
×乘号&times;
÷除号&divide;
²平方2（上标2）&sup2;
³立方3（上标3）&sup3;
  • 前三个比较重要
  • 他们不是标签，以&开头；结尾
<p>我&nbsp;爱吃&nbsp;烤肉</p>

买奶茶的小孩
关注
  • 3
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML第一天——浏览器、Sublime、标签、特殊符号
Aiello001的博客
07-10 376
网页组成部分 文字，图片，超链接，音频，视频 常见浏览器 IE，火狐，谷歌，safari（苹果），Opera 浏览器内核　　　　作用：读取网页内容 IE：　Trident 火狐（Firefix）：　Gecko 苹果（safari）：　webkit 谷歌（chrome）/ Opera：　Blink 移动端　安卓：　webkit web标准 结构：HTML 样式：CSS 行为：JS 超文本标记语言 <html> <head> <title> </title&g
HTML5——HTML5新标签与特性
流楚丶格念的博客
07-15 4152
起风了兼容性问题文档类型设定字符设定常用新标签新增的input type属性值：常用新属性综合案例 兼容性问题 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTML5 sublime 输入 html:5 ！ 字符设定 ：HTML与XHTML中建议这样去写 ：HTML5的标签中建议这样去写 常用新标签 w3c 手册中文官网
sublime html注释,HTML第一天——浏览器、Sublime、标签、特殊符号
weixin_30117665的博客
06-21 255
网页组成部分文字，图片，超链接，音频，视频常见浏览器IE，火狐，谷歌，safari(苹果)，Opera浏览器内核　　　　作用：读取网页内容IE：　Trident火狐(Firefix)：　Gecko苹果(safari)：　webkit谷歌(chrome)/ Opera：　Blink移动端　安卓：　webkitweb标准结构：HTML样式：CSS行为：JS超文本标记语言标签标签分类：双标签，单标签标签...
学习了HTML，如何使用HTML快捷键？
iQOONeo8Pro的博客
05-28 287
`F5` 或 `Ctrl + F5`：在浏览器中刷新或强制刷新页面（具体取决于你是在编辑器中还是在浏览器中）。- `Ctrl + H` 或 `Ctrl + R`：查找并替换文本或代码（具体快捷键可能因编辑器而异）。- `Ctrl + Y` 或 `Ctrl + Shift + Z`：重做上一步被撤销的操作。- `Ctrl + D` 或 `Ctrl + Y`：复制当前行或选定的代码块并粘贴到下一行。- `Ctrl + W` 或 `Ctrl + F4`：关闭当前标签页或窗口。
HTML5学习笔记1——HTML5常用标签
emmm520的博客
08-13 195
HTML5学习笔记1——HTML5常用标签 HTML简介 HTML ：Hyper Text Markup Language(超文本标记语言) HTML是一种标记语言，而非编程语言，其实就是一套标记标签。 HTML不区分大小写 常用编辑器：vs code；sublime text3 HTML5常用标签1 HTML5常用标签1 html：html文件的根标签 head：头标签 body：内容标签 title：题目标签 h1~h6：标题标签 p：段落标签 hr：水平线标签 案例演示 在sublime
sublime补全java代码快捷键_（转）Sublime Text2 快捷键汇总
weixin_34580002的博客
03-01 1165
场景：最近在编写项目中越发的感觉到一个得心应手的编辑器是多么的重要，而sublime，无疑是让我用着最舒服，最有感觉的编辑器了！1 快捷键总结一个好的编辑器，能大大提高编程的效率。如果能熟知软件的快捷键，那更能让你得心印手。这些内容都是我网上和自己实际使用过程中所收集而来的，在网络上应该也算比较全面的了吧。欢迎大家补充，我也会在以后慢慢添加上来。插件使用方法：Ctrl+Shift+P 调用命令面板...
sublime2中写html,Sublime Text2中的快捷方式及html各种标签（待完善）
weixin_34547883的博客
05-31 482
快捷方式1.xhtml+tab2.自动补全标签Alt + . 补全标签标签1.段落标签 ，前后换行标题标签 h1最大，一级标题2. 水平线标签3.有序列表标签......如：4.无序列表标签......如：5.描述标签............如：6.表格7.分区标签8.图像标签9.范围标签:现实某行内的独特样式如：10.换行标签如：11.超链接连接到另一个页面：12.锚记标签(本页面很长时进...
Sublime Text3 入门级学习及常用快捷键总结
Silence-Lee的博客
07-04 777
膜拜各位大神，人家都总结的超级棒，这里只是做一个整理 1、插件管理Package Control安装 Package Control是Sublime Text3负责插件管理的插件，所以安装Package Control插件时安装其他插件的前提 2、插件Emmet的安装及Tab补全代码问题解决 Emmet是一款Web前端开发工具Sublime非常有用的插件，使用仿CSS选择器的语法来生成代码，大大提...
WEB标准&认识HTML&HTML常用标签
Driedmango的博客
04-03 934
typora-copy-images-to: media 第01阶段.web基础：html-day01笔记-01-前言&WEB标准&认识HTML&HTML常用标签 一、前言 1. 基础班学习目标 目标： 能根据psd文件（psd文件，其实就是一张类似于图片的格式，这个呢是用ps做的，也就叫做源文件）， 用HTML+CSS 布局出符合W3C规范的网页（也就是说，我们...
sublime快捷键.html
03-07
整理的很全面的Sublime快捷键。 有本文档在手，迅速查询操作键位。 有效提交开发效率。 文档小巧，不啰嗦，直接上干货。
Sublime Text设置新建标签语法为HTML.rar
07-09
使用方法：复制压缩包中的“DefaultLanguage.py”到“Sublime Text文件夹\Data\Packages\User”中，重启Sublime即可。Ctrl+N新建文档，默认即为HTML文件。 查阅了一些资料，自己整理的。 压缩包中包含参考文档，说...
sublime快捷键.txt
12-27
下面我们将根据提供的文档内容详细介绍 Sublime Text 的常用快捷键及其与 Emmet 插件的结合使用。 #### Emmet（原 ZenCoding）简介 Emmet 是一个前端开发者必备的工具，可以极大地提高 HTML 和 CSS 的编写效率。它...
sublime快速生成html模板、标签
01-08
一、设置快速生成模板 1、安装 Package Control ... ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.p
Preferences.sublime-settings:我的 SublimeText 配置文件
07-23
这个`Preferences.sublime-settings`文件通常位于`User`配置目录下，它是JSON格式的，包含了用户界面、字体与颜色方案、快捷键绑定、自动完成、语法高亮等众多设置。通过编辑这个文件，你可以调整如字体大小、主题、...
HTML5实现好看的天气预报网站源码
xcLeigh
07-18 1734
HTML5实现好看的天气预报网站源码，天气预报大作业，网站源码，天气预报网站，天气预报网站源码，这里可以灵活配置要显示的省市区的天气预报，这里用的是北京、上海、广州、深圳、台湾五个地区的天气预报。免费的数据接口，数据API，童话故事API，笑话API，名言API，提供免费天气预报接口，各种新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。兼容手机端和PC网页端。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 1007
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
Python爬虫技术 第13节 HTML和CSS选择器
最新发布
hummhumm的专栏
07-25 899
在爬虫技术中，解析和提取网页数据是核心部分。HTML 和 CSS 选择器被广泛用于定位网页中的特定元素。下面将详细介绍这些选择器如何在 Python 中使用，特别是在使用像 Beautiful Soup 或 Scrapy 这样的库时。
HTML入门指南：常用快捷键与基础结构
在本篇关于HTML的基础笔记中，我们首先探讨了HTML的基本概念和常用快捷键，这对于学习和实践Web开发至关重要。HTML，全称为Hypertext Markup Language，是一种用于创建网页的标准标记语言，它主要用于定义网页的结构...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值