从零开始学Web之HTML(二)标签、超链接、特殊符号、列表、音乐、滚动、head等
大家好,这里是 Daotin 从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!
一、标签
1、单标签
- 注释标签 :
<!-- 注释 -->
- 换行标签:
<br> 或 <br />
- 水平线标签:
<hr> 或 <hr />
2、双标签
- 段落标签:
<p></p>
特点:上下自动生成空白行。br 换行不会生成空白行。
- 标题标签:
<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>
h1 在一个页面里只能出现一次。(作用是:便于SEO 搜索引擎优化)
- 文本标签:
<font size="" color=""></font>
- 文本格式化标签
文本加粗 :<strong></strong> <b></b>
工作里尽量使用strong,对于盲人来说 strong有语义强调的功能。
文本倾斜:<em></em> <i></i> <!-- 工作里尽量使用em,原因同strong -->
删除线标签:<del></del> <s></s> <!--工作里尽量使用del -->
下划线标签:<ins></ins> <u></u> <!--工作里尽量ins-->
图片标签:<img src="" alt="" title=""width="" height="" >
src : 图片的来源(必写属性) alt : 替换文本 ,图片不显示的时候显示的文字(重要性:1.SEO优化 2.盲人阅读需求) title : 提示文本,鼠标放到图片上显示的文字 width : 图片宽度 height : 图片高度 PS:图片没有定义宽高的时候,图片按照百分之百比例显示,如果只更改图片的宽度或者高度,图片等比例缩放
二、超链接
<a href="" title="" target="">填写内容</a>
href :去往的路径、跳转的页面, 必写属性 title : 提示文本,鼠标放到链接上显示的文字 target=”self" (默认值),在自身页面打开(关闭自身页面,打开链接页面) Target=”blank” 打开新页面,(自身页面不关闭,打开一个新的链接页面) PS:当 href 的值为
javascript:void(0);
或javascript:;
,表示超链接不做任何事情,不做任何跳转。
1、锚链接
我们先搞清楚什么是锚链接:
锚链接也称锚点链接,命名锚点链接(也叫书签链接)常常用于那些内容庞大繁琐的网页,通过点击命名锚点,自动跳转到我们设置锚点的位置,类似于我们阅读书籍时的目录页码或章回提示。
锚点链接可以跳转到页面的任何位置。一般用于在页面下面的时候,点击回到最上面。锚点链接的名称可以随意取,只起到标记作用。
<p id="AAA">
</p>
...
<a href="#AAA"></a> // 超链接到锚点
2、空链
不知道链接到那个页面的时候,用空链
<a href="#">空链</a>
PS:空链相当于 #top,实际点击此链接的时候会跳转到页首的位置。
3、压缩文件下载
<a href="../../xxx.rar"></a>
PS:不推荐使用
4、超链接优化写法
<base target="_blank"> // 让所有的超链接都在新窗口打开
PS:写的位置在 head 里面。
三、特殊字符
特殊符号 |
字符代码 |
---|---|
(空格) |
|
< |
< |
> |
> |
& |
& |
¥ |
¥ |
© |
© |
® |
® |
× |
× |
÷ |
&devide; |
参考链接:HTML特殊字符编码对照表
四、列表
1、无序列表
<ul type="">
<li></li> <!-- 列表项 -->
<li></li>
<li></li>
......
</ul>
type="square"
:小方块type="disc"
: 实心小圆圈type="circle"
: 空心小圆圈
2、有序列表
<ol type="" start="">
<li></li> <!-- 列表项 -->
<li></li>
<li></li>
......
</ol>
type="1,a,A,i,I"
,type的值可以为1,a,A,i,Istart="3"
决定了开始的位置。
3、自定义列表
<dl>
<dt></dt> <!-- 小标题 -->
<dd></dd> <!-- 解释标题 -->
<dd></dd> <!-- 解释标题 -->
</dl>
五、音乐标签
<embed src="1.mp3" hidden="true"></embed>
hidden="true"
隐藏音乐标签
六、滚动标签
<marquee width="" height="" bgcolor="" behavior="" direction="" loop="">
</marquee>
width:宽度 height:高度 bgcolor:背景颜色 behavior:设置滚动的方式 alternate:在两端之间来回滚动 scroll:由一端滚动到另一端,会重复 slide:由一端滚动到另一端,不会重复 direction:设置滚动的方向 left | right | up | down loop:滚动次数(-1:一直滚动下去)
七、head里面相关知识
1、charset编码
<meta charset="UTF-8">
ASCII/ANSI/Unicode:英语 GBK :亚洲通用字符集 GB2312:中文简体 Big5 :台澳港繁体 UTF-8:世界通用字符集
2、name
2.1、关键字
<meta name="keywords" content="">
告诉搜索引擎你的站点的关键字。SEO优化使用
2.2、网页描述
<meta name="discription" content="">
告诉搜索引擎你的站点的主要内容。这个description是给SEO和用户看的。
2.3、作者
<meta name="author" content="名字">
告诉搜索引擎你的站点的制作者
2.4、文件检索
<meta name="robots" content="all | none | index | noindex | follow | nofollow">
有时候会有一些站点内容,不希望被 robots 抓取而公开。为了解决这个问题,robots 开发界提供了两个办法:一个是robots.txt,另一个是 robots meta 标签。 其中的属性说明如下: all:(默认)文件将被检索,且页面上的链接可以被查询; none:文件将不被检索,且页面上的链接不可以被查询; index:文件将被检索; follow:页面上的链接可以被查询; noindex:文件将不被检索,但页面上的链接可以被查询; nofollow:文件将不被检索,页面上的链接可以被查询。
3、http-equiv 网页重定向
<meta http-equiv="reflesh" content="5; http://www.google.com">
网页自动跳转:网页5秒后自动跳转到谷歌主页
4、链接外部样式表
<link rel="stylesheet" type="text/css" href="1.css">
rel="stylesheet"
:链接的是什么?样式表还是图标type="text/css" type="text/css"
:规定链接文件的MIME类型,就是说链接文件时css还是jshref="1.css"
:链接的文件路径
5、设置 icon 图标
<link rel="icon" href="1.ico">
八、小结
今天将的内容是:标签、超链接、特殊符号、列表、音乐标签、滚动标签、和 head 里面相关知识点。
下次将讲解表格、表单等内容。
- HDU 2639 Bone Collector II(01背包变形【第K大最优解】)
- 专知内容生产基石-数据爬取采集利器WebCollector 介绍
- python实现字符串模糊匹配
- 动态规划之01背包详解【解题报告】
- hihoCoder #1078 : 线段树的区间修改(线段树区间更新板子题)
- HDU 2546 饭卡(01背包裸题)
- 漫谈文件系统
- AI知识搜索利器:基于ElasticSearch构建专知实时高性能搜索系统
- 【深度干货】专知主题链路知识推荐#5-机器学习中似懂非懂的马尔科夫链蒙特卡洛采样(MCMC)入门教程01
- hihoCoder #1043 : 完全背包(板子题)
- 【深度干货】专知主题链路知识推荐#7-机器学习中似懂非懂的马尔科夫链蒙特卡洛采样(MCMC)入门教程02
- hihoCoder #1038 : 01背包(板子题)
- 最小二乘法多项式曲线拟合原理与实现
- HDU 1166 敌兵布阵(线段树单点更新,板子题)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 虚拟机字节码执行引擎,JVM的马达图,是爱情呀
- 微信小程序【浅提WXSS样式】
- Kubernetes Liveness and Readiness Probes
- Magicodes.IE 2.3重磅发布——.NET Core开源导入导出库
- pytest文档59-运行未提交git的用例(pytest-picked)
- pytest文档57-单元测试代码覆盖率(pytest-cov)
- pytest文档58-随机执行测试用例(pytest-random-order)
- Kubernetes探针踩坑记
- 大揭秘| 我司项目组Gitlab Flow && DevOps流程
- 离线安装Superset 0.37(截图详细版)
- 如何高速转储、索引和第7层网络流量过滤?
- 爬虫 | JS逆向某验滑动加密(二)
- 闲聊 Kotlin-Native (0) - 我们为什么应该关注一下 Kotlin Native?
- 哈佛大学单细胞课程|笔记汇总 (五)
- 通过源码理解IGMP v1的实现(基于linux1.2.13)