【Web前端系列课程（一）】HTML+CSS

老夏 · 发表于 2020-4-15 10:49:26

第五章 HTML标签
5.6 超链接标签

标签	属性	描述
a	href	链接指向的URL地址
a	target	_blank：在新页面中打开。 _self：在当前页面打开。 _parent：这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标_self等效。 _top：这个目标使得文档载入包含这个超链接的窗口，用_top目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="http://www.oldxia.com" target="_blank">点击跳转至老夏学院</a>
</body>
</html>

复制代码

老夏 · 发表于 2020-4-15 14:21:33

第五章 HTML标签
5.7 表格标签

标签	属性	描述
table	border	表格和单元格边框宽度
	width	表格宽度
	height	表格高度
	cellspacing	表格、单元格之间的空白
	cellpadding	单元格内容与单元格之间的距离
caption	无	表格标题
tr	align	left：左对齐内容（默认值） right：右对齐内容 center：居中对齐内容
tr	valign	top：对内容进行上对齐 middle：对内容进行居中对齐（默认值） bottom：对内容进行下对齐 baseline：与基线对齐
th,td	width	单元格宽度
	height	单元格高度
	colspan	横跨的列数
	rowspan	横跨的行数
	align	left：左对齐内容（默认值） right：右对齐内容 center：居中对齐内容
	valign	top：对内容进行上对齐 middle：对内容进行居中对齐（默认值） bottom：对内容进行下对齐 baseline：与基线对齐

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1px" cellspacing="0" height="500px" width="600px">
<caption>老夏学院</caption>
<tr>
<th>序号</th>
<th>类别</th>
<th>课程</th>
<th>讲师</th>
</tr>
<tr>
<td>1</td>
<td rowspan="2">WEB全栈系列课程</td>
<td>HTML+CSS</td>
<td rowspan="2">夏正东</td>
</tr>
<tr>
<td>2</td>
<td>JavaScript</td>
</tr>
<tr>
<td>3</td>
<td>UI设计师</td>
<td>Photoshop</td>
<td>关苗苗</td>
</tr>
<tr>
<td>4</td>
<td>Python全栈系列课程</td>
<td>Django</td>
<td>王凯</td>
</tr>
</table>
</body>
</html>

复制代码

老夏 · 发表于 2020-4-15 15:39:16

第五章 HTML标签
5.8 表单标签

标签	属性	属性值	描述
form	action	URL	表单数据的提交URL
	method	get/post	提交方式post和get，如不写默认是get
	enctype	multipart/form-data	发送到服务器之前应该如何对表单数据进行编码，该表单需要上传文件时，必须填multipart/form-data
	target	_blank _self _parent _top	_blank：在新窗口中打开 _self：在相同的框架中打开（默认） _parent：在父框架集中打开 _top：在整个窗口中打开
input	type（必选）	text	文本框
		password	密码框
		submit	提交按钮
		reset	重置按钮
		radio	单选框
		checkbox	多选框
		file	文件上传框
		hidden	隐藏框
		image	图片按钮，必须有src和width属性
		button	不执行提交操作按钮
		number	定义带有spinner控件的数字字段
		date	定义日期字段（带有 calendar 控件）
	name（必选）		表单名称。当type等于radio时，其name属性必须一致，按照规范要求，value属性必须填写；当type等于checkbox时，其name属性必须一致，并且需要在属性值后面加[]，按照规范要求，value属性必须填写
	value（必选）		表单值
	placeholder		表单提示
	maxlength		表单可输入的最大长度
	size		表单框的可视宽度
	readonly		只读
	disabled		禁用
	max		仅适用于number和date属性，允许的最大值
	checked	true/false	仅适用于radio属性，默认选中
select	name		下拉菜单，注意，多选下拉菜单name的属性值后需要加[]
	multiple		多选下拉菜
	size		多选下拉菜单选项个数
option	value		按照规范要求必须进行填写
option	selected	true/false	仅适用于option标签，默认选中
textarea	name		文本域名称
	cols		文本域内的可见宽度
	rows		文本域内的可见行数
	disabled		禁用该文本域
	maxlength		文本域的最大字符数
	placeholder		文本域提示
	readonly		文本域只读
button			执行提交操作按钮

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
名称：<input type="text" name="user"><br><br>
密码：<input type="password" name="password"><br><br>
出生年月：<input type="date" name="datetime"><br><br>
性别：<label><input type="radio" name="sex" value="0">未知</label>
<label><input type="radio" name="sex" value="1">男</label>
<label><input type="radio" name="sex" value="2">女</label><br><br>
爱好：<label><input type="checkbox" name="interest[]" value="0">足球</label>
<label><input type="checkbox" name="interest[]" value="1">篮球</label>
<label><input type="checkbox" name="interest[]" value="2">羽毛球</label><br><br>
所在城市：<select name="city">
<option value="0" selected>-请选择-</option>
<option value="1">大连</option>
<option value="2">北京</option>
<option value="3">上海</option>
</select><br><br>
个人简历：<input type="file" name="file"><br><br>
个人简介：<br>
<textarea name="abstract" cols="30" rows="10"></textarea><br><br>
<input type="submit" name="submit" value="提交">
<input type="reset" name="reset" value="重置">
</form>
</body>
</html>

复制代码

老夏 · 发表于 2020-4-16 10:47:36

第五章 HTML标签
5.9 内嵌框架标签

标签	属性	描述
iframe	src	在iframe中显示的文档的URL
	width	iframe的宽度
	height	iframe的高度
	name	iframe的名称
	scrolling	是否在iframe中显示滚动条，属性值：yes，no，auto
	seamless	<iframe>看上去像是包含文档的一部分,不用写属性值
	frameborder	规定是否显示框架周围的边框
	srcdoc	规定在<iframe>中显示的页面的HTML内容
	align	规定如何根据周围的元素来对齐此框架

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="http://www.oldxia.com" frameborder="0" width="500px" height="500px" seamless scrolling="yes"></iframe>
</body>
</html>

复制代码

老夏 · 发表于 2020-4-16 15:44:17

第五章 HTML标签
5.10 框架标签

标签	属性	描述
frameset	cols	定义框架集中列的数目和尺寸
frameset	rows	定义框架集中行的数目和尺寸
frame	frameborder	规定是否显示框架周围的边框
	name	规定框架的名称
	noresize	规定无法调整框架的大小
	scrolling	规定是否在框架中显示滚动条，属性值：yes，no，auto
	src	规定在框架中显示的文档的URL

注意，frameset标签不能和body标签同时存在。

示例代码：实现下图页面

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<frameset rows="80,*" frameborder="1" border="1">
<frame src="top.html" name="top">
<frameset cols="170,*">
<frame src="left.html" name="left" norisize>
<frame src="right.html" name="right">
</frameset>
</frameset>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
this is top
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="right.html" target="right">this is left</a>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
this is new right
</body>
</html>

复制代码

老夏 · 发表于 2020-4-16 15:50:23

第五章 HTML标签
5.11 HTML5语义标签

一、使用div布局网站

<div>下面是传统DIV网站布局</div>
<div id="container">
<div id="header"></div>
<div id="section"></div>
<div id="footer"></div>
</div>

复制代码

二、使用HTML5语义标签布局网站

<div>下面是HTML5语义标签网站布局</div>
<header>这里是header</header>
<section>
这里是section
<article>这里是article</article>
<article>这里是article</article>
</section>
<footer>这里是footer</footer>

复制代码

老夏 · 发表于 2020-4-16 15:57:22

第五章 HTML标签
5.12 音频标签

标签	属性	描述
audio	src	音频文件的URL
	controls	是否显示控件，属性值：controls
	autoplay	自动播放，属性值：autoplay
	loop	重复播放，属性值：loop
	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

<audio src="demo.mp3" width="" controls="controls" autoplay="autoplay" loop="loop"></audio>

复制代码

老夏 · 发表于 2020-4-16 16:08:38

第五章 HTML标签
5.13 视频标签

标签	属性	描述
video	src	视频文件的URL
	controls	是否显示控件，属性值：controls
	height	视频播放器高度
	width	视频播放器宽度
	autoplay	自动播放，属性值：autoplay
	loop	重复播放，属性值：loop
	poster	视频下载时或用户点击播放按钮前显示的图像
	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

当前，video元素支持三种视频格式如下：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Ogg是带有Theora视频编码和Vorbis音频编码的Ogg文件；MPEG4是带有H.264视频编码和AAC音频编码的MPEG4文件；WebM是带有VP8视频编码和Vorbis音频编码的WebM文件。

<video src="demo.mp4" width="500px" controls="controls" autoplay="autoplay" loop="loop"></video>

复制代码

老夏 · 发表于 2020-4-16 16:15:07

第五章 HTML标签
5.14 embed标签

我们可以通过该标签定义嵌入的内容，比如flash插件等，具体内容由type属性决定，type属性的属性值为MIME_type中的指定类型，如果要嵌入flash插件，则type的属性值必须为application/x-shockwave-flash。

标签	属性	描述
embed	width	设置嵌入的宽度
	height	设置嵌入的高度
	src	嵌入内容的 URL
	type	嵌入内容的类型

<embed src="demo.swf" type="application/x-shockwave-flash">

复制代码

老夏 · 发表于 2020-4-16 16:16:49

第六章 CSS简介
6.1 CSS简介

      CSS（Cascading Style Sheets，层叠样式表）是一种用来表现HTML或XML等文件样式的计算机语言。
      CSS的作用是定义网页的外观，如字体、背景、文本、位置、布局、边缘、列表等，它也可以配合JavaScript等浏览器脚本语言以做出丰富的动态效果。
      CSS具有良好的易用性和扩展性，使用CSS不仅能够弥补HTML对网页格式化功能的不足，还可以使用CSS动态更新页面格式、进行排版定位等。
      CSS具有以下特点：
（1）CSS可以控制页面中的每一个元素（精确定位）
（2）CSS是对HTML语言处理样式的最好补充
（3）CSS可以把内容和格式处理相分离

		自动登录	找回密码
密码			立即注册

【Web前端系列课程（一）】HTML+CSS

院长

资深讲师