大家好,这里是 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还是jshref="1.css"
:链接的文件路径
5、设置 icon 图标
<link rel="icon" href="1.ico">
八、小结
今天将的内容是:标签、超链接、特殊符号、列表、音乐标签、滚动标签、和 head 里面相关知识点。
下次将讲解表格、表单等内容。