java web 之 网页前端开发基础(1)

1.HTML(Hypertext Markup Language,HTML,超文本标记语言

1.1 创建第一个HTML文件

编写html语言可以通过两种方式,一种是手工编写html代码,一种是借助一些开发软件,如Dreamweaver或者微软公司的Expression Web这样的网页制作软件。在windows操作系统中,最简单的文本编辑软件就是记事本。还有notepad++,以及sublime等。

编写第一个html文件的步骤:

  1. 单击开始菜单,依次选择“程序/附件/记事本”命令;
  2. 在打开的记事本窗体中写代码
  3. 编写完成之后需要将文件保存为html格式的文件,具体步骤是选择记事本菜单栏中的文件/另存为命令,在弹出的另存为对话框中,首先在保存类型下拉菜单中选择所有文件选项,然后在文件名文本框输入一个文件名,需要注意的是,文件名的后缀应该是.htm或者.html
  4. 设置完成后,单击保存按钮,则成功生成了html文件。双击该文件就会显示该文件的内容。

1.2HTML文档结构

html文档由4个主要的标记组成,这四个标记主要有<html>\<head>\<title>\<body>,这四个元素构成了html页面最基本的元素。

1.2.1<html>标记

<html>文件是HTML文件的开头。所有html文件都是以次开头,以</html>文件结尾。html页面所有标记都要放置在<html>和</html>之间。这个标记并没有实质性的功能,但是却是html文件必不可少的内容。

1.2.2<head>标记

<head>标记是html文件的头标记,作用是放在html文件的信息。如定义css样式代码可放置在<head>与</head>标记之中。

1.2.3<title>标记

<title>标记是标题标记,可将网页的标题定义在<title>和</title>标记之中。

1.2.4<body>标记

<body>是html页面的主体标记,页面中所有内容都定义在<body>标志中。<body>标记也是成对使用的,以<body>开头,以</body>结束。<body>标记本身也有一些控制页面的一些特性,如控制页面的被禁图片和颜色等。

html文本语言还有很多其他的标记,如果在使用过程中需要用到一些其他的标记可以通过查找来使用,但是这样使用的效率会很低下。熟能生巧。

换行标记[单独标记]  <br>

段落标记   <p>。。。</p>:段落标记主要在段前和段后加一个空格,段落内的内容不受影响。

标题标记<h1>一级标题,....<h6>代表是6级标题。数字越小表示级别越高,文字的字体就越大。

 

居中标记<center>开头,</center>结尾

 

文字列表标记:将文字以列表的形式依次排列,通过这种形式能更加方便访问者。html中的列表分为有序无序两种。

(1)无序列表

无序列表是在每一个列表前面加一个圆点符号。通过符号<ul>可以创建一组无序列表,其中每一个列表项以<li>[单标记]表示。

 

(2)有序列表

有序列表和无序列表的区别是使用有序列表标记可以将列表项进行排号。有序列表的标记为<ol>,每一个列表前使用<li>,有序列表中项目是有一定的顺序的。

 

区域标记<span>:用来组合文档内的元素,它本身是没有固定的格式的,对它应用样式时,它将会对画好的区域进行渲染。

<div>标记与<span>标记类似,但是二者的区别是:<span>标签是行内元素,而<div>是块元素,<div>作用比<span>更大。

表格标记<table>是十分重要的因素,表格迎来存储数据。表格包含标题、表头、行和单元格。<table>....</table>;

标题标记<caption>...</caption>,标题也有一些属性,如align、valign等。

表头标记<th>...</th>,也可以通过align、background、colspan、valign等属性来设置表头;

表格行标记<tr>,,,</tr>,一组表示表格中一行;

单元格标记<td>。。。</td>,一个<tr>中可以包含若干个<td>;

这里就不举例了。

接下来还有html的表单标记,就是一般网页上会出现的登录页面,用户输入的文本框就是属于html中的表单的范畴;

还有下拉菜单标记等,用到记不住就查一下。

 

补充内容:

html表单设计

 

 

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值