整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

前端之html_day01

  • tml的主体结构

  • 标签的分类

  • 标签的关系

  • sublime快捷键

  • 单标签

  • 双标签

  • 路径

  • 超链接额外知识运用

    • 锚点

    • 空连接

    • 超链接的优化写法 写在head标签中

  • 特殊标记符

  • 列表


Html的主体结构

<!doctype html><html><head>

标签的分类

单标签

<!doctype html>

双标签

<head></head>

标签的关系

包含(嵌套关系、父子关系)

<head>

并列

<head></head><body></body>

sublime快捷键

快捷键作用
html:xt + tabhtml4.01模板【新版本可能失效】
html + tabhtml5模板
tab补全标签
ctrl + shift + d快速复制一行
ctrl + shift + k快速删除一行
ctrl + 鼠标左键单击集体输入
ctrl + h查找替换
ctrl + f查找
ctrl + /注释
ctrl + L快速选中当前行
ctrl + shift + ↑(↓)代码的快速上移和下移

单标签

<!-- --> 注释标签<br /> 换行标签<hr /> 水平线标签<img src="logo.gif" alt="logo" title="这是淘宝的logo" width="200" height="100" />图片标签

双标签

<p></p> 段落标签<h1></h1> 标题标签 h1 - h6<font></font> 文本标签<strong></strong> 文本加粗标签,有语音加强<b></b> 文本加粗标签<em></em> 文字倾斜,有语音加强<i></i> 文字倾斜<del></del> 删除线,有语音加强<s></s> 删除线<ins></ins> 下划线,有语音加强<u></u> 下划线<a href="http://www.baidu.com" title="百度" target="_blank">百度</a> 超链接

路径

相对路径

同一个目录下直接写文件的名称就可以

文件和图片在下一级目录中,需要文件夹名称 + \ + 文件名称

图片在上一级目录中 ../ + 文件名称

图片在上一级的其它文件夹中 ../ + 文件夹名称 + 文件名称

总结:找到下级目录使用/,找到上一级目录使用../

绝对路径

从盘符中开始的,这种路径不能使用!因为项目最后都要移动,文件的路径都是会变的。如:c:\baidu\logo.jpg

超链接额外知识运用

锚点

1.设置一个锚点 设置一个id

<div id="top"></div>

2.超链接到锚点

<a href="#top"></a>

空连接

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

超链接的优化写法 写在head标签中

<base targer="_blank">

让所有的超链接都是从新窗口中打开

特殊标记符

空格&nbsp;
<&lt;
>&gt;
©&copy;

更多信息请查阅

列表

无序列表

<ul type="disc">

类型:disc 默认小黑点 circle 空心小圆点 square 小方块

有序列表

<ol type="A" start="C">

类型:a A 字母顺序 i I罗马顺序 1数字 start 表示开始的位置

自定义列表

<dl>

用场景

首先我们要明白,为什么需要使用自定义tab栏
大家首先看一下uniapp关于原生tab跳转的api文档
https://uniapp.dcloud.net.cn/api/router.html#switchtab
大家可以清楚的看到,switchTab和navigateTo的差异为url后面是否可以携带参数
当我们在做一个简单的uniapp项目时,可能tab之间的切换,或者从其他页面前往tab页面的时候,不需要携带参数。但是,一旦我们需要携带参数跳转到tab页面的时候,原生的tab页面无法实现参数的携带。这个时候,我们就需要去构建一个通用的tab组件去实现它的跳转。并且,原生tab栏不支持你在上面做太多的样式拓展

缺点

在使用原生tab时,你会发现,tab之间的互相切换,并不会重新渲染页面。页面上的onload方法也不会再次被执行,切换的时候非常的丝滑。但如果你是用自定义tab栏时,你会发现,如果你使用navigateTo去完成tab页面的跳转,会造成页面栈的堆叠。

代码示例

哈喽大家好,我是公众号作者“未来”,本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦!


第一阶段 HTML5

04 HTML常用标签

1 什么是标签及其分类

在HTML页面中,带有“< >”符号的元素被称为HTML标签,<html>、<head>、<body>都是HTML标签。所谓标签就是放在”<>”标签符中表示某个功能的编码命令,也称为HTML标签或HTML元素。

1.双标签: <标签名>内容<标签名>

2.单标签: <标签名/>(数量非常少)

单标签也称空标签,是指用一个标签符号即可完整地描述某个功能的标签。