HTML夏季学习总结1

最新推荐文章于 2024-11-03 20:03:09 发布

旧梦时节

最新推荐文章于 2024-11-03 20:03:09 发布

阅读量873

点赞数 1

文章标签： html css html5

本文链接：https://blog.csdn.net/lqb_zxs/article/details/119153032

版权

文章目录

HTML

1 什么是HTML？

超文本标记语言

2 Html的基本语法

2.1 Html是元素构成的，元素是浏览器渲染的最重要单位。

2.1.1 开始标记+内容+结束标记=元素(element)，单标记自己构成元素

2.1.2 内容可能是其他元素，空元素，文本

2.2 标记

2.2.1 <+标记名称+>

2.2.1.1 在标记语言中带来结构和格式

2.2.1.2 在HTML不区分大小写，推荐使用小写

2.3 属性

2.3.1 属性是在开始标记中

2.3.1.1 修饰元素某种性质

2.3.1.2 属性由属性名称、属性值构成

属性名称是必须的
属性值是可以省略的
属性值可以使用单引号或者双引号界定，但是引号在某些情况是可以省略的。

2.4 元素是可以嵌套的

2.4.1 合理嵌套

2.4.2 反例，不合理嵌套

不合适代码

<input type="checkbox" />
<div>
	<p>
</div>
	</p>

3 标记

3.1 按功能分

3.1.1 显示

按照显示默认的属性是否换行

块标记（block）

可以默认有换行，设置宽度，默认的宽度是父容器的宽度
Div划分
p段落，内容的分段
H（1-6）重要度（数字越小，重要度越高）
列表（清单）

无序列表

有序列表

自定义列表

表格，显示内容，多列，平等的多列，不能自适应折行

Table

Tr
Td/th th标题作用，td是有普通的单元格
合并单元格

Colspan 横向合并

Rowspan 纵向合并

Center
水平线

Hr 分割

行类标记（inline）

没有换行效果，设置宽度没有作用，依照包含内容进行渲染。
Span
I 斜体
B 加粗
Strong 强调

3.1.2 练习：

使用标签完成个人简历
字体选择
标签的语义化
对齐的方式
这个简历是用而写的

3.1.3 传递数据

3.1.3.1 表单与表单域

表单
表单域

输入类
按钮类
选择框
其它文本域

3.2 链接（超级链接）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<base href="http://www.baidu.com" />
	</head>
	<body>
		<a name="top"></a>
		<a href="test02.html">普通链接</a>
		<a href="test02.html">
			<img src="img/01.jpg" />
		</a>
		<a href="mailto:abc@itlaocing.com">邮件链接</a>
		<a href="#top">内部链接</a>
		<a href="test02.html" target="_blank">在新的窗口打开目标页</a>
	</body>
</html>

3.2.1 Href属性设置目标路径

目标路径不一定是一个网页，可以是网络中的任何资源
绝对路径（全称）

http: 协议（网络数据的传输方式）

Ip地址（域名，机器名）定位网络设备的
端口 80 http协议的默认端口
//www.baidu.com:80/index.html

相对路径（简称）

Test01.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<base href="http://www.baidu.com" />
	</head>
	<body>
		<a href="img/01.jpg">普通链接</a>
		<a href="/01.jpg">网站根目录（截至到端口号）</a>
		<a href="./01.jpg">单个点（表示当前目录）</a>
		<a href="../01.jpg">上一级目录</a>
	</body>
</html>

相对与一个路径（当前路径），开始计算目标路径

可以通过base标记设置相对路径的基本路径

3.3 如何在链接中传输数据

3.3.1 通过在目标地址后添加问号，在问号后，加入&符号分开的键值对，向服务后端传递数据

3.3.2 点击链接是一个get请求

3.3.3 客户端（浏览器）向应用服务器传递键值对数据，被称为参数

4 表单与表单域

4.1 Form

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单与表单域</title>
	</head>
	<body>
		<form action="reg.jsp" method="get">
			<input name="userName" value="john" />
			<input value="tom" />
			<input type="password" name="password" />
			<textarea></textarea>
			<br />
			<!-- 选择框 -->
			性别:<input id="sex1" name="sex" type="radio" value="0" checked="checked" />
			<label for="sex1">男生</label>
			<label><input name="sex" type="radio" value="1" />女生</label>
			<br />
			爱好：
			<label><input name="hobby" type="checkbox" value="文艺">文艺</label>
			<label><input name="hobby" type="checkbox" value="体育">体育</label>
			<label><input name="hobby" type="checkbox" value="音乐">音乐</label>
			<label><input name="hobby" type="checkbox" value="文学">文学</label>
			年级：
			<select name="grade" size="10" multiple>
				<option value="1">1年级</option>
				<option value="2">2年级</option>
				<option value="3">3年级</option>
				<option value="4">4年级</option>
			</select>
			<!-- 提交操作 -->
			<input name="1" type="submit" value="login" />
			<input type="image" src="img/01.jpg" value="login" />
			<button>试一试</button>
			
			<input name="p2" type="hidden" value="隐藏的值" />
			<input type="file" />
			<input type="reset" value="reset不是清空" />
			<input name="btn" type="button" value="普通按钮没有提交作用" />
		</form>
	</body>
</html>