javaweb-html快速入门

2023-12-17 10:16•html•阅读 3778

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

HTML

1、html的简介

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

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

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

html就是用来写网页的语言

测试:

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

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

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

②html程序包含两部分内容：head和body(理论上有foot但是意义不明)

<html>

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

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

</html>

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

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

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

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

（3）html的操作思想

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

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>

** 标题标签可以自动换行，从h1到h6字体的大小依次变小的

（3）水平线标签

* <hr/>

* 属性

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

** size：设置水平线的粗细，范围1-7

（4）注释标签

* 在java里面有几类注释？三类注释

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

* 在html中注释

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

（5）特殊字符

* 实现空格的操作

3、列表标签

（1）想要实现：

A公司

人事部

市场部

采购部

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

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

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

** 代码

<dl>

</dl>

（2）有序列表标签

1.人事部

2.市场部

3.采购部

a.人事部

b.市场部

c.采购部

罗马数字

i.采购部

ii.人事部

iii.市场部

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

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

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

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

** 代码

<ol>

</ol>

（3）无序列表标签

（特殊符号）采购部

（特殊符号）人事部

（特殊符号）市场部

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

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

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

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

** 代码

<ul>

</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）使用表单标签实现数据提交到服务器上这个过程

（3）form 标签：如果写表单，首先定义表单的范围

* 属性

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

** method：表单的提交方式（有很多种，常见的有两种 get和post）

*** 代码

** get和post提交，在默认情况下，提交方式是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="button"/>

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

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

第八个：下拉选择输入项

* <select>

</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、其他的标签的使用

（1）pre：原样输出

p：段落标签

s：删除线

u: 下划线

b：加粗

i：斜体

（2）div : 自动换行

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>

javaweb-html快速入门

相关推荐

ansible入门

入门前端之HTML

Python ftplib

YY一下如何快速学习这本书？

javascript入门，4

javascript 入门 code，1

基于PHP的cURL快速入门

使用Html Agility Pack快速解析Html内容