标签

常用标签

Html标签:

作用所有html中标签的一个根节点。

Head标签:

作用:用于存放:

title,meta,base,style,script,link

注意:每个head标签中都必须有一个有title标签,其它的可选。

Body标签:

作用:用于存放所有的html的结构标签:

p,h,a,b,u,i,s,em,del,ins,strong,ul,li,ol,

Title标签:

作用:让页面拥有一个属于自己的标题。

meta 标签:

常用用法:

1.Description:可以描述页面,可以用来使用百度程序(网络爬虫)来收录关键信息,以此提高页面的排名。

2.Keywords:关键词,可以用来提高页面的关健词的比重(前升排名的一种方式)

3.字符集(编码格式):charset

gbk,utf-8之间的区别:

相同点:都是字符的编码格式。

区别:

utf-8:收录是全世界所有的语言中的文字。

gbk:收录了汉字,片假名。

大小:

utf-8>gbk

性能:

uft-8

约定:将来我们在整个学习过程中都用utf-8;

utf-8存储一个汉字占3个字节,

gbk存储一个汉字上2个字节

标签的分类:

双标签:有开始有结束,开始和结束之间是存在内容

单标签:只有一个标签,自己闭合自己

标签与标签之间的关系:

嵌套关系:一个标签包含另外一个标签,他们之间构造父子关系。

并列关系:两个标签并列,他们构造兄弟关系。

注意:将来在书写代码的时候如果两个标签之间的关系是嵌套关系,最好通过代码直接反映出来(子元素相对于父元素有一个缩进)。如果是并列关系,最好要有对齐。

h系列的标签(Header):h1,h2,h3,h4,h5,h6

作用:把页面上的文字加上标题的语义。

h1,h2,h3,h4,h5,h6:将文字放大,加粗.并且逐渐变小。(h1标签是最大的。)

p标签(Paragraph):段落标签

作用:给页面的上一段文字加上段落的说语义

在footer的时候可以的

hr标签

作用:在页面显示一条横线

br标签

作用:换行

b u i s(没有语义)  strong ins em del

作用:

b:加粗

u: 下划线

i:  倾斜

s: 删除线

建议在含有语义化情景时尽量不要使用,因为这些标签没有语义。

有语义

strong:加粗

ins:下划线

em:倾斜

del:删除线

Img标签

作用:在页面显示一张图片

属性1:src  图片显示的路径

属性2: alt 如果图片加载不出来会显示这个属性中的文字

属性3:介绍这张图片

a标签(锚)

作用:可以在一个页面跳转到另一个页面。注意:在a标签之内必须要写上文字,如果没有,那么这个标签在页面上找不到。

1.可以跳转到另外的页面。

2.可以不跳转(跳转到当前页面)href=”#”

3.可以在当前页面进行定位。     

 A.设置a标签的href属性为“#id名”

 B.在页面的指定位置加入一个目标标签(可以是任意标签)     

 C.必须给这个标签设置一个id名:

4.在一个页面跳转到指定的页面的指定的位置。

a标签的其它属性

1.href  a标签跳转的目标地址

2.target 

 _blank:保留原始页面,再进行跳转

_self:在当前页面进行跳转

3.base 

为页面上所有的a标签设置跳转的方式(base标签一般放在titile标签下面)

路径问题:

第一种:绝对路径

带有盘符的路径:C:\上课内容\01html第一天\4-源代码\1.jpg.

第二种:相对路径

由页面是一个文件,图片 也是一个文件,而现在需要在页面上输出图片,所以需要得到图片相对于文件的路径.

a.如果页面与图片在同一目录下面:

<img src="1.jpg" >

b.如果页面在图片一上级目录:

<img src="img/1.jpg">

c.如果图片在页面的上一级目录:

<img src="../img/1.jpg">

问题:那么将来我们在实际开发中到底是用绝对路径,还是用相对路径??

只要不出意外情况都是用相对路径:因为相对路径的可移植性要强。

无序列表 ul li

有序列表 ol

自定义列表 dl dt dd

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏24K纯开源

ChartDirector应用笔记(三)

前言 继上篇文章(Simple bar chart)推出之后,本篇文章继续ChartDirector的使用。在这篇Blog中,博主实现的是soft lighti...

22910
来自专栏非著名程序员

Android学习第六弹之 Android字体大小自适应不同分辨率的方法

Android字体大小自适应不同分辨率 非著名程序员 今天有人问我,android系统不同分辨率,不同大小的手机,字体大小怎么去适应呢?其实字体的适应和图片的适...

20610
来自专栏Python小屋

Python以字符形式打印双色图片中的文字

本文代码功能:假设有一白色背景的图片内含非白色姓名,代码读取图片像素信息,用很多星号来打印该姓名。 from PIL import Image def prin...

2564
来自专栏知道一点点

【原创】bootstrap框架的学习 第七课 -[bootstrap表格]

<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的表格</title> <link hr...

1162
来自专栏我和未来有约会

Silverlight初级教程-动画

Silverlight初级教程 动画 在这一节里将要用到在“认识工作区”中提到的时间抽了。这里将和学习flash的过程一样做一个最简单的动画。 ...

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

零基础入门 10: 编辑器下的UGUI Image

Image组件是Unity里显示图片的组件,可以将Sprite类型的图片显示在Canvas下。

1221
来自专栏编程

前端基础-CSS-2

上篇我们介绍了css的的由来和编写语法,并展示了一个基本的例子,这篇继续向大家展示一些例子来说明如何使用css来美化我们的页面展示,css包含非常多的样式设置,...

1986
来自专栏cnblogs

bootstrap源码分析之form、navbar

一、表单(Form) 源码文件: _form.scss mixins/_form.scss 1、按层次结构分:form-group -> form-contr...

2297
来自专栏猛牛哥的博客

快手( AAuto Quicker ) v6.5.06更新记录

1313
来自专栏Google Dart

AngularDart Material Design 切换 顶

用户可以点击切换按钮来更改状态。 通常,当您有一个ON / OFF选项时,您可以使用切换按钮。 如果您要一组中的多个选项中选中/取消选中,请改用material...

772

扫码关注云+社区

领取腾讯云代金券