HTML基础复习总结

最新推荐文章于 2025-07-17 16:59:08 发布

原创最新推荐文章于 2025-07-17 16:59:08 发布 · 494 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #css

本文是对HTML基础知识的复习总结，包括HTML的定义、文档结构、标签、表格标签、表单标签及其属性。讨论了form表单的提交方式，强调了语义化标签的使用，并提到了浏览器兼容性和CSS、JavaScript在页面样式和交互中的作用。

HTML基础复习总结

什么是HTML

HTML是一种超文本标记语言，用来描述页面内容的显示方式
是一种纯文本文件以“。html”或者“。htm”为后缀
语法结构如下：

<标签>
内容
</标签>

HTML文档结构的三大元素

< html >元素、< head >元素、< body>元素

什么是标签？

标签包含：

标签包含了标签名、属性、内容
而属性相当于是给标签赋值属性，相当于添加了一些特殊能力
比如：

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

这就让< a>标签具有了href属性能够点击跳转到一个网站

表格标签

标签元素包括：

table
captain 标题
thead 表头 tr td
tbody 表身，具体内容可在里面添加tr td 进行布局
tfoot 表尾

建议：建议书写表格标签时记得把thead ，tbody标签书写进来

表单标签

表单标签的属性

action 属性：操作执行的请求地址
method属性：指定请求的类型 get or post

form表单的几点说明：

① form表单不一定要求使用submit操作实现，可以通过Ajax请求序列化表单（serialize( )) 的方式完成表单数据的提交
② 通过Ajax请求方式提交和form提交数据是两个完全不同的概念。
Ajax提交是有异步同步请求的
③ 通过submit提交浏览器会把表单元素以名值对 的方式提交给服务器

<form action:"index.jsp" method:"post">
...
</form>

④ 深刻理解form中的 < select >、< textarea >等按钮和选框的概念

各个标签的不同语义

譬如：H1/H2/H3标签显示不同大小的字体
div/span/p 标签表示布局样式

使用不同的语义标签显示不同的语义样式，虽然可能不同标签能达到相同的显示效果，
但是建议使用语义化标签+css的样式去设置

例子：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		
		<link rel="stylesheet" type="text/css" href="css/new_file.css" />
		<style type="text/css">
			body{
				overflow-x: hidden; padding: 0px; margin: 0px; overflow: auto; margin-right: 0px;
				 min-height: 100%; min-width: 1090px;background-color: #fff;  
			 	font-family: Microsoft Yahei,微软雅黑,verdana; color: #333;
			} 
		</style>
	</head>

	<body>
</body>
...

浏览器的选择

浏览器就是解析HTML、CSS、Javascript、图片、音频、视频等内容的运行环境
一般的最符合W3C组织定义的浏览器选择：Chrome、火狐、IE 等等

如果没有一个规范的定义，为了迎合不同的厂商的浏览器，程序员将付出沉重的代价。即使如此，每个浏览器也都有略微不同的差异，这是一般开发前都需要注意的问题，要时刻考虑到浏览器的兼容性。

CSS

css：叠层样式表，元素样式可以通过多种方式进行添加。

如何书写定义元素样式

在开发过程中，一般都是通过外链来去定义页面的样式，减低代码之间的耦合，简单的理解就是，可以让不同的人在同一个页面修改文件，代码清晰，明了。

掌握：CSS+DIV布局基础，充分理解盒子模型
使用box-sizing：border-box来设置内容不超过布局
样式选择器：id/class 标签。
id：#
class：.
标签：输入自身名称

Javascript

对于编程语言的认识:

一门成熟的编程语言应该具备:变量、数据类型、运算符、控制语句(顺序结构、分支结构、循环结构)、自成体系的API.
掌握：JavaScript 的作用

业务逻辑处理

对DOM进行操作(DOM: Document Object Model)通过事件驱动页面模型发生变化(DOM树中元素的增删改查，特别是改:改内容，改样式)，JavaScript 能操作DOM的原因在于JavaScript 实现了DOM相关操作的接口，能满足对DOM的操作。

需要掌握的内容

JavaScript是弱类型语言，而且书写是比较随意的。
弱语言体现在变量是没有准确的数据类型定义。通过var关键字定义。

动态类型，随值的变化而变化

<script>

var flag- 'abc';flag= 12;flag- true;
flag= {name : 'Tom'};flag = functionO {
alert("Hello,Javascript");
var age- 20;
varstr-age>-18?'成年" : '未成年';console.log(str);
</script>