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

【JavaWeb】前端基础

news 来源：原创 2025/5/17 15:12:12

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> = 9

		5&lt;10

		10&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>