华清远见-重庆中心-JAVA前端Html阶段技术总结

最新推荐文章于 2024-06-12 11:13:48 发布

离别丶

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量131

点赞数

文章标签：前端 html java

本文链接：https://blog.csdn.net/qq_56394661/article/details/128395567

版权

应用程序的分类

客户端/服务器

Client / Server CS模式

用户需要下载安装一个客户端才能使用。如通讯工具、网游、购物软件等。

特点：功能丰富，安装略微繁琐，需要更新，不同平台，软件不同

浏览器/服务器

Browser / Server BS模式

用户只需要一个流量拿起就能使用。如各种商业网站、XXX系统等。

特点：功能较独立的客户端略简单，无需下载安装，无需更新，平台无关。

为什么要学习WEB前端基础

由于JavaEE是BS模式，必须要使用浏览器渲染页面，程序都需要页面呈现数据。

所以后台开发，需要知道如何将数据显示在页面中。

学习WEB基础，就是学习开发网页。

网页是一个文件，后缀名为.html

浏览器

用于解析页面的平台。

名称
谷歌浏览器Chrome
火狐浏览器FireFox
微软IE/Edge
IOS Safira

前端自学网站

菜鸟教程

W3School

编写前端页面的工具

软件	下载
HBuilder	https://www.dcloud.io/hbuilderx.html
VSCode	https://code.visualstudio.com/
Sublime	http://www.sublimetext.com/

HTML

Hyper Text Markup Language 超文本标记语言

超文本：超级文本/超链接文本，超越了文本的限制，如多媒体文件、超链接等。

标记：也可以称为标签，用<>括起来的一个特定单词，整体称为标记或标签，分为单标签和双标签。

单标签：<单词/>
双标签：<单词></单词>

标签的类型

块级元素，占页面中的一整行。block
行内元素，占一行中的一部分。inline

标签的属性

标签第一个中括号中，使用 属性=“值” ，让某个标签拥有特定属性。

如<meta charset="utf-8">中，charset="utf-8"就是meta标签的属性

chartset称为属性名，utf-8称为属性值。

如果有多个属性，使用空格隔开。

如<div id="xxx" class="xxx"></div>。

网页基本结构

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        网页主体
    </body>
</html>

创建一个文本文档，将以上内容进行保存，文档的后缀名改为.html，用浏览器就能解释运行。

HTML注释

<!-- HTML中的注释 -->

页面种显示颜色的方式

颜色单词，如red、blue、green等
颜色RGB。R-RED,G-GREEN,B-BLUE。rgb(255,0,0)表示红色，数字范围[0,255]，值越大，对应的颜色越深
颜色的十六进制RGB。#FF0000表示红色，相当于RGB(255,0,0)

资源的路径

绝对路径：资源的完整地址。如在线图片地址或带有盘符的地址
相对路径：从当前页面出发，找到图片所在位置
- 使用“…/”跳出当前目录
- 使用"xxx/"进入xxx目录

常用标签

文字

标签名	作用
h1~h6	块级元素。标题。文字加粗，1最大，6最小。通常用h1~h3
p	块级元素。段落。
span	行内元素。
pre	块级元素。预处理标签。
i	行内元素。倾斜。
u	行内元素。下划线。
b	行内元素。加粗。
sub	行内元素。文字下标。
sup	行内元素。文字上标。
	以上标签都是双标签

Emojo表情

用法：复制表情对应的十进制或十六进制的代码，最好使用span显示

<!--十进制 &#特定值;-->
<span>&#11088;</span>
<!--十六进制 &#x特定值; -->
<span>&#x231B;</span>

阿里巴巴矢量图库

图片img

单标签，行内元素

<img src="图片路径" alt="无法显示图片时显示的文字" title="鼠标悬停时的提示文字" width="宽度" height="高度">

列表ul/ol/li

双标签，块级元素，li是ul或ol的子标签

无序列表ul

默认每一项前用实心圆符号修饰

通过type属性修改符号

disc 默认，实心圆
circle 空心圆
square 正方形
none 去掉修饰符号

<ul>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
</ul>

有序列表ol

默认每一项前用自增数字修饰

通过type属性修改符号

a/A 英文字母
i/I 罗马符号
1 默认数字
none 去掉修饰符号

<ol>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
</ol>

表格table

表格中的标签	作用
tr	表格中的行
td	每行中的单元格
th	特殊的单元格，表头，文字加粗居中

td可以通过

colspan=“3”属性实现跨3列

rowspan=“2”属性实现跨2行

<table border="1" >
    <tr>
        <th></th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr>
        <td rowspan="2">上午</td>
        <td>语文</td>
        <td>数学</td>
        <td>语文</td>
        <td>数学</td>
        <td>语文</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>语文</td>
        <td>数学</td>
        <td>语文</td>
        <td>数学</td>
    </tr>
    <tr>
        <td colspan="6" align="center">午休</td>
    </tr>
    <tr>
        <td rowspan="2">下午</td>
        <td>体育</td>
        <td>音乐</td>
        <td>自然</td>
        <td>科技</td>
        <td>美术</td>
    </tr>
    <tr>
        <td>音乐</td>
        <td>体育</td>
        <td>科技</td>
        <td>美术</td>
        <td>自然</td>
    </tr>
</table>

多媒体

音频audio

<audio controls autoplay loop muted >
	<source src="xxx.mp3" type="audio/mpeg">
</audio>

视频video

<video width="320" height="240" controls autoplay loop muted >
	<source src="xxx.mp4" type="video/mp4">
</video>

controls开启控制器

autoplay自动播放

loop循环

muted静音

谷歌浏览器，默认不允许自动播放非静音视频

水平线hr

<hr color="颜色" size="粗细" width="宽度">

换行br

<br>

a标签

行内元素，双标签。

超链接

可以通过a标签访问任何一个地址

<a href="资源路径" target="">点击跳转</a>

target可以控制要访问的资源在哪里打开

_self 默认。在当前页面打开
_blank 在新页面打开
_parent 在父页面打开
指定的name名
- 如果是锚点的name，通过“#name“访问
- 如果是iframe的name，通过"name"访问

锚点

可以通过a标签定义锚点和访问锚点，实现当前页面的快速定位

1.设置锚点

<a name="锚点名"></a>

2.访问锚点

<a href="#指定的锚点名">点击访问锚点</a>

浮动框架iframe

<a href="xx" target="main">xx</a>
<a href="yy" target="main">yy</a>

<iframe name="main" src="页面的路径" width="宽度" height="高度">
    
</iframe>

marquee标签

<!-- 
direction="left/right/up/down"朝向。默认left
behavior=""行为。scroll默认重复  slide移动到底后停止  alternate往复
scrollamount=""移动速度。
-->
<marquee scrollamount="10" direction="right" >
   xxxx
</marquee>

表单和表单元素

表单form

双标签，用于接收用户输入的数据

<form action="表单提交的最终目的路径" method="表单提交方式">
    
</form>

form表单有两个重要的属性

action:设置提交路径
- 可以是一个页面，也可以是后台请求映射
method:设置提交方式
- 默认值为get，表示使用get方式提交，提交的数据会暴露在浏览器地址栏中
- 设置为post方式，提交的数据不会暴露在浏览器地址栏中

表单元素

定义在表单form标签中的标签

常用表单元素	作用
input	单标签，行内元素。通过修改关键属性type，变化为不同的组件
select	双标签，行内元素。下拉菜单
textarea	双标签，行内元素。文本域

input标签type属性的值	作用
text	文本框
password	密码框
radio	单选按钮
checkbox	复选框
date	日历组件
number	数字组件
hidden	隐藏域
file	上传文件
image	图片提交按钮
submit	提交按钮
reset	重置按钮

表单元素中的属性	作用
name	用于提交数据时设置提交的参数名
value	用于设置组件的默认值
checked	用于设置单选按钮和复选框的默认选中
placeholder	用于设置输入框的提示文字
required	用于设置输入框为必填项
selected	用于设置下拉菜单默认选中
disabled	用于设置某个组件为不可用状态
readonly	用于设置某个组件为只读状态
max/min/step	number独有，用于设置最大值、最小值和步长
rows/cols/	textarea独有，用于设置文本域的行数和列数