实训笔记day03

实习第三天笔记

页面所有链接的基本链接

<base>标签

网页中所有连接的基础链接，base标签里面的链接会影响页面中的所有的链接，除非链接设置了http协议。base标签位于head标签的内部。

<head>
<meta charset="UTF-8">
<title>base</title>
<!-- 基础链接 -->
<base href="http://www.sina.com">
</head>	
<body>
<!-- http  file -->
	<a href="http://www.baidu.com">百度</a>
	base标签不会影响链接
	<img src="./Penguins.jpg" alt="企鹅">
	base标签会影响链接		
</body>
</html>

表单

form标签

<body>
<form action="01.php" method="post">
	<input type="text" name="user">
	<input type="submit">
</form>
</body>

form标签中的常用属性：

action属性：设置将表单中的数据提交给谁。如果action属性值为空，点击提交后会提交到当前网页中。

method属性：设置提交给后台的方法 get/post。

当method属性值为get的时候，数据通过url（统一资源定位符）传递到后台中；当属性值为post时，数据通过服务器来传输。当method属性的值为空时，默认属性值为get。

输入域input

type属性

属性值：

button：产生一个不会产生任何作用的按钮，需要和事件关联。

file：产生一个能够上传文件的按钮。

hidden：隐藏产生的可输入区域。

text：文本类型，产生区域能够写入文本。

password：产生一个输入密码的区域，输入的文本会用·显示。

radio：产生一个单选框，可以利用name属性对多个单选框进行分组，同一组的多个单选框只能有一个背选。

checkbox：产生一个多选框，可以利用name属性对多个值进行分组。

image：产生一个图片，其作用是提交按钮。

reset：重置，可以使的网页上所有内容恢复成默认值。

submit：提交按钮。

alt属性

定义当按钮为图片时，图片的替代文字。

src属性

定义当按钮为图片时，图片的链接地址。

checked属性

无值属性，只需要写出来，定义默认选项。

disabled属性

无值属性，禁用当前区域。

readonly属性

无值属性，对当前输入域只读。

maxlength属性

定义输入域字符的最大长度。

name属性

定义当前输入域的名字。

value属性

定义当前输入域的默认值。

文本输入区域

cols属性

规定可见列数

rows属性

规定可见行数

disabled属性

禁用当前文本输入区

name属性

当前文本区域的名字

readonly属性

当前文本区域只读

按钮

button的type类型默认为submit。

disabled属性

禁用此按钮。

name属性

按钮名字。

type属性

按钮类型：button，reset，submit。

value属性

按钮上显示文本的默认值。

下拉菜单

<optgroup>标签

定义下拉列表选项分组。

label属性：定义选项组的标记，必要属性。

disabled属性：禁用。

<option>标签

定义下拉列表中的选项。

disabled属性：禁用。

label属性：定义当使用<optgroup>时所使用的标注。即下拉列表的值。

selected属性：规定选项（在首次显示在列表中时）表现为选中状态。

value属性：向服务器输送的值。

表单中的标记<label>

当鼠标点击移到表单前的字时，光标自动移到后面的输入域中。

表单中相关元素分组<fieldset>

<legend>定义分组标题。

<form>
 <fieldset>
   <legend>个人信息:</legend>
   姓名: <input type="text"><br>
   邮箱: <input type="text"><br>
   生日: <input type="text">
 </fieldset>
</form>

css

什么是css？

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

样式表：负责美化。

层叠：样式不会消失只会被覆盖。

css使用方式

第一种：在标签中使用style属性。

<h1 style="color:red;">Hello,World</h1>
改变字体颜色为红色。

第二种：使用style标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css使用方式</title>
<!-- css第二种使用方式 使用"style标签" -->
<style>
	/*css注释*/
	/*css选择器 */
	p {
		color: blue;
	}
</style>
</head>
<body>
<!-- 段落 -->
<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</body>
</html>

第三种：

在.html文件中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css使用方式</title>
	<link rel="stylesheet" href="01.css">
</head>
<body>
	<div>
		<!-- div标签本身没有任何语义，它是一个无意义标签 -->
		社会你柳哥，人狠话不多
	</div>
</body>
</html>

在01.css文件中

div {
	color: purple;
}

将div标签内的部分字体编程紫色。

注意：在网页设计中，要求结构与样式分离，所以最好使用第三种方法css使用方法。

css基础选择器

html选择器

通过html标签来选择元素。

注意：

所有的html标签都能当做选择器。
无论标签藏得多深都会被选中。
选择的是所有的标签而不是具体的某个标签。所以说我们通过html标签选择器来设置的都是一些共用性的问题。

所有的p和h6标签都会被选中，字体改变颜色。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	/*html标签选择器 */
		p {
			color: red;
		}

		h6 {
			color: blue;
		}

	</style>
</head>
<body>
	<!-- 不够精确 -->
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
	</p>
	<p>
		我是第二个p标签
	</p>

	<p>
		adasdas
	</p>
	<h6>我是h6</h6>
</body>
</html>

id选择器

任何的标签都可以有id属性和属性值。
id命名中，大小写敏感，id的名字中可以有字母、数字、下划线，但是要以字母开头。
id命名方法：驼峰命名法。小驼峰：testHeader；大驼峰：TestHeader；test-header；test_header。
id命名不能重复。

id是全局属性。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*id选择器*/
		#d1 {
			color: green;
		}
	</style>
</head>
<body>	
	<div id="d1">
		我是一个div
	</div>
</body>
</html>

class选择器

任何标签都可以使用class属性（class属性也是一个全局属性）。
class属性名可以重复使用。
一个class属性中，可以有多个class属性值。

最常用的选择器。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*class选择器*/
		/*class可以重复使用*/
		.e1 {
			color: blue;
		}
	</style>
</head>
<body>	
	<em class="e1">我是em，表示强调</em>
	<strong class="e1"> 我是strong</strong>
</body>
</html>

选择器冲突

当多个选择器同时对一个文本部分进行美化时，谁更精确就听谁的。

精确度：id选择器 > class选择器 > html选择器

通配符*

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			/*通配符 选择网页中的所有标签*/
			color: red;

		}
	</style>
</head>

<body>
	<a href="##" >我是a标签</a>
	<div >我是div</div>
	<p >我是p标签</p>
	<span >我是span标签</span>
</body>
</html>

通配符将所有的标签都都进行美化。

span标签与div标签的区别

div标签是用来把网页分割成部分。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 
		1. 二者都是无意义标签
		2. div  切割  
		   span 跨度
		3. table  div + css
	盖房子  html骨架   css装修
	div是砖  
	-->
	<div>
		我是div标签
	</div>

	<span>我是span标签</span>
</body>
</html>

posted @ 2017-06-25 17:00 疯帽阅读(123) 评论(0) 收藏举报

刷新页面返回顶部

疯帽

实训笔记day03

实习第三天笔记

页面所有链接的基本链接

表单

输入域input

type属性

alt属性

src属性

checked属性

disabled属性

readonly属性

maxlength属性

name属性

value属性

文本输入区域

cols属性

rows属性

disabled属性

name属性

readonly属性

按钮

disabled属性

name属性

type属性

value属性

下拉菜单

相关属性

<optgroup>标签

<option>标签

表单中的标记<label>

表单中相关元素分组<fieldset>

css

什么是css？

css使用方式

css基础选择器

选择器冲突

通配符*

span标签与div标签的区别

公告