当前位置：首页 > article >正文

【JavaWeb】前端基础

article 2026/2/13 11:39:41

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><!-- <meta charset="GBK" /> --></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> = 95&lt;1010&gt;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中的实体：&lt; (less than)小于&gt; (greater than)大于&le; (less equal)小于等于&ge; (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中的实体：

&lt; (less than)小于
&gt; (greater than)大于
&le; (less equal)小于等于
&ge; (greater equal)大于等于

<span> </span>不换行的块标记

<a> </a>超链接

href地址
target _self 在本窗口打开_blank 在一个新窗口打开_parent 在父窗口打开_top 在顶层窗口打开

<div> </div>层

表格

<html><title>表格</title><body><table border = "1" width="600" cellspacing="0" cellpadding="4"><tr><th>姓名</th><th>成绩</th></tr><tr align="center"><td>张三</td><td>100</td></tr></table><hr/><table border = "1" width="600" cellspacing= "0" cellpadding="4"><tr><th>名称</th><th>单价</th><th>数量</th><th>小计</th><th>操作</th></tr><tr align="center"><td>苹果</td><td rowspan="2">5</td><td>20</td><td>100</td><td>删除</td></tr><tr align="center"><td>香蕉</td><td>20</td><td>100</td><td>删除</td></tr><tr align="center"><td>西瓜</td><td>5</td><td>20</td><td>100</td><td>删除</td></tr><tr align="center"><td>总计</td><td colspan="4">300</td></tr></table></body>
</html><!-- table中有如下属性border 表格边框的粗细width 表格的宽度cellspacing 单元格间距cellpadding 单元格填充-->

表单

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内容写在新文件中。