前端二

最新推荐文章于 2024-08-11 02:49:42 发布
最新推荐文章于 2024-08-11 02:49:42 发布
阅读量79 收藏
点赞数
分类专栏： 前端 html 前端自学 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ultramanWJM/article/details/115463123
版权
前端 同时被 3 个专栏收录
2 篇文章 0 订阅
订阅专栏
html
2 篇文章 0 订阅
订阅专栏
前端自学
2 篇文章 0 订阅
订阅专栏
本文介绍了如何利用VSCode工具快速生成HTML的常用标签，包括DOCTYPE声明、lang和charset设置，以及从

到的各种标签详解。重点讲解了如何通过工具自动生成代码，提升开发效率。

摘要由CSDN通过智能技术生成

title: 前端二
author: Jamal
data: 2021-4-5 23:33:00

文章目录

前端 --------- Day2

VSCode 工具生成骨架标签新增代码(自动生成)

1. <!DOCTYPE> 标签

文档类型声明，作用告诉浏览器使用哪种html版本来显示网页。

Tips:

  • <!DOCTYPE>声明位于文档中最前面的位置，处于<html>标签之前。

  • <!DOCTYPE>不是一个HTML标签，他就是文档类型声明标签。

2. lang 语言

即 language，定义当前文档显示的语言。

  • en为英语
  • zh-CN为中文
  • fr为法语

3，charset 字符集

Character set是多个字符的集合，以便计算机能够识别和存储各种文字。

在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。

<meta charset = "UTF-8" />

charset常用的值有: GB2312, BIG5, GBK 和 UTF-8, 其中UTF-8被称为万国码，基本包含全世界所有国家需要用到的字符。

HTML常用标签

1. 标题标签 <h1> ~ <h6>

<h1> 我是一级标题 </h1>

依重要性递减。字体变粗

2. 段落

<p> 我是一个段落标签 </p>

特点：

  • 文本在一个段落中会根据浏览器窗口的大小自动换行

  • 段落与段落之间有空隙

3. 强制换行标签

<br />

特点：

  • 单标签
  • 换行的行与原来的行没有空隙。

4. 文本格式化标签

粗体 斜体 下划线

语义标签说明
加粗<strong></strong> or <b></b>推荐strong
倾斜<em></em> or <i></i>推荐em
删除线<del></del> or <s></s>推荐del
下划线<ins></ins> or <u></u>推荐ins

5. <div>和<span>标签

他们是没有语义的，像是一个盒子，用来装内容。

<div>这是头部</div>
<span>今日价格</span>

divison 表分割，分区

span 表跨度，跨距

特点：

  • <div>标签用来布局，但是在一行中只能放一个<div>，大盒子
  • <span>标签用来布局，一行上可以使用多个<div>,小盒子

6. 图像标签与路径

6.1 图像标签
<img src = "图像URL" />

src是<img>标签的必须属性，用于指定图像文件的路径和文件名。

其他属性：

属性属性值说明
src图片路径必须属性
alt文本替换文本。图片不能显示即出现该文字
title文本提示文本，鼠标放到图像上，显示的文字
width像素设置图像的宽度
height像素设置图像的高度
border像素设置图像的边框粗细
6.2 路径

相对路径

相对路径分类符号说明
同一级路径图像文件位于HTML文件的同一级，如<img src = “baidu.gif” />
下一级路径/图像文件位于HTML文件的下一级，如<img src = “images/baidu.gif” />
上一级路径…/图像文件位于HTML文件的上一级，如<img src = “…/baidu.gif” />

绝对路径

注意: 绝对路径的斜杠是 \

​ 相对路径的斜杠是 /

7. 超链接标签

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

anchor   锚

属性作用
href用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，他就有了超链接的功能
target用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式
7.2 链接分类
  • 外部链接
<a href = "http://www.baidu.com" >百度</a>
  • 内部链接
  • 空链接
<a href = "#">空链接</a>
  • 下载链接

地址链接的是文件 .exe 或者是 zip 等压缩包形式

<a href = "XXXX.zip">下载文件</a>
  • 网页元素链接
<a href = "http://baidu.com"><img src = "img.jpg" /></a>

  • 锚点链接

    点击后快速定位到页面中的某个位置。

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

8. 注释与特殊字符

8.1 注释
<!-- 注释语句 -->
8.2 特殊字符

lor = red>#名字 的形式，如 <a href = “#two”>第二集</a>

  • 找到目标位置标签，里面添加一个id属性 = 刚才的名字，如 <h3 id = “two”>第二集简介</h3>

8. 注释与特殊字符

8.1 注释
<!-- 注释语句 -->
8.2 特殊字符
ultramanWJM
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端sm2国密加密解密
sghu8023的博客
03-28 2438
sm2国密 sm-crypto
前端
liang12yu的博客
08-25 109
uni app 轮博图，点击图片跳转页面 ** <swiper indicator-dots 是否添加圆点指示器 circular 是否可以循环滑动 autoplay 自动轮播 interval=3000 轮播间隔 @change=改变回调(e){event.detail.current 可获取当前轮播索引} 轮播的数据 在这里插入代码片 <template> <view class="content"> <view class='home'>
前端处理二进制流文件导出为excel表
热门推荐
刘优秀的博客
07-06 1万+
将后端返回的二进制流文件 导出为excel表
前端技术栈
One__buyaomanggu的博客
03-04 2576
这种架构的核心在于提供一种快速、有效的方式，以构建可用、灵活、可扩展的web应用程序和服务。渐进式框架通过将开发过程拆分为灵活的模块、完成的业务流程和灵活的界面设计、实现高效的管理和快速开发。以上技术栈涵盖了前端开发的主要方面，包括框架、工程化工具、小程序开发、自动化测试以及HTML、CSS、JavaScript等基础数据。6.HTML：网页的基础，所有前端技术都是基于HTML的，需要掌握HTML、CSS、JavaScript基础。前端技术栈是指在软件的开发过程中，用于构建用户界面的一组技术工具和框架。
前端知识点二
huanhuan_Coder的博客
04-20 320
状态码 http://www.runoob.com/http/http-status-codes.html https://blog.csdn.net/qq_35689573/article/details/82120851 web storage有以下几种对象： sessionStorage：存储特定于某个会话的数据，该数据只保留到浏览器关闭。 globalStorage：目的是跨越会话...
HA 前端二次开发 翻译文件
06-24
HA（可能是某个特定的前端框架或项目的简称）的前端二次开发是指对原有的HA项目进行定制化修改、功能增强或者优化用户体验的过程。在这个场景中，“翻译文件”是关键点，意味着开发团队需要为HA项目提供多语言支持，...
前端二维矩形旋转拉伸实例
06-26
解决旋转后的矩形拉伸变化不受控制问题 二维旋转矩阵与向量旋转实际应用 矩形单边拉伸的实际案例。 代码精简方便易懂，复杂成分已去除。 html格式双击浏览器运行即可。
前端项目源码 前端项目源码 前端项目源码
01-12
2. **前端项目结构**：一个标准的Vue.js项目通常包含`src`目录，其中包含`main.js`（入口文件）、`App.vue`（应用主组件）、`components`（组件目录）以及`router`（路由配置）等子目录。此外，还有`public`目录，...
前端测试报告1
08-03
**2. 测试用例设计** 测试用例主要集中在前端功能，如登录和注册。登录测试关注用户ID（userid）和用户密码（userword）的验证，而注册测试则涵盖了电子邮件（email）、性别选择（sex）、电话号码（phone）、用户名...
前端前端前端前端前端前端前端前端前端前端前端
05-10
2. **JSX语法**：React引入了一种名为JSX的语法糖，它允许开发者在JavaScript代码中混写HTML。JSX使得编写UI组件更为直观，同时保持了JavaScript的灵活性。 3. **组件化开发**：React的核心是组件。每个组件都是一...
HTML实现弹出层
业精于勤荒于嬉，行成于思毁于随
08-11 506
位置。并排显示：某度上的图片代码：6.3.弹出层.html。
HTML - 简易版打字练习
Lushengshi的博客
08-09 787
纯html实现打字软件练习效果
Html实现全国省市区三级联动
qq_36973384的博客
08-02 658
关键技术：SpringBoot、Html、Jquery、js、ajax在网上找到的资料都比较乱，对于初学者来说，可能不太友好。以前，我刚开始学习Html的时候，也搞不清楚这个要怎么做，找了好久的资料都没法实现，就算是实现了，也没有完整的教程，现在实现了，整理好了，就想分享一下给每一位热爱编程的小伙伴。
Vue中的高频内置指令：v-text、v-html、v-cloak、v-once、v-pre
PleaSure乐事的博客
08-11 911
Vue——v-text、v-html、v-cloak、v-once、v-pre指令
前端（HTML + CSS）小兔鲜儿项目（仿）
li3123537691的博客
08-09 651
这是一个简单的商城网站，代码部分为HTML + CSS 和少量JS代码。
Source Insight 4.0.zip
08-14
Source Insight 4.0.zip
基础会计教学课件第四章账户与复式记账.pptx
最新发布
08-14
基础会计教学课件第四章账户与复式记账.pptx
L型热电偶和U型热电偶电压温度双向转换器
08-14
L型热电偶和U型热电偶电压温度双向转换器
apache-tomcat-9.0.93安装包（含windows和linux版本）.zip
08-14
apache-tomcat-9.0.93安装包（含windows和linux版本）.zip包含如下内容： apache-tomcat-9.0.93-windows-x64.zip； apache-tomcat-9.0.93-windows-x86.zip； apache-tomcat-9.0.93.exe； apache-tomcat-9.0.93.tar.gz； apache-tomcat-9.0.93.zip；
onlyoffice前端二次开发指南
03-27
OnlyOffice是一款功能强大的开源办公套件，它提供了文档编辑、协作和管理等多种功能。如果你想进行OnlyOffice前端二次开发，以下是一些指南和步骤： 1. 了解OnlyOffice前端技术栈：OnlyOffice前端主要使用了HTML、CSS和JavaScript等技术。熟悉这些技术是进行OnlyOffice前端开发的基础。 2. 学习OnlyOffice前端框架：OnlyOffice前端使用了Vue.js作为主要的开发框架。掌握Vue.js的基本概念和用法，可以帮助你更好地理解和开发OnlyOffice前端。 3. 阅读OnlyOffice前端文档：OnlyOffice提供了详细的前端开发文档，包括API文档、组件文档和示例代码等。仔细阅读这些文档可以帮助你了解OnlyOffice前端的各个方面，并且可以参考示例代码进行实践。 4. 参与OnlyOffice社区：OnlyOffice有一个活跃的开发者社区，你可以加入其中，与其他开发者交流经验、提问问题和分享自己的成果。社区中有很多有经验的开发者可以给予你指导和帮助。 5. 开始二次开发：在掌握了基本的OnlyOffice前端知识后，你可以开始进行二次开发了。根据你的需求，可以修改现有的组件、添加新的功能或者定制化界面等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值