时间:2023-08-04 17:51:01 | 来源:网站运营
时间:2023-08-04 17:51:01 来源:网站运营
html标签图文详解-day1:<p>
、 <div>
、 <span>
、<br>
、 <hr>
、 <center>
、 <pre>
<h1>
、 <font>
、 <b>
、 <u>
、<sup>
、<sub>
<a>
<img>
<p>
称为开始标记 ,</p>
称为结束标记,也叫标签。每个标签都规定好了特殊的含义。<p>内容</p>
称为元素.javascript + css + html
合起来的页面就是一个dhtml。用的最多的编辑器是: VS Code 和 Sublime Text。
文件→ set File Encoding to → Chinese Simplified(GBK)
。<h1><font></font></h1>
<span></span>
<br>
转成 <br />
<hr>
转成 <hr />
,还有<img src=“URL” />
<font color="red"></font>
<hr noshade="noshade">
、<input type="radio" checked="checked" />
备注: - 所有的浏览器默认情况下都会忽略空格和空行 - 每个标签都有私有属性。也都有公有属性。 - html中表示长度的单位都是像素。HTML只有一种单位就是像素。HTML标签通常是成对出现的(双边标记),比如
<div>
和 </div>
,也有单独呈现的标签(单边标记),如:<br />
、<hr />
和<img src="images/1.jpg" />
等。html:5
,按 Tab
键后,自动生成的代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title></head><body></body></html>
方式2:在Sublime Text中安装Emmet
插件。新建html文件,输入html:5
,按Tab
键后,自动生成的代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body></body></html>
方式3:在Sublime Text中安装Emmet
插件。新建html文件,输入html:xt
,按Tab
键后(或者按Ctrl+E),自动生成的代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title></head><body></body></html>
上面的方式2和方式3中,我们会发现,第一行的内容有些不太一样,这就是我们接下来要讲的文档声明头。<!DOCTYPE ……>
开头的语句。<H1></H1>
所以,HTML就觉得,把一些规范严格的标准,又制定了一个XHTML1.0。在XHTML中的字母X,表示“严格的”。<!DOCTYPE html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="Author" content=""> <meta name="Keywords" content="牛逼,很牛逼,特别牛逼" /> <meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" /> <title>Document</title></head><body></body></html>
面试题:<title>
、<base>
、<meta>
、<link>
<title>
:指定整个网页的标题,在浏览器最上方显示。<base>
:为页面上的所有链接规定默认地址或默认目标。<meta>
:提供有关页面的基本信息<body>
:用于定义HTML文档所要显示的内容,也称为主体标签。我们所写的代码必须放在此标签內。<link>
:定义文档与外部资源的关系。<meta>
标签都不用记,但是另外还有一个<meta>
标签是需要记住的:<meta http-equiv="refresh" content="3;http://www.baidu.com">
上面这个标签的意思是说,3秒之后,自动跳转到百度页面。<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
字符集用meta标签中的charset
定义,meta表示“元”。“元”配置,就是表示基本的配置项目。<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width
:表示视口宽度等于屏幕宽度。<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
这些关键词,就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率。让别人能够找到你,搜索到你。<meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" />
效果如下:<title>网页的标题</title>
title也是有助于SEO搜索引擎优化的。<base href="/">
base 标签用于指定基础的路径。指定之后,所有的 a 链接都是以这个路径为基准。<body>
标签的属性bgcolor
:设置整个网页的背景颜色。 - background
:设置整个网页的背景图片。 - text
:设置网页中的文本颜色。 - leftmargin
:网页的左边距。IE浏览器默认是8个像素。 - topmargin
:网页的上边距。 - rightmargin
:网页的右边距。 - bottommargin
:网页的下边距。<body>
标签另外还有一些属性,这里用个例子来解释:点我点我
这几个字使用超链时,link
属性表示默认显示的颜色、alink
属性表示鼠标点击但是还没有松开时的颜色、vlink
属性表示点击完成之后显示的颜色。效果如下:<body>
里的各种标签的属性。<!-- 注释 -->
<p>
<p>This is a paragraph</p><p>This is another paragraph</p>
属性: - align="属性值"
:对齐方式。属性值包括left center right。 举例:<p> 我是一个小段落 <h1>我是一级标题</h1> </p>
网页效果如下:<div>
和<span>
div和span是非常重要的标签,div的语义是division“分割”; span的语义就是span“范围、跨度”。div:把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。
CSS课程中你将知道,这两个东西,都是最最重要的“盒子”。
align="属性值"
:设置块儿的位置。属性值可选择:left、right、 center。<span>
和<div>
唯一的区别在于:<span>
是不换行的,而<div>
是换行的。<p> 简介简介简介简介简介简介简介简介 <span> <a href="">详细信息</a> <a href="">购买</a> </span> </p>
div举例:<div class="header"> <div class="logo"></div> <div class="nav"></div> </div> <div class="content"> <div class="guanggao"></div> <div class="dongxi"></div> </div> <div class="footer"></div>
所以,我们亲切的称呼这种模式叫做“div+css”。div标签负责布局,负责结构,负责分块。css负责样式。<br>
(已废弃)<br>
标签就派上用场了。无论你将它置于何处,<br>
标签都会产生一个强制的换行。This <br> is a para<br>graph with line breaks
效果如下:<p>
标签和<br>
标签的区别在于:<p>
标签会在段落的前后自动插入一个空行,而<br>
标签没有空行;而且<br>
标签没有属性。<br>
没有结束标签,把<br>
标签写为 <br/>
是经得起未来考验的做法,XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。<hr>
(已废弃)align="属性值"
:设定线条置放位置。属性值可选择:left right center。 - size="2"
:设定线条粗细。以像素为单位,内定为2。 - width="500"
或width="70%"
:设定线条长度。可以是绝对值(单位是像素)或相对值。如果设置为相对值的话,内定为100%。 - color="#0000FF"
:设置线条颜色。 - noshade
:不要阴影,即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体,这是内定值。 属性效果演示:<center>
<pre>
<pre>
标签几乎用不着。但在PHP中用于打印一个数组时使用。<pre>
这个标签呢?答案是:所有的浏览器默认情况下都会忽略空格和空行。好吧,其实这个标签也用的比较少。
<h1>
至<h6>
标签进行定义。<h1>
定义最大的标题,<h6>
定义最小的标题。具有align属性,属性值可以是:left、center、right。 效果演示:<font>
(已废弃)color="红色"
或color="#ff00cc"
或color="new rgb(0,0,255)"
:设置字体颜色。 设置方式:单词 / #ff00cc / rgb(0,0,255) - size
:设置字体大小。 取值范围只能是:1至7。取值时,如果取值大于7那就按照7来算,如果取值小于1那就按照1来算。如果想要更大的字体,那就只能通过css样式来解决。 设置:用’+2’代表值是5 或直接给值 - face="微软雅黑"
:设置字体类型。注意在写字体时,“微软雅黑”这个字不能写错。 举例:<font face="微软雅黑" color="#FF0000" size="10">vae</font>
效果:
:空格 (non-breaking spacing,不断打空格)<
:小于号(less than)>
:大于号(greater than)&
:符号&
"
:双引号'
:单引号©
:版权©
™
:商标™
绐
:文字绐
。其实,#32464
是汉字绐
的unicode编码。
、<
、>
、©
。<p>
作为一个文本在页面上显示,直接写<p>
是肯定不行的,因为这代表的是一个段落标签,所以这里需要用到转义字符。应该这么写:这是一个HTML语言的<p>标签
正确的效果如下:
| |<|小于号|<
| |> |大于号|>
| |&|和号|&
| |¥|人民币|¥
| |©|版权|©
| |®|注册商标|®
| |°|摄氏度|°
| |±|正负号|±
| |×|乘号|×
| |÷|除号|÷
| |²|平方2(上标2)|²
| |³|立方3(上标3)|³
|<u>
:下划线标记<s>
或<del>
:中划线标记(删除线)<i>
或<em>
:斜体标记<i>
。<b>
或<strong>
(已废弃)<sup>
下标<sub>
b
的意思是bottom:底部
举例:O<sup>2</sup> 5<sub>3</sub>
效果:<a href="02页面.html">点击进入另外一个文件</a>
a是英语anchor
“锚”的意思,就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。hypertext reference
超文本地址的缩写。读作“喝瑞夫”,不要读作“喝夫”。<a href="http://www.baidu.com" target="_blank">点我点我</a>
2、锚链接: 指给超链接起一个名字,作用是在本页面或者其他页面的的不同位置进行跳转。比如说,在网页底部有一个向上箭头,点击箭头后回到顶部,这个就是利用到了锚链接。 首先我们要创建一个锚点,也就是说,使用name
属性或者id
属性给那个特定的位置起个名字。效果如下:#name1
)。注意上图中红框部分的#
号不要忘记了,表示跳到名为name1的特定位置,这是规定。如果少了#
号,点击之后,就会跳到name1这个文件或者name1这个文件夹中去。<a href="a.html#name1">回到顶部</a>
那就表示,点击之后,跳转到a.html
页面的name1锚点
中去。<a href="mailto:smyhvae@163.com">点击进入我的邮箱</a>
效果:点击之后,会弹出outlook,作用不大。href
:目标URLtitle
:悬停文本。name
:主要用于设置一个锚点的名称。target
:告诉浏览器用什么方式来打开目标页面。target
属性有以下几个值:_self
:在同一个网页中显示(默认值)_blank
:在新的窗口中打开。_parent
:在父窗口中显示_top
:在顶级窗口中显示title
属性举例:<a href="09_img.html" title="很好看哦">结婚照</a>
效果如下:target
属性举例:<a href="1.html" title="悬停文本" target="_blank">链接的内容</a>
blank就是“空白”的意思,就表示新建一个空白窗口。为啥有一个_ ,就是规定,没啥好解释的。 也就是说,如果不写target=”_blank”
那么就是在相同的标签页打开,如果写了target=”_blank”
,就是在新的空白标签页中打开。<img src="1.jpg" /><a href="1.html"></a>
<p> <a href="">段落段落段落段落段落段落</a></p>
而不是a包裹p:<a href=""> <p> 段落段落段落段落段落段落 </p></a>
a的语义要小于p,a就是可以当做文本来处理,所以p里面相当于放的就是纯文字。HTML页面不是直接插入图片,而是插入图片的引用地址,所以也要把图片上传到服务器上。
src
属性:图片的相对路径和绝对路径src
属性:指图片的路径。.
和 ..
分表代表当前目录和父路径。<!-- 当前目录中的图片 --><img src="2.jpg"><img src="./2.jpg"><!-- 上一级目录中的图片 --><img src="../2.jpg">
img 是image“图片”的简写,src 是英语source“资源”的缩写。aaa/../bbb/1.jpg
../
要么不写,要么就写在开头。<img src="images/1.jpg">
上方代码的意思是说,当前页面有一个并列的文件夹images
,在文件夹images
中存放了一张图片1.jpg
效果:<img src="../../photo/1.png" />
<img src="C:/Users/smyhvae/Desktop/html/images/1.jpg">
(2)网络路径。举例:<img src="http://img.smyhvae.com/2016040102.jpg">
大家打开上面的img中的链接,扫一扫,可能有惊喜哦。<img src="file://C:/Users/Danny/Pictures/明星/1.jpg" alt="" />
总结一下:width
:宽度height
:高度Align
:指图片的水平对齐方式,属性值可以是:left、center、righttitle
:提示性文本。公有属性。也就是鼠标悬停时出现的文本。border
:给图片加边框(描边),单位是像素,边框的颜色是黑色Hspace
:指图片左右的边距Vspace
:指图片上下的边距alt
:当图片不可用(无法显示)的时候,代替图片显示的内容。alt是英语 alternate “替代”的意思,代表替换资源。(有的浏览器不支持)<img src="images/1.jpg" width="300" height="`188" title="这是美女">
效果:Alt
属性效果演示:(当图片 src 不可用的时候,显示文字。这样做,至少能让用户知道,这个图片大概是什么内容)align
属性:图片和周围文字的相对位置。属性取值可以是:bottom(默认)、center、top、left、right。 我们来分别看一下这align
属性的这几个属性值的区别。align=""
,图片和文字低端对齐。即默认情况下的显示效果:align="center"
:图片和文字水平方向上居中对齐。显示效果:align="top"
:图片与文字顶端对齐。显示效果:align="left"
:图片在文字的左边。显示效果:align="right"
:图片在文字的右边。显示效果:<a href="网页2.html"><img src="2.jpg"></a>
上方代码表明:给图片加一个超链接,那个点击这个图片的任意区域,都会跳转到新的位置。 现在,我只想对图片的局部区域加超链接,该怎么做呢?这里的难点在于坐标的确定,此时需要用到Dreamweaver。插入-图像
,导入图片:属性
,弹出属性面板:地图
绘制需要添加超链接的区域。箭头处表示的是要链接到的文件。蓝框部分表示打开新页面的方式,蓝狂部分的new
是没有下划线的,它和_blank
的含义是一样的。<img src="file:///C|/Users/smyhvae/Desktop/html/1.jpg" alt="" width="488" height="730" usemap="#Map"/><map name="Map"> <area shape="circle" coords="227,374,63" href="file:///C|/Users/smyhvae/Desktop/html/网页2.html" target="_blank"></map>
上方代码中,第一行的usemap="#Map"
表示我要引用名为Map
的地图。 然后第02至第04行就给出了地图的定义。 效果演示:关键词:标签