从零开始学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 里面。


三、特殊字符

特殊符号

字符代码

(空格)

&nbsp;

<

&lt;

>

&gt;

&

&amp;

¥

&yen;

©

&copy;

®

&reg;

×

&times;

÷

&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 里面相关知识点。

下次将讲解表格、表单等内容。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:自定义 C1WijMenu

C1Wijmo 全部的控件是完全可定制的,并且可以根据你自己的需求定制他们的界面外观。 我准备使用C1Menu演示这一点。 让我们从向控件应用自定义主题开始。 ...

1805
来自专栏九彩拼盘的叨叨叨

如何调试CSS动画

我们在做某个复杂的动画,或者多个元素同时做动画时,我们需要查看动画在某些时间点的元素的状态。此时动画应该是暂停的,这样方便我们进行查看。

643
来自专栏iOS开发随笔

iOS类似淘宝头条的文字滚动广告

最近两个项目都用到类似淘宝头条的功能,就是文字上下无限循环滚动,所以决定简单封装一下,以便以后使用。由于习惯用SDCycleScrollView来做广告图的无限...

5833
来自专栏非著名程序员

基础篇章:关于 React Native 之 Touchable 系列组件的讲解

【回复“1024”,送你一个特别推送】 ? (友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) ...

2079
来自专栏coding for love

CSS入门4-引入CSS

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

813
来自专栏技术博文

实用:Google Chrome 键盘快捷键大全

窗口和标签页快捷方式 Ctrl+N 打开新窗口 按住 Ctrl‎ 键,然后点击链接 在新标签页中打开链接 按住 Shift 键,然后点击链接 在新...

3018
来自专栏前端人人

React第三方组件1(路由管理之Router的使用④按需加载-上)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

3674
来自专栏HTML5学堂

CSS3 user-select 禁选文本

HTML5学堂:当我们在访问一个文章网站的时候,常常因为拖拽的时候误选文字,给我们的一种不好的用户体验,而我们可以用CSS3的user-select属性禁选文本...

3946
来自专栏张戈的专栏

WordPress导航菜单图标字体插件font awesome 4 menus纯代码版

换成 Begin 主题之后,大伙都不约而同的给菜单用上了图标字体,确实给博客带来了一定的美化效果。 与之配套的是 font awesome 4 menus 这个...

4385
来自专栏韩东吉的Unity杂货铺

零基础入门 23: UGUI ScrollView

今天要分享的内容,是近期内关于UGUI的最后一篇,UGUI里的滚动视图ScrollView,后期的内容会根据项目实用的功能组件进行分享。

3721

扫码关注云+社区

领取腾讯云代金券