发表于: 2018-07-26 21:55:38
1 517
今天完成的事情:
学习了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特殊字符(转义字符)
:空格 (non-breaking spacing,不断打空格)
<:小于号(less than)
>:大于号(greater than)
&:符号&
":双引号
':单引号
©:版权©
™:商标™
¥: 人民币
®:注册商标®
°:摄氏度°
±:正负号±
×:乘号×
÷:除号÷
²:平方2(上标2)²
³:立方3(上标3)³
举个例子:如果把<p>作为一个文本在页面上显示,直接写<p>是肯定不行的,因为这代表的是一个段落标签,所以这里需要用到转义字符。应该这么写:这是一个HTML语言的<p>标签
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中的一些标签,排版标签,字体标签,超链接标签,图片标签
评论