从零开始学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,I
start="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还是js
href="1.css"
:链接的文件路径
5、设置 icon 图标
<link rel="icon" href="1.ico">
八、小结
今天将的内容是:标签、超链接、特殊符号、列表、音乐标签、滚动标签、和 head 里面相关知识点。
下次将讲解表格、表单等内容。
从零开始学Web之HTML(二)标签、超链接、特殊符号、列表、音乐、滚动、head等的更多相关文章
- 从零开始学 Web 之 CSS(二)文本、标签、特性
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 DOM(二)对样式的操作,获取元素的方式
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 CSS(四)CSS初始化、定位、overflow、标签规范
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 DOM(一)DOM的概念,对标签操作
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 BOM(二)定时器
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 HTML5(二)表单,多媒体新增内容,新增获取操作元素,自定义属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 Vue.js(二)过滤器,按键修饰符,自定义指令
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 JS 高级(二)原型链,原型的继承
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- linux设备驱动程序--类class的实现
#include <linux/module.h> #include <linux/fs.h> #include <linux/sched.h> #include ...
- 关于STM32的延时问题
最近一直在搞一辆智能小车,用STM32单片机驱动,往上面加了很多外设,外型如下: 今天下午打算在LCD显示一个温度,却发现怎么都显示不了,也找不出原因,还好我们公司的郑工帮我看出了问题,让我顺利改过来 ...
- 快递单号查询免费api接口(PHP示例)
快递单号查询API,可以对接顺丰快递查询,邮政快递查询,中通快递查询等.这些快递物流企业,提供了快递单号自动识别接口,快递单号查询接口等快递物流服务.对于电商企业,ERP服务企业,集成此接口到自己的软 ...
- Mongodb3.6 基操命令(二)——如何使用help
前言 在上一篇文章Mongodb3.6 快速入门(一)中,我们主要使用两个命令: 1.mongod #启动服务 2.mongo #连接mongodb 对于刚接触mongo的人来说,该怎么给命令传递参数 ...
- Ruby中如何复制对象 (deep clone)(转载)
Ruby中如何复制对象 (deep clone) 用Ruby复制一个对象(object)也许没有你想像的那么容易. 今天我google了半天, 做个总结吧. 先从最简单的开始, b = a 是复制吗? ...
- Java开源生鲜电商平台-商品表的设计(源码可下载)
Java开源生鲜电商平台-商品表的设计(源码可下载) 任何一个电商,无论是B2C还是B2B的电商,商品表的设计关系到整个系统架构的核心. 1. 商品基本信息表:用单词:goods做为商品表 2. 商品 ...
- Java Collections类
集合类是什么? List列表.Set集合.Map映射.工具类(Iterator迭代器.Enumeration枚举类.Arrays和Collections). Set 接口继承 Collection,但 ...
- CSS 静态进度条效果
今天学习到了实现一个静态进度条的方法,固写一篇笔记稳固一下自己的知识. 最终的效果如下,进度条放在一个框里,水平宽自适应. 现在就开始,首先写一个进度条先. .progress-bar{ /* 进度条 ...
- Spring4托管Hibernate5并利用HibernateTemplate进行数据库操作
时隔半年,再次发布配置类的相关Blog,因为左手受伤原因先做一个简述. 首先利用idea创建一个Spring+SpringMVC+Hibernate项目,注意的是因为我们要完全放弃Hibernate以 ...
- C# 中Datatime类用法总结
C# 中Datatime类用法总结 收集了一些记录下来,这些有的是从网上找的,有些是自己使用到的: DateTime dt = DateTime.Now; dt.ToString();//2005-1 ...