javaweb-html快速入门

时间:2022-04-16 14:40:58

本文主要是进行HTML简单介绍(详细的属性查帮助文档就行了,这里主要为快速入门,赶时间,在最短的时间中看明白一个html文件的代码(如果能称之为代码的话)详细的样式表,布局啥的有时间再研究吧)

HTML

1html的简介

1.1,html的全称:HyperText Mark-up Language ,超文本标记型语言,是网页的语言。

 超文本:比文本更加强大(后面还会讲到XML,可扩展标记性语言)

 标记:就是标签,html所有操作都是通过标签直接或间接的操作(把需要操作的数据通过标签封装起来)

 html就是用来写网页的语言

 

测试:

<p>这里是测试</p>  保存为.html文件,通过浏览器打开

 

1.2 html的规范(非必须,但是约定俗称)

①以<html>开始和</html>结束,

html程序包含两部分内容:headbody(理论上有foot但是意义不明)

<html>

<head>设置页面信息(一般是通知服务器的)</head>

<body>显示到页面上的内容</body>

 </html>

:一个标签必须要有开始也有结束:开始:<p>结束:</p>

html的代码不区分大小写的(弱势语言)

⑤:有些标签没有结束标签,需要在标签内结束 <br/>(换行)

但是,没有</br>结束标签

3html的操作思想

注意事项:在网页中可能有很多的数据,不同的数据可能需要不同的显示效果,这个时候需要使用标签把要操作的数据封装起来(高司令笑了)程序员通过修改标签的属性值来实现标签内数据样式的变化(有第三方软件的样式功能更强大,比如:DreamweaverPortable)。标签相当于一个容器,通过修改容器的属性值,实现容器内数据样式的变化。

<!--下面的内容来自某论坛课堂笔记-->

<!--写样式最好还是用css,简单明了,也方便后期维护-->

2、字体标签

2.1文字标签 <font>

 <font color="设置文字颜色" size="文字的大小">要操作的文字的内容</font>

  常用两个属性

   color:设置文字的颜色

    有三种表示方式

第一种:直接使用英文单词进行表示 red  green  yellow......

第二种:使用十六进制数字进行表示 #ffffff

    通过RGB,调色器获取

第三种:使用RGB颜色值配置 rgb(255,0,0)

 

 size:设置文字的大小

文字大小值范围:1-7,如果值超过了7,使用还是7的效果

 

2)标题标签

* <h1></h1> <h2></h2>.......<h6></h6>

** 标题标签可以自动换行,从h1h6字体的大小依次变小的

 

3)水平线标签

*  <hr/>

* 属性

** color:表示设置水平线颜色

** size:设置水平线的粗细,范围1-7

 

4)注释标签

* java里面有几类注释?三类注释

** 单行注释,多行注释,文档注释

 

* html中注释 <!-- 注释的内容  -->

** 使内容不在html页面中进行显示

 

5)特殊字符  

* 实现空格的操作

 

3、列表标签

1)想要实现:

A公司

     人事部

 市场部

 采购部

* 首先需要使用      <dl></dl>: 定义列表的范围

* 之后在dl标签里面,<dt></dt>: 定义上层内容

* dl标签里面,    <dd></dd>: 定义下层内容

** 代码

<dl>

 <dt>A公司</dt>

 <dd>j采购部</dd>

 <dd>人事部</dd>

 <dd>市场部</dd>

</dl>

 

2)有序列表标签

     1.人事部

 2.市场部

 3.采购部

 

 

     a.人事部

 b.市场部

 c.采购部

 

 

     罗马数字

       i.采购部

      ii.人事部

     iii.市场部

* 使用 <ol></ol>: 定义有序列表的范围

** ol标签上面有属性 type:排序的方式

** type属性里面的值 1   a   i

* 之后在ol标签里面:<li></li>: 封装具体的内容

** 代码

<ol>

 <li>采购部</li>

 <li>人事部</li>

 <li>市场部</li>

</ol>

 

3)无序列表标签

      (特殊符号)采购部

      (特殊符号)人事部

      (特殊符号)市场部

* 首先使用标签 <ul></ul>: 定义无序列表的范围

** ul标签上面有属性 type:设置特殊符号

** type属性里面的值 disc   circle   square

* 之后在ul标签里面: <li></li>: 封装具体的内容

** 代码

<ul>

 <li>采购部</li>

 <li>人事部</li>

 <li>市场部</li>

</ul>

 

4、图形标签

1)在html中显示图片

2)标签:<img src="图片的路径名称"/>

3)属性:

* src:图片的路径名称

* width:图片宽度

* height:图片的高度

* border:图片的边框的粗细

* alt: 显示在图片上面的内容

** 鼠标移动到图片上面,稍等片刻出现文字

** 如果图片找不到,显示alt的内容

*** 这个属性在某些浏览器不能显示的

 

5、超链接标签

1)什么是超链接:点击打开新的内容

2)标签:<a href="链接到的地址">显示在页面上的内容</a>

* 代码 <a href="hello.html">显示在页面上的内容</a>

3)属性

* href:链接到地址

* target:超链接的打开方式

** 在默认的情况下,打开方式在当前的页面打开

** target里面的值:_self,当前页面打开;   _blank,在新标签页打开

 

6、表格标签

操作技巧:

首先数表格里面有多少行,数每行里面有多少个单元格

1)什么是表格:对数据进行格式化,使数据显示更加清晰,结构分明

2)标签

* 首先定义表格的范围:<table></table>

** 属性

*** border:设置表格线

*** bordercolor:设置表格线的颜色

*** cellspacing: 设置单元格之间的距离

*** cellpadding: 设置文字和单元格之间的距离

*** width: 设置表格的宽度

*** height:设置表格的高度

 

* table标签里面表示行: <tr></tr>

** 属性

*** align:设置对齐方式,值 left   center   right

 

* tr标签里面表示列: <td></td>

** 属性

*** align:设置某个单元格对齐方式

 

* tr标签里面也可以表示单元格:<th></th>

** 实现居中和加粗的效果

 

3)合并单元格

* 是在td标签上面进行的操作,使用两个属性

** rowspan:跨行

*** 代码 <th rowspan="4">人员信息3</th>

** colspan:跨列

*** 代码 <td colspan="3">统计信息3</td>

 

4)标题标签:<caption>标题内容</caption>

 

7、表单标签

1)什么是表单?把输入的数据提交到服务器上(存到服务器),这个过程称为表单

2)使用表单标签实现数据提交到服务器上这个过程

 

3form 标签:如果写表单,首先定义表单的范围

* 属性

** action:提交的服务器的地址

** method:表单的提交方式(有很多种,常见的有两种 getpost

*** 代码

<form action="hello.html" method="get"></form>

** getpost提交,在默认情况下,提交方式是get提交

*** get提交方式会在地址栏携带数据,安全性很差

*** post提交方式地址栏不会携带数据,安全性比较高,数据在请求体里面(讲到http协议时候详细说)

 

4)输入项:可以输入内容或者选择内容的地方

** 要求1:输入项里面必须要有name属性

** 要求2:在单选输入项和复选输入项以及下拉选择输入项里面

都需要有属性value,设置的值

 

* 输入项需要写到form标签里面

* 大部分输入项是通过标签input进行封装操作的

** <input type="输入项的类型"/>

第一个:普通输入项 <input type="text"/>

第二个:密码输入项 <input type="password"/>

第三个:单选输入项 <input type="radio"/>

** 要求:单选输入项里面必须有name属性,同时name的属性值必须要相同

** 设置默认选中,使用属性 checked="checked"

第四个:复选输入项 <input type="checkbox"/>

** 要求:单选输入项里面必须有name属性,同时name的属性值必须要相同

** 设置默认选中,使用属性 checked="checked"

第五个:文件输入项,上传文件的。<input type="file"/>

第六个:隐藏项,这个值不会显示在页面上,但是提交表单也可以提交到服务器上

<input type="hidden"/>

第七个:普通按钮 <input type="button"/>

 

*** 可以写value属性,设置输入项的默认值

 

5)下面的两个输入项不是使用input标签进行封装的

第八个:下拉选择输入项

* <select>

<option>AAAA</option>

<option>BBBB</option>

<option>CCCC</option>

</select>

* 使用属性 selected="selected" 默认选中

 

第九个:文本域

* <textarea cols="10" rows="5"></textarea>

 

6)提交按钮和其他的按钮

* 提交按钮: <input type="submit"/>

** 属性 value:设置提交按钮显示的内容

 

** 点击提交按钮:地址发生了变化

file:///C:/Users/asus/Desktop/javaweb/day01/

       代码/hello.html ?sex=on&love=on&love=on

 

** 在输入项上面写name属性之后,提交表单

file:///C:/Users/asus/Desktop/javaweb/day01/aaa/hello.html ?username=wangwu&password=123456&sex=on&love=on&love=on&love=on&hid=bbbb&xueli=AAAA&des=test

 

** 在单选框、复选框和下拉选择框里面设置了value之后,提交表单

file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html

?username=aaaa&password=123456&sex=nan&love=l&love=p&love=y&hid=bbbb&xueli=ccc&des=test

 

* 重置按钮:<input type="reset"/>

** 属性 value:设置重置按钮显示的内容

** 不是做清空表单输入项的操作,使表单输入项回到初始状态

 

* 使用图片进行提交:<input type="image" src="图片路径"/>

 

8、其他的标签的使用

1pre:原样输出

     p:段落标签

     s:删除线

     u: 下划线

     b:加粗

     i:斜体

 

2div : 自动换行

     span:在一行进行显示

 

9、案例:用户登录信息填写,代码如下:

 

 

<body>
    <!-- 这里是登陆页面 -->
    <h3>欢迎光临,这里是狗肉卖场</h3>
    <h5><font color="red">欢迎</font></h5>
    <form action="" method="post">
        username:<input type="text" name="username"/><br/>
        password:<input type="text" name="password"/><br/>
        <input type="submit" value="注册"    /><br/>
    </form>
    <a href="reg.jsp">点我前去注册页面</a>
</body>