HTML基础

最新推荐文章于 2022-11-21 13:26:40 发布

Jyann~

最新推荐文章于 2022-11-21 13:26:40 发布

阅读量248

点赞数

分类专栏：网页基础文章标签： html基础

本文链接：https://blog.csdn.net/qq_34569497/article/details/83650845

版权

网页基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文内容是根据毕晓东老师的视频教程总结而得。

1.概述&演示

Html内容：

Html是超文本标记语言的简写，是最基础的网页语言（逻辑性较低）。
Html是通过标签来定义语言，代码都是由标签组成
Html代码不用区分大小写
Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。
头部分是给html页面增加一些辅助或者属性信息，里面的内容会最先加载。
体部分是真正存放页面数据的地方。

结果：

2.标签的操作思想

操作思想：为了操作数据，都需要对数据进行不同标签的封装。通过标签中的属性对封装的数据进行操作。标签就相当于一个容器。对容器中的数据进行操作，就是在不断的改变容器的属性值。

多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
属性与属性值之间用=号连接，属性值可以用双引号或单引号或者不用引号，一般都用双引号。或公司规定书写规范
格式：<标签名属性名=”属性值”> 数据内容 </标签名>
<标签名属性名=”属性值”/>
标签不能使用数字表示，如果有特殊<>需要使用转义符号：<表示<；>表示>

标签要么有自己的闭合标签（<font></font>），要么在标签内闭合（<br/>）

3.常用工具

DW(DreamWeaver):专门制作网页布局，可以自动提示标签

设计视图：

可以在页面直接写文字设置颜色等属性，然后自动生成html

Eclipse中的创建javaee视图：里面插件，可新建->other->aptana projects->Default Web Project->创建项目名称->加入JS的类库（ext、jquery等）->finished，然后就可以操作自己的html页面

4.列表标签

注释标签

列表标签：<dl>

分为上层项目：<dt></dt>和下层项目：<dd></dd>，dd标签封装的内容是会自动缩进的

示例：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

dl标签：

<dl>

</dl>

</body>

</html>

结果：

有序和无序的项目列表：

有序：<ol>

无序：<ul>

无论有序还是有序，条目的封装用的都是<li>，而且它们都有缩进效果

示例：

<li>无序项目列表</li>

</ul>

结果：

ul的属性type的属性值：circle空心圆，disc实心圆，square实心矩形

有序：

示例：

<ol>

<li>无序项目列表</li>

</ol>

结果：

type属性可以设置字母排序，默认数字排序

5.图像标签

图像标签：<img>

例：<img src=”1.jpg” align=”middle” border=”3” alt=”图片说明文字”/>

align:定义图片的排序方式；

border:设置图像的边框；

src：连接一个文件

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

结果：

图像地图：<map>

应用：当要在图像中选取某一部分作为连接的时候。如，中国地图每个省所对应的区域

点击某个图片就链接到某个网站。

6.表格标签

组成：

标题标签：<caption>，给表格提供标题
表头标签：<th>，一般对表格的第一行或者第一列进行格式化，就是粗体显示。不常用。
行标签：<tr>
单元格标签：<td>，加载在行标签的里面，先有行再在行里加入单元格。
表尾标签：<tfoot></tfoot>

表格标签用于格式化显示数据。

cellpadding：单元格内边距，单元格内容距离表格边框距离，如下图2位置

cellspacing：单元格之间的距离，如下图1位置

colspan=””合并多列

rowspan=””合并多行

<table>

</table>

示例：

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>zhangsan</td>

</tr>

<tr>

<td>wangwu</td>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

结果：

7.超链接_1

两种用法：

一：超链接<a href=””></a>

示例：<a href="http://www.sina.com.cn" target="_blank">新浪</a>

href：可以是url，也可以是本地文件（文件或图片）。如果不写任何东西，解析时是按照默认协议(file协议)来解析该值，默认打开该页面所在的目录；指定为http协议后才会以该协议进行跳转到指定网址；如果指定mailto:协议会打开系统默认的邮件；

href打开本地文件：

结果：打开本地图片

如果指定mailto:协议会打开系统默认的邮件：

结果：

打开视频地址并进行下载（存在问题：公共协议，在任何浏览器都能下载，所以由于迅雷限制可能不能下载）：

更改后：thunder:是迅雷自定义的协议，然后将后面的文件名加密了，打开时回去本地找是不是有安装该软件，如果安装就能进行解析该文件

让超链接被点击后没有默认的点击效果：

作用：可以自定义超链接的效果

即取消超链接的效果：<a href=”javascript:void(0)”>超链接</a>

然后就可以在自己的onclick事件中处理自己的动作：

target：指定在哪个窗口或者帧中打开。_blank表示在新窗口打开

8.超链接_2

二：定位标记<a name=””>

一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷。

注：定位标记要和超链接结合使用才有效

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<br/>

<br/>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>zhangsan</td>

</tr>

<tr>

<td>wangwu</td>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

<a href="#top">回到顶部位置</a>

<a href="#center">回到中间位置</a>

</body>

</html>

9.框架

框架标签：<frameset>，把一个窗体分割成若干个部分

注：框架标签不可以放到<body>中，一般为了代码的可读性，会到<head>和<body>之间。

示例：

这段代码需要已经存在的三个html页面，1.html 2.html 3.html

frameDemo.html:

<!DOCTYPE html>

<html>

<head>

<title>frame示例</title>

</head>

</frameset>

</frameset>

<body>

</body>

</html>

left.html:

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

left.html 左边frame

<h3>左边栏链接</h3>

</body>

</html>

解析：此地的target="right"用于指定超链接内容显示的位置，属性值为frameDemo.html的frame的name值

right.html:

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<h1>内容显示区域</h1>

</body>

</html>

bottom.html:

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

bottom.html 底部frame

</body>

</html>

结果：未点击超链接的效果：

点击超链接后：内容显示在了对应的位置

10.画中画标签

示例：

<!DOCTYPE html>

<html>

<head>

<title>iframe画中画标签</title>

</head>

<body>

</body>

</html>

结果：在页面任意显示自定义的区块

框架标签现在不是很常用，布局都用div+css+table实现了，而框架很少用了。

很多人会利用这个标签，加入一些恶意的内容入侵别人的电脑，或者加入各种广告。

11.表单组件-input

表单标签：<form>

表单标签是最常用的标签，用于与服务器端的交互

<input>：输入标签，接收用户输入信息

其中type属性指定输入标签的类型：

文本框text。输入的文本信息直接显示在框中
密码框password。输入的文本以原点或者星号的形式显示
单选框radio。如性别选择。单选按钮要可能选择必须分组（name=””）；如果要只能单选时，组的属性值必须一致（name=sex）；checked=”checked”表示默认被选中
复选框checkbox。如兴趣选择
隐藏字段hidden在页面上不显示，但在提交的时候随其他内容一起提交
提交submit。提交表单的内容，没有指定服务端，数据提交到当前页面，数据以？参数=XX表示
清除表单reset。清除表单已输入的内容
图片组件image。加入一个图片，此图片具备提交效果
选择文件file。文件选取框
选择按钮botton。reset和submit和file都有默认处理方式，botton没有默认处理方式

表单如果要向服务端提交数据，每个属性都必须有name和value属性

<!DOCTYPE html>

<html>

<head>

<title>form表单</title>

</head>

<body>

<form>

输入名称：<input type="text" name="user" value=""/><br/>

输入密码：<input type="password" name="psw" value=""/><br/>

选择性别：<input type="radio" name="sex" value="nan"/>男

选择技术：<input type="checkbox" name="tech" value="java"/>java

<input type="checkbox" name="tech" value="php"/>php

<input type="checkbox" name="tech" value="html"/>html

选择文件：<input type="file" name="file" value=""/>选择文件<br/>

一个图片：<input type="image" src="imgs/1.jpg" name="img" value=""/><br/>

隐藏组件：<input type="hidden" name="myke" value="myval"/><br/>

button按钮：<input type="button" name="mybtn" value="按钮" onclick='alert("按钮生效")'/><br/>

</form>

</body>

</html>

结果：

12.表单组件-select&textarea

选择国家：

</select><br/>

结果：

写个人简介：

个人简介：<textarea name="myke"></textarea><br/>

结果：显示较大的文本域

13.表单格式化

使用table进行格式化

<form>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

<input type="radio" name="sex" value="nan"/>男

<input type="radio" name="sex" value="nv"/>女

</td>

</tr>

<tr>

<td>

<input type="checkbox" name="tech" value="java"/>java

<input type="checkbox" name="tech" value="php"/>php

<input type="checkbox" name="tech" value="html"/>html

<input type="checkbox" name="tech" value="css"/>css

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

</select>

</td>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

</table>

</form>

结果：

13.GET和POST区别

通过action指定服务端提交的位置

action=”提交的地址”

method=””提交的方式

Get提交方式：

package com.vnb.javabase.base.regex;

import java.io.IOException;

import java.io.InputStream;

import java.io.PrintWriter;

import java.net.ServerSocket;

import java.net.Socket;

public class RegServer {

public static void main(String[] args) {

ServerSocket ss;

try {

ss = new ServerSocket(9090);

Socket s = ss.accept();

System.out.println(s.getInetAddress().getHostAddress());

InputStream is = s.getInputStream();

byte[] buf = new byte[1024];

int len = is.read(buf);

System.out.println(new String(buf,0,len));

//数据获取后，在页面上打印注册成功

PrintWriter pw = new PrintWriter(s.getOutputStream());

pw.println("<font color=‘green’ size='7'>注册成功</font>");

s.close();

ss.close();

} catch (IOException e) {

e.printStackTrace();

}

结果：由于使用的springmvc没有直接打印注册成功

提交地址栏：http://localhost:9090/?user=sdfa&psw=f&sex=nv&tech=php&tech=html&file=&country=cn&myke=af&sub=%E6%8F%90%E4%BA%A4%E6%95%B0%E6%8D%AE

请求头：

0:0:0:0:0:0:0:1

GET /?user=sdfa&psw=f&sex=nv&tech=php&tech=html&file=&country=cn&myke=af&sub=%E6%8F%90%E4%BA%A4%E6%95%B0%E6%8D%AE HTTP/1.1

Accept: application/x-ms-application, image/jpeg, application/xaml+xml, image/gif, image/pjpeg, application/x-ms-xbap, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, */*

Accept-Language: zh-CN

User-Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Win64; x64; Trident/6.0)

UA-CPU: AMD64

Accept-Encoding: gzip, deflate

Host: localhost:9090

Connection: Keep-Alive

Post方式：

提交地址栏：http://localhost:9090/

请求头：

0:0:0:0:0:0:0:1

POST / HTTP/1.1

Accept: application/x-ms-application, image/jpeg, application/xaml+xml, image/gif, image/pjpeg, application/x-ms-xbap, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, */*

Accept-Language: zh-CN

User-Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Win64; x64; Trident/6.0)

Content-Type: application/x-www-form-urlencoded

UA-CPU: AMD64

Accept-Encoding: gzip, deflate

Host: localhost:9090

Content-Length: 110

Connection: Keep-Alive

Cache-Control: no-cache

user=sdf&psw=sdf&sex=nv&tech=html&tech=css&file=&country=cn&myke=asdf&sub=%E6%8F%90%E4%BA%A4%E6%95%B0%E6%8D%AE

分析GET请求和POST请求的区别：

GET提交，提交的信息都显示在地址栏中；而POST提交，提交的信息不显示在地址栏中
GET提交，对于敏感的数据信息不安全；POST提交，对于敏感信息安全
GET提交，对于大数据不行，因为地址栏存储体积有限；POST提交，可以提交大体积数据
GET提交，将信息封装到请求消息的请求行中；POST提交，将信息封装到请求体中
服务端的区别：如果出现将中文提交到Tomcat服务器，服务器端默认会用iso8859-1进行解码，就会出现乱码。通过iso8859-1进行编码，再用指定的中文码表解码即可。这种方式对GET提交和POST提交都有效。但是对于POST提交方式提交的中文，还有另一个解决方法，就是直接使用服务端一个对象request对象的setCharacterEncoding方法就可直接设置指定的中文码表即可将中文数据解析出来。这个方法只对请求体中的数据进行解码。
综上所述：表单提交，建议使用POST提交

14.服务端GET和POST区别

解码：用乱码后的你好去进行iso8859-1进行解码，得到你好的源码，然后用指定的中文码表解码，从而得到你好。（这种方式GET提交和POST提交通用）

服务端的区别：如果出现将中文提交到Tomcat服务器，服务器端默认会用iso8859-1进行解码，就会出现乱码。通过iso8859-1进行编码，再用指定的中文码表解码即可。这种方式对GET提交和POST提交都有效。但是对于POST提交方式提交的中文，还有另一个解决方法，就是直接使用服务端一个对象request对象的setCharacterEncoding方法就可直接设置指定的中文码表即可将中文数据解析出来。这个方法只对请求体中的数据进行解码。

综上所述：表单提交，建议使用POST提交

和服务端交互的三种方式：