整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML中的元素使用方法1-零基础自学网页制作

TML元素

这一节以及以后几节我们将对HTML中<body>标签中的各种元素进行一个概述,并对一些基本元素进行练习。

HTML元素:指的是从开始标签到结束标签的所有代码。

举个例子,在《第一个HTML页面如何写?——零基础自学网页制作》这一节中,我们写了这样一个页面"第一个页面.html"。后面的练习我们都在这个文件中进行。

<!DOCTYPE HTML> 
  <html> 
  <head> 
  </head> 
  <body> 
  <h>第一个网页</h>
  <p>千里之行始于足下</p> 
  </body>
  </html>

其中"<h>第一个网页</h>"整个代码就可以看做是一个html元素,<h></h>叫做标题标签,加上"第一个网页"这段文字共同构成一个HTML元素。

HTML元素非常多,因为我们可以在页面中显示各种各样的信息,不同的信息载体对应不同的元素。

下面我们就介绍几个常用的html元素。

HTML常用元素使用练习1

NO.1:<h></h>与<hr>

<h></h>这个用来添加标题的元素大家比较熟悉了,这里要介绍一个新的用法。示例代码如下:

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
  </head> 
  <body>
  <h1>第一个网页</h1>
  <h2>第一个网页</h2>
  <h3>第一个网页</h3>
  <h4>第一个网页</h4>
  <h5>第一个网页</h5>
  <h6>第一个网页</h6>
  <p>千里之行始于足下</p>
  </body> 
  </html>

页面显示效果如图:

大家通过观察可以看出h后面的编号用来控制标题字号大小,仅仅是标题有这种预设,其他元素如果要调整字号的话我们放在以后CSS里讲。

下面看<hr>,示例代码如下:

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
  </head> 
  <body>
  <h1>第一个网页</h1><hr>
  <h2>第一个网页</h2><hr>
  <h3>第一个网页</h3><hr>
  <h4>第一个网页</h4><hr>
  <h5>第一个网页</h5><hr>
  <h6>第一个网页</h6><hr>
  <p>千里之行始于足下</p><hr>
  </body> 
  </html>

效果如下:

<hr>标签可以为它前面的元素添加分割线,大家注意的是分割线不是下划线,添加下划线的操作我们会在CSS样式表中详细讲解。

NO.2:<p></p>与<br>

<p></p>元素是添加段落的。示例代码如下:

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
  </head> 
  <body>
  <h1>第一个网页</h1><hr>
  <p>千里之行始于足下值得注意的是我们没有必要一一讲解HTML中的所有元素以及每个元素的各个属性,
因为每个元素的使用都是大同小异,我们完全可以通过几个常用案例对HTML全部元素及属性的指定形成一
个整体认识,以后可以根据需求通过查询手册来自己学习其他元素及其属性的用法。</p><hr>
</body>
</html>

效果如图所示:

通过观察发现,即使我们在代码中对段落的文字进行回车操作,但是出现在页面中是没有回车的效果的,文字按照顺序长长的排列在显示器上,非常不利于阅读,因此我们就要介绍常常和p标签连用的<br>换行标签。

示例代码如下:

<!DOCTYPE HTML>
  <html>
  <head>
  <title>第一个网页</title>
</head> 
<body>
  <h1>第一个网页</h1><hr>
<p>千里之行始于足下<br>
  值得注意的是我们没有必要一一讲解HTML中的所有元素以及每个元素的各个属性,<br>
  因为每个元素的使用都是大同小异,我们完全可以通过几个常用案例对HTML全部元<br>
  素及属性的指定形成一个整体认识,以后可以根据需求通过查询手册来自己学习其他<br>
  元素及其属性的用法。</p><hr>
</body>
</html>

效果如图所示:

喜欢的小伙伴请关注我,阅读中遇到任何问题请给我留言,如有疏漏或错误欢迎大家斧正,不胜感激!

HTML完整学习目录

HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

HTML是什么?——零基础自学网页制作

第一个HTML页面如何写?——零基础自学网页制作

HTML页面中head标签有啥用?——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2(路径详解)——零基础自学网页制作

使用HTML添加表格1(基本元素)——零基础自学网页制作

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

使用HTML添加表格3(间距与颜色)——零基础自学网页制作

使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作

HTML表单4(form的action、method属性)——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

自:Office之家链接:http://www.icanzc.com/word/6854.html

一篇文章段落太多,如果想要找到自然段,那怎么给word中一段文档添加段落编号呢?为了更好地查看文档,会对文档内容添加行号,本期小编与大家分享一下有关行号的用法,对行号不了解的朋友可以恶补一下知识哦。 1、行号的添加和删除方式 选中要添加的行号的内容,这一步是必须的,要操作先选择,之后点击布局——页面设置——行号——连续即可,(其他选项大家可以尝试)。若不想要行号,以同样的方式设置为“无”即可,如下图所示。


2、行号的格式设置 1)中间段不设置行号,对排版要求个性点的朋友可以了解下的 若想让文档中间某段不设置行号,可以先选中某段,点击行号下拉菜单中的“禁止用于当前段落”选项,便会看到不一样的效果。

2)每页重新设置编号,这个的意思是每页的编号都是从1,2,3开始的 点击文档内容,选择行号下拉菜单中的“每页重编行号”选项,看看效果。

3、行号选项的设置

1)每5行编号一次,想更个性的朋友,这是你的菜 选中文档,点击行号——行号选项——行号,打开相应的界面,然后在“行号间距”中输入5,点击确定即可,其他选项,大家可以尝试操作。

2)调整行号与正文间距,对美极致追求的朋友可以练练手 打开行号设置界面,在“距正文”中输入想要的间距即可,Word就是这么6,总能想你所想。

注意:如果文档没有添加行号,在行号界面中需要勾选“添加行号编号”,这点很重要,一定要记住哦

4、在每段的末尾添加编号 如何给每个段落添加相应的编号呢?这里推荐大家使用查找和替换功能。 首先在空白文档中先插入一个编号域,点击插入——文档——文档部件——域,选择“编号”内容,之后选择一个格式,然后将编号复制,按Ctrl+H打开查找和替换,在查找内容文本框中输入^13,在替换为中输入^c ^p,点击全部替换即可。

PS:若不想添加空行,在替换时,后面就不用添加段落标记 以上便是为大家介绍的行号的添加和删除方式,行号的格式设置,行号选项的设置,如何在每段的末尾添加编号,对此感兴趣的各位同学,可以趁机学习一下哦

天的主要分享的是一些最基本、最常用的标签:<img/>、<a></a>、<table></table>、<ul></ul>,以及文件路径。

首先,先来了解一下<img/>标签,它表示图片标签,在页面中会出现很多的图像,主要的编码方式就是通过<img/>来实现的;那是怎么实现的呢?它通过一些自己的属性来规定了这个图像的样式,要实现一个图像最基本的属性有 src属性、width属性、height属性、alt属性,详解一下他们的属性分别是做什么的,是实现图像的哪一个部分的?

src属性:就是你要放置图像,该图像的文件路径,你的文件是放在C盘里面的文件还是D盘里面的文件,那么src就是这个图像的路径;

width属性:就是你的图像的宽度,同理height就是图像的高度;

alt属性:是指一种提示,比如你的鼠标在移动到你的图片的时候或有文字提示、或者因为某种原因图片不能正常显示的时候,会有直接文字提示;

完整的语法:<img src="图像路径" width="100px" height="100px" alt="提示"/>

接下来,我们分享<a></a>链接标签,它是一个能够实现跳转的标签,在小编还是没有完全总结<a>标签的情况下,可以先简单的可以理解为从一个页面跳转到另外一个页面。要实现一个跳转也是需要它自有的一些属性来完成,href属性,target属性,name属性。解一下他们的属性分别是做什么的,是实现跳转的哪一个部分的?

href属性:就是你要跳转到哪个页面,就是这个页面的路径;

target属性:就是你要跳转的网页的打开方式,它有自己的备选答案,其中_blank代表在新的标签中打开,_self代表在当前页面中打开(这个是缺省值)

name属性:就是定义锚点名称(只有当<a>标签当做锚点使用时需要该属性)

完整的语法:<a href="网页路径" target=“_blank”></.a>

总结一下<a>标签常用的表现形式(作用)

1、网页面间跳转

<a href="页面路径"></a>

2、页面上的文档(资源)下载

<a href="资源路径"></a> 其中:资源路径是指非html,htm,txt的资源,一般常见有为压缩包形式 <a href="xxx.rar">下载</a>

3、返回页面顶部的空连接

<a href="#">返回顶部</a> 跳转到本页(一般在开发、测试阶段使用)

4、电子邮件链接

<a href="mailto:zhaoxu@tarena.com.cn"></a>

5、链接到Javascript

<a href="javascript:js代码段落"></a> 就是在点击<a>标签的时候,执行一段js代码

锚点:就是在页面的任意位置处定义一个标识,随时随地的都可以跳转到这个标识上;如果你想要在同一个页面中,快速的到达某个点,这时候用锚点的方式是非常好的。

锚点的使用方式(2步骤):

1、定义锚点 <a name="anchorName"></a>

2、链接到锚点 <a href="#anchorName">文本 或 图像</a> 或者 <a href="url#anchorName"></a>

第三、关于<table>表格标签

表格:有行有列,按照一定的格式(从左到右,从上到下)排列里面的内容;它能组织结构化的信息,按照一定的格式来进行数据显示

要想创建表格:

1.定义表格:<table></table>

2. 定义行:<tr></tr>

3.创建列(单元格):<td></td>

注意:原始的表格中,每行的列数全部都是统一的。

在一些情况下,表格会有:表头,表主体,表尾

表头:<thead></thead>

表主体:<tbody></tbody>

表尾:<tfoot></tfoot>

实战:创建一个表格,有4行3列

<table>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

表格的属性:表格也是通过自己的属性来形成自己风格的table

width:宽度

height:高度

align:水平对齐方式(left,center,right)

border:设置表格的变宽,以px(像素)为单位

cellpadding:内边距,(单元格边框与内容之间的距离)

cellspacing:外边距,(单元格与单元格之间的距离)

bgcolor:表格背景颜色

align:设置该行内容的水平对齐方式(left,center,right)

valign:设置该行内容的垂直对齐方式(top,middle,bottom)

colspan:单元格跨列(向右合并单元格)

rowspan:单元格跨行(向下合并单元格)

表格标题:即表格第一行,文字加粗 语法:<caption>标题</caption>

<table>

<caption></caption>

<tr>

<td></td>

</tr>

</table>

表格除了中规中矩,还有复杂应用,可以形成不规则的表格,实现不规则表格主要是通过跨列:colspan、跨行:rowspan

第四:关于列表<ul>

列表根据使用情景,可以分为:有序列表、无序列表、自定义列表,其中

1、有序列表

语法:<ol><li></li> 列表项</ol>

常用属性:

type : 列表类型,取值可以为:

1 :表示数字(默认值)

a : 表示小写字母

A : 表示大写字母

i : 表示小写罗马数字

I : 表示大写罗马数字

start : 起始编号

2、无序列表

语法:<ul><li></li></ul>

属性: type 取值可以为:

disc : 实心圆(默认)

circle : 空心圆

square : 实心矩形

3、自定义列表

<dl> 定义列表

<dt></dt> 列表内容标题

<dd></dd> 列表数据

</dl>

有序、无序使用场景:

1、从上到下,只有一列显示数据

2、从左到右,只有一行显示数据(导航)

自定义列表使用场景:做图文混排的布局

最后是关于文件路径,即URL

目录结构的表示方式

URL : Uniform Resource Locator , 统一资源定位器 ,俗称,路径

作用:用来标识网络中的资源位置

http://www.baidu.com

images/logo.gif

URL的三种形式: 绝对路径 相对路径 根相对路径

1、绝对路径

文件从最高级目录开始的完整的路径

绝对路径就是完整的URL

1、从本机目录结构查找,从盘符开始

C:\xxx\xxx.jpg

2、网络资源目录结构开始查找

协议、主机、目录路径、文件名称

http://www.baidu.com/images/logo.jpg

2、相对路径

相对于当前文件的位置,查找资源文件

1、同级目录(直接找)

直接输入资源文件名称即可

2、子级目录(先进入)

先进入到指定文件夹,再查找资源文件

3、父级目录(先返回)

先返回到指定的父级目录出,再查找指定资源文件

../ : 表示返回上一级

../../images/logo.png

3、根相对路径

file:///C:/zhaoxu/ ........ 本地访问

http://www.baidu.com

http://localhost/ ...... 从服务器访问数据