web前端作业

最新推荐文章于 2025-05-10 23:30:34 发布

原创最新推荐文章于 2025-05-10 23:30:34 发布 · 535 阅读

1 ·

CC 4.0 BY-SA版权

本文深入讲解前端开发核心知识，涵盖HTML、CSS、JavaScript基础，包括标签语义、表单提交、DOM操作及事件驱动等内容，适合初学者及进阶者巩固前端技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2020/02/24随堂笔记

在这里插入图片描述

复习：
完整前端知识整理思维导图：
在这里插入图片描述

HTML

什么是HTML？

本质：超文本标记语言，表现如文字、视频、音频程序等复杂元素
什么是标签？

标签组成：标签名、属性名（名称值对的形式）、内容
属性类似是给这个标签的内容加了个容器（装备），让标签具有特殊能力

<a href="https://www.baidu.com">百度</a>

重要标签的说明

1.表格的标签 table thead tr th tbody tr td

<table border="1"> 
	<thead> 
		<tr>
 			<th>表头</th> 
		</tr> 
	</thead> 
	<tbody>
		<tr> 
			<td>内容</td> 
		<tr> 
	</tbody> 
</table>

表单的标签 form
action：submit操作执行请求的地址
method：指定请求的类型get/post 注意两者区别（笔试题中经常）

 1. form表单提交不一定通过submit提交，可以通过Ajax请求序列化表单（serialize）方式完成表单数据的提交 查jquery API。
 Ajax序列化就是form的数据构建为名称值对的字符串统一提交到后台。理解同步与异步问题
 2. 通过表单form提交和Ajax提交方式原理是完全不一样的设计方式

表单元素标签
通过submit提交，浏览器会把表单元素以名称值对的形式提交给服务器
```
<input>:type(text,password,radio,checkbox,hidden) 
<select> <option value="html">内容</option>//提交value值 </select> 
<textarea> 
```
form理解为一个数据的集合（组）
一个页面上可以有多个form表单
Ajax请求，可以不要求有form存在

4.标签的语义

 H1/H2/H3 表示大纲级别，类似word标题
 div/span/p表示布局

注：使用带语义的标签可以让搜索引擎快速的进行收录
虽然不同的标签也许能够达到相同的显示效果，但是强烈建议使用语义化标签+CSS样式去控制
5.关于浏览器

 解析HTML、CSS、JavaScript、图片、音视频等内容的运行环境。
 IE/Firefox/chrome/Opera,其中Chorm/Firefox称之为标准浏览器，最符合W3C标准技术规范。
 不同的浏览器是有细微的差异，考虑兼容性问题。

CSS

在这里插入图片描述

层叠样式表：元素样式可以通过多种方式进行叠加
HTML元素本身不具备样式，但是在不定义样式的情况下，不同的标签也表现出不同的显示样式，因浏览器对于不同标签是有默认样式的。

如何书写定义元素样式
外部样式定义页面样式，减低代码耦合度，让设计师设计页面
简单的理解：可以让不同人不在同一个页面修改文件，各司其职
需要掌握的内容
1. div+css布局基础，充分理解盒子模型 box-sizing的使用
2. 样式选择器ID(#)，Class(.),标签(div a span)

JavaScript

对于JavaScript认识
JavaScript的作用
1. 业务逻辑的处理
2. 对于DOM树进行操作：通过事件驱动（DOM树中元素的增删查改，特别是：该内容，改样式）
需要掌握的内容
Js是弱类型语言，且书写比较随意。
1. 通过var定义关键字
2. 关于Js判断条件
  1，数字0和非0，表示false和true
  2，有3种分支结构
  3，三目运算符熟练掌握，本质上是一个表达式