发表于: 2018-07-26 21:55:38

1 520


今天完成的事情:

学习了body中的一些标签

1.排版标签

1.1注释标签

<!-- 注释  -->

1.2段落标签<p>--是paragraph“段落”缩写。

属性:align="属性值":对齐方式。属性值包括left center right。

1.3块级标签 <div>和<span>--div的语义是division“分割”; span的语义就是span“范围、跨度”。

div标签的属性:align="属性值":设置块儿的位置。属性值可选择:left、right、 center。

这是两个很重要的盒子,<span>是不换行的,而<div>是换行的。

span里面是放置小元素的

div里面放置大东西的。这种模式叫做“div+css”。div标签负责布局,负责结构,负责分块。css负责样式。

1.4换行标签<br>(已废弃)

1.5水平线标签<hr>(已废弃)

1.6内容居中标签 <center>(到了H5里面,center标签不建议使用。)

此时center代表是一个标签,而不是一个属性值了。只要是在这个标签里面的内容,都会居于浏览器的中间。

1.7预定义(预格式化)标签:<pre>真正排网页过程中,<pre>标签几乎用不着。但在PHP中用于打印一个数组时使用。

含义:将保留其中的所有的空白字符(空格、换行符),原封不动的输出结果(告诉浏览器不要忽略空格和空行)

2.字体标签

2.1标题<h1>至<h6>标签

<h1>定义最大的标题,<h6>定义最小的标题。具有align属性,属性值可以是:left、center、right。

2.2字体标签<font>(已废弃)

属性:

color="红色"或color="#ff00cc"或color="new rgb(0,0,255)":设置字体颜色。

size:设置字体大小。 取值范围只能是:1至7。

face="微软雅黑":设置字体类型。注意在写字体时,“微软雅黑”这个字不能写错。

举例:

<font face="微软雅黑" color="#FF0000" size="10">vae</font>

2.3特殊字符(转义字符)

&nbsp;:空格 (non-breaking spacing,不断打空格)

&lt;:小于号(less than)

&gt;:大于号(greater than)

&amp;:符号&

&quot;:双引号

&apos;:单引号

&copy;:版权©

&trade;:商标™

&yen;:        人民币

&reg;:注册商标®

&deg;:摄氏度°

&plusmn;:正负号±

&times;:乘号×

&divide;:除号÷

&sup2;:平方2(上标2)²

&sup3;:立方3(上标3)³

举个例子:如果把<p>作为一个文本在页面上显示,直接写<p>是肯定不行的,因为这代表的是一个段落标签,所以这里需要用到转义字符。应该这么写:这是一个HTML语言的&lt;p&gt;标签

2.4粗体标签<b>或<strong>(已废弃)

2.5下划线标记 <u> 中划线标记<s>(已废弃)

2.6斜体标记 <i>或<em>(已废弃)

2.7上标<sup> 下标<sub>

3.超链接<a>

3.1<a href=""></a>

a是英语anchor“锚”的意思,就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。

href是英语hypertext reference超文本地址的缩写。

属性:

href:目标URL

title:悬停文本。

name:主要用于设置一个锚点的名称。

target:告诉浏览器用什么方式来打开目标页面。target属性有以下几个值:

_self:在同一个网页中显示(默认值)

_blank:在新的窗口中打开。

_parent:在父窗口中显示

_top:在顶级窗口中显示

3.2外部链接:链接到外部文件。

举个例子: <a href="http://www.baidu.com" target="_blank">点我点我</a>

3.3锚链接:指给超链接起一个名字,作用是在本页面或者其他页面的的不同位置进行跳转。

4.图片标签<img src="" alt="">--img 是image“图片”的简写,src 是英语source“资源”的缩写。

img: 代表的就是一张图片。是单边标记。img是自封闭标签,也称为单标签。

能够插入的图片类型是:jpg(jpeg)、gif、png、bmp。不能往网页中插入的图片格式是:psd、ai

HTML页面不是直接插入图片,而是插入图片的引用地址,所以也要把图片上传到服务器上。

4.1src属性:指图片的路径。其中包括图片的相对路径和绝对路径

写法一:相对路径——就是../ image/ 这种路径。从自己出发,找到别人;

相对当前页面所在的路径。两个标记 . 和 .. 分表代表当前目录和父路径。

写法二:绝对路径——就是http://开头的路径

绝对路径包括以下两种:

以盘符开始的绝对路径。举例:<img src="C:\Users\smyhvae\Desktop\html\images\1.jpg">

网络路径。举例:<img src="http://img.smyhvae.com/2016040102.jpg">

4.2width:宽度&height:高度

如果要想保证图片等比例缩放,请只设置width和height中其中一个。

4.3Align:指图片的水平对齐方式,属性值可以是:left、center、right

如果想实现图文混排的效果,请使用align属性,取值为left或right。

4.4title:提示性文本。公有属性。也就是鼠标悬停时出现的文本。

4.5border:给图片加边框(描边),单位是像素,边框的颜色是黑色

4.6Hspace:指图片左右的边距&Vspace:指图片上下的边距

4.7Alt:当图片显示不出来的时候,代替图片显示的内容。alt是英语 alternate “替代”的意思。(有的浏览器不支持)

明天计划的事情:

继续学习html的基础知识

遇到的问题:

因为没有基础,所以还需要时间打好基础

收获:

学习了body中的一些标签,排版标签,字体标签,超链接标签,图片标签


返回列表 返回列表
评论

    分享到