【JavaWeb】前端基础

饭宝 · 2025-4-2 11:06:52

JavaWeb

前端三大件：HTML（重要用于网页主体结构的搭建），CSS（页面美化），JavaScript（重要用于页面元素的动态代理）
1. HTML

1.1 html概述

HTML：Hyper Text Markup Language超文本标记语言。
html是表明型语言，不是编译型语言。浏览器是容错的。
标签是通过一组尖括号+标签名的方式来界说的。标签有单标签和多标签。
标签体：开始标签…结束标签
html文件是浏览器负责剖析和展示的。
浏览器通过网络访问服务器上的html文件（向服务器发送请求），服务器将html文件以相应的形式发送给浏览器。浏览器剖析文件。
1.2 html代码结构

代码的基础结构：

html根标签：<html> </html>
html跟标签下有两个一级标签：
<head> </head>头标签署义不直接展示在页面主题上，但是有很紧张的内容，如：字符集，css引入，js引入，其他。
<body> </body>界说要展示到页面主题的标签。

html文档的声明：<!DOCTYPE html>
1.3 专业词汇

标签 tag：一对<>
属性 attribute：一般写在开始标签中
文本 text：开始标签和结束标签中的内容
元素 element：开始标签+属性+文本+结束标签称之为一个元素

1.4 通用语法

根标签有且只能有一个
无论是双标签还是单标签都需要精确关闭
标签可以嵌套但不能交织嵌套
表明语法为 ,留意不能嵌套
属性必须有值，值必须加引号,H5中属性名和值相同时可以省略属性值
HTML中不严酷区分字符串使用单双引号
HTML标签不严酷区分大小写,但是不能大小写混用
HTML中不答应自界说标签名,强行自界说则无效

1.5 HTML基础标签

<html>
<head>
<title> 这是我的第一个网页 </title>
</head>
<body>
hello world!! <br/>
这是我的第一个网页
<p> 这是一个段落 </p>
<p> 这是第二个段落 </p>
<img src = "imgs/test.jpg" width="510" height="660" alt = "这里是一张图片" />
<h1> 标题1 </h1>
武林高手排行榜：
<ol type = "I" start = "3">
<li>扫地僧</li>
<li>萧远山</li>
<li>阿紫</li>
</ol>
人员名单
<ul type = "circle">
<li>乔峰</li>
<li>石头</li>
<li>沙子</li>
</ul>
你<b>好</b><i>呀</i><u>你好</u> <br/ >
H<sub>2</sub>O <br/>
3<sup>2</sup> = 9
5<10
10>5
<span></span>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>
<!--
html页面中由一对标签组成：<html> </html>
<html> 开始标签
</html> 结束标签
title表示网页的标题
可以在meta标签中设置编码方式
<br/> 表示换行 br标签是一个单标签，开始标签和结束标签是同一个。斜杠放在单词后面。
p表示段落标签
img表示图片标签
列表标签 ol有序列表 type显示的类型: A a I i 1 start 表示从*开始
ul type 显示的样式
u表示下划线 b表示粗体 i表示斜体
sub下标
sup上标
html中的实体：
< (less than)小于
> (greater than)大于
≤ (less equal)小于等于
≥ (greater equal)大于等于
span 不换行的块标记
a表示超链接
href地址
target
_self 在本窗口打开
_blank 在一个新窗口打开
_parent 在父窗口打开
_top 在顶层窗口打开
div层
-->

复制代码

html页面由一对标签组成<html></html> <html>开始标签 </html>结束标签
<title> </title> 网站的标题
<meta>中可设置编码方式
<br/> 表示换行，br标签是一个单标签，开始标签和结束标签是同一个，斜杠放在单词后面。
<p> </p>段落标签
<img src = " " />图片标签，其中src可以填入图片的相对路径或绝对路径
<ol> </ol>有序列表标签。type表现的类型: A a I i 1 start 表示从*开始。<li>填入内容</li>
<ul> </ul>无序列表。type表现的样式
<b> </b>粗体，<u> </u>下划线，<i> </i>斜体
<sub> </sub>下标
<sup> </sup>上标
html中的实体：
1. < (less than)小于
2. > (greater than)大于
3. ≤ (less equal)小于等于
4. ≥ (greater equal)大于等于
复制代码
<span> </span>不换行的块标记
<a> </a>超链接
1. href地址
2. target
3. _self 在本窗口打开
4. _blank 在一个新窗口打开
5. _parent 在父窗口打开
6. _top 在顶层窗口打开
复制代码
<div> </div>层
表格
1. <html>
2. <title>
3. 表格
4. </title>
6. <body>
7. <table border = "1" width="600" cellspacing="0" cellpadding="4">
8. <tr>
9. <th>姓名</th>
10. <th>成绩</th>
11. </tr>
12. <tr align="center">
13. <td>张三</td>
14. <td>100</td>
15. </tr>
16. </table>
17. <hr/>
18. <table border = "1" width="600" cellspacing= "0" cellpadding="4">
19. <tr>
20. <th>名称</th>
21. <th>单价</th>
22. <th>数量</th>
23. <th>小计</th>
24. <th>操作</th>
25. </tr>
26. <tr align="center">
27. <td>苹果</td>
28. <td rowspan="2">5</td>
29. <td>20</td>
30. <td>100</td>
31. <td>删除</td>
32. </tr>
33. <tr align="center">
34. <td>香蕉</td>
35. <td>20</td>
36. <td>100</td>
37. <td>删除</td>
38. </tr>
39. <tr align="center">
40. <td>西瓜</td>
41. <td>5</td>
42. <td>20</td>
43. <td>100</td>
44. <td>删除</td>
45. </tr>
46. <tr align="center">
47. <td>总计</td>
48. <td colspan="4">300</td>
49. </tr>
50. </table>
51. </body>
52. </html>
54. 
复制代码
表单

name属性值保持划一,这样才会有互斥的效果;可以通过checked属性设置默认选中的项
input type="checkbox"表示复选框。name属性值建议保持划一,这样将来我们服务器端获取值的时候获取的是一个数组
select 表示下拉列表。每一个选项是option,其中value属性是发送给服务器的值,selected表示默认选中的项
textarea 表示多行文本框(大概称之为文本域),它的value值就是开始结束标签之间的内容
input type="submit"表示提交按钮
input type="reset"表示重置按钮
input type="button"表示普通按钮
1.6 表单标签

表单标签，可以实现让用户在界面上输入各种信息并提交的一种标签，是向服务端发送数据重要的方式之一。

form标签，其内部用于界说可以让用户输入信息的表单项标签
- action，form的属性之一，用于界说信息提交的服务器的所在
- method，属性之一，用于界说信息的提交方式
  - get方式：参数会以键值对形式放在url后以name为key，以value为值举行提交。所以若想提交至服务器，留意设置name和value！！！value基于文本的(type = “text” 或 type = “password”)可以不输入，但是别的必须输入(如单选框，复选框等)。
  - post方式
input标签，重要的表单项标签，可以用于界说表单项
- name，input的属性之一，用于界说提交的参数名
- type，input标签的属性之一，用于界说表单项类型（输入信息的表单项类型）

单选框：<input type = "radio">name一样才会有互斥效果，并且留意写value属性。
复选框：

爱好：<input type = "checkbox" name = "hobby" value = "1"> 篮球
<input type = "checkbox" name = "hobby" value = "2"> 足球 <br/>

复制代码

隐藏域：盼望提交一些特定的信息，但是安全思量，大概是用户操作题目，不盼望该数据发生改变。

<input type = "hidden" name = "id" value = "123">

复制代码

<input type = "text" name = "pid" value = "456" readonly>

复制代码

<input type = "text" name = "pid" value = "456" disable>

复制代码

readonly只读，提交时携带
disable不可用，提交时不携带
文本域textarea个人简介：<textarea name = "self"> </textarea> <br/>
下拉框select：

籍贯：<select name = "pro">
<option value = "1">京</option>
<option>津</option>
<option>冀</option>
<option selected> --请选择-- </option>
</select>

复制代码

提交文件：

上传头像：<input type = "file">

复制代码

1.7 结构标签

<div> </div>
2. css

2.1 css语法

为什么需要css
css的分类：标签样式表，类样式表，ID样式表
css从位置上的分类：嵌入式样式表，内部样式表，外部样式表
- 嵌入式样式表：即将style写在标签<>里面。
- 内部样式表：将style写在<head> </head>中。
- 外部样式表：将css内容写在新文件中。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

【JavaWeb】前端基础

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块