html基础知识总结_静态html和动态html-CSDN博客

本文链接：https://blog.csdn.net/weixin_44853798/article/details/128216539

组成：

首先，我们需要了解下web前端由哪些组成：

1. 页面结构：html、Servlet、jsp（Java Server Page）=html+java

2. 页面样式：css（Cascading Style Sheet，层叠样式表）

3. 页面交互：js（javascript）、jQuery、AJAX

一. 背景

1.1、软件系统结构：

C/S结构：Client-Server（客户端-服务器结构），如QQ、WeChat、LOL、淘宝APP。“胖”终端，对终端要求要高一些；维护相对复杂，服务器和客户端都需要更新和维护；安全性强。

B/S结构：Broswer-Server（浏览器-服务器结构），如学校官网、淘宝网、JD网站等。“瘦”终端，对终端要求要低一些；维护相对简单，只需要更新和维护服务器；安全性低一些。

1.2 动态网站和静态网站：

静态网站：不存在数据交互的网站，一般就是使用html静态页面开发。

动态网站：存在数据交互的网站，如淘宝网，比如使用jsp技术开发的网站。（php、.net(C#、asp)）

二.DOM树

2.1 概念：

HTML：Hyper Text Markup Language，超文本标记语言。1993年正式提出，2013提出了html5。

DOM：Document Object Model，文档对象模型。

2.2 DOM树：

2.3 HTML的结构：

2.4 HTML的语法：

标签：带有特殊含义的网页标记元素。（由W3C组织规定的标准）

基本格式：<标签名>标签体</标签名>

分类：

带有标签体的标签：比如<head></head>

有不带标签体的：比如<br>、<br/>

原则上标签应该是成对出现，有特例（<br>，<hr>）。

一个标签可以有多个属性，属性值必须使用双引号引起来，不同属性之间使用空格分隔开。如果一个标签中出现多个同名属性，那么会以第一次的属性值为准。

标签支持大小写，语法比较弱，习惯上小写。

三. HTML常见标签：

3.1 文本标签：

3.1.1、标题标签

h1/h2/h3/h4/h5/h6 内置了6个标题格式。可以直接使用。

3.1.2 水平分割线：

hr标签：<hr>、<hr/>（<HR>、<HR/>、<Hr>、<hR/>原则上都是正确写法，但是不推荐）

3.1.3 段落标签：

P标签：自动换行，设置默认的行间距和字体。

3.1.4 上标下标：

sup：

sub：

3.1.5 换行：

br：<br>或<br/>

3.1.6 原样输出：

pre：按照预定义的格式输出。保留文本中原样的空格、\t、\r的效果。

3.1.7 有序列表：

<ol>

</ol>

3.1.8 无序列表：

<ul>

......

</ul>

3.1.9 自定义列表：

<dl>

<dd>计算机学院</dd>

<dd>计算机科学与技术</dd>

</dl>

3.1.10 行标签和块标签：

行标签（内联标签）span：内容有多宽，在页面就占用多宽距离。

块标签div：始终要占满整行空间。

3.1.11 其他常用文本标签：

加粗：strong

倾斜：em

字体：font

颜色RGB：Red-Green-Blue，颜色值#000000-#FFFFFF，颜色值可以简写，如#000000可以写成#000、#FFFFFF可以写成#FFF。

3.2 字符实体：

空格、<、>、版权等字符实体需要掌握。

3.3 多媒体：

音视频：

属性：src-音视频的路径，hidden-音视频的隐藏与显示，默认取false。

元素的飘动：

marquee标签：

direction：飘动的方法（left、right、up、down）

loop：循环的次数（整数）

scrollamount：循环的速度（整数）

3.4 超链接：

3.4.1 跳转：

从一个页面跳转到另外一个页面。

href：指的是要跳转的目标位置（可以是互联网页面、可以是自定义页面、还可以是本地文件）；如果不希望页面跳转，值直接写#。

target：取值_blank——在新的页面打开目标页面；

取值_self——在当前页面打开目标页面（默认值）；

取值_parent——在父页面的窗口跳转到目标位置

取值_top——

取值_search——

3.4.2 锚链接：

在一个页面中，从一个位置跳转到另外一个位置。

当前位置：<a href=”#top”>返回顶部</a>

目标位置：<a name=”top”>顶部</a>

3.4.3 功能性链接：

QQ、MSN、邮箱？

3.5 图像：

3.5.1 img标签

3.5.2 图片链接

a和img的混合使用。

3.6 表格：

3.6.1 表格的基本格式:

<table>

<tr>

......

</tr>

<tr>

......

</tr>

<tr>

......

</tr>

......

</table>

3.6.2 多个tbody：

<table>

<thead>表格的标题</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

3.7 表单：

3.7.1 form：

action（请求的路径）、method（请求方式get/post）、id、name、class......

get和post的区别：

get：把input输入框中的内容全部显示在浏览器的url中。不安全，容易泄露数据。能传输的数据量比较小。

post：不会把输入框的内容显示在url中，安全，不会泄露数据。能够传输的数据量比较大，对于保密性比较强或数据量比较大的操作，使用post。

get/post可以使用大写（GET/POST）。

3.7.2 input：

type属性——

text文本

password密码

submit提交

reset取消

file文件

button按钮、控件

radio单选框

checkbox复选框

hidden隐藏

email邮件

date

datetime

datetime-local

image

color

1、text/password/emai/submit/reset：

2、单选框radio：

3、复选框checkbox：

4、select标签：

5、文本域textarea：

6、按钮button：

课堂练习：各位可以将所学内容绘画出下列效果。

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>课堂练习-注册表单</title>
	</head>
	<body>
		<form action="#" method="post">
			<table border="1" cellspacing="0" cellpadding="8">
				<tr>
					<td width="100"><label>用户名：</label></td>
					<td width="400"><input type="text" size="22" placeholder="请输入用户名..."/></td>
				</tr>
				<tr>
					<td><label>密码：</label></td>
					<td><input type="password" size="22" placeholder="请输入密码..."/></td>
				</tr>
				<tr>
					<td><label>性别：</label></td>
					<td>
						<input type="radio" name="sex" value="1" checked="checked"/>男
						<input type="radio" name="sex" value="0"/>女
						<input type="radio" name="sex" value="-1"/>保密
					</td>
				</tr>
				<tr>
					<td><label>爱好：</label></td>
					<td>
						<input type="checkbox" name="hobby" value="1"/>游泳
						<input type="checkbox" name="hobby" value="2" checked/>篮球
						<input type="checkbox" name="hobby" value="3"/>排球
						<input type="checkbox" name="hobby" value="4"/>其他
					</td>
				</tr>
				<tr>
					<td><label>城市：</label></td>
					<td>
						<select name="city">
							<option value="2">南昌</option>
							<option value="1" selected>北京</option>
							<option value="3">武汉</option>
							<option value="4">上海</option>
							<option value="5">广州</option>
						</select>
					</td>
				</tr>
				<tr>
					<td><label>靓照：</label></td>
					<td><input type="file" name="photo"/></td>
				</tr>
				<tr>
					<td><label>个人简介：</label></td>
					<td><textarea cols="50" rows="6" name="introduction">大家好，我叫XXX......</textarea></td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit" value="注册"/>
						<input type="reset" value="取消"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>