理论知识
(此文章只是用于自己之后的复习)
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
CSS样式是表现。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
HTML标签不区分大小写。
<!DOCTYPE>不是 HTML 标签。是指令,它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。(因为HTML 也有多个不同的版本,所以浏览器需要知道是哪一版的html才能正确显示,<!DOCTYPE HTML>HTML指html5)
行内元素适合显示具体内容,而块级元素适合做布局。行内元素只能包含内容或者其它行内元素,宽度和长度依据内容而定,不可以设置,可以和其它元素和平共处于一行;而块级元素可以包含行内元素和其它块级元素(<p>不可以包含其他块级元素),浏览器通常会在块级元素前后另起一个新行。(行内元素千万不能包含块级元素)
网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
get是从服务器上获取数据,以明文的方式通过UTL提交数据,数据在url中可以看到,提交的数据最多不超过2KB,安全性低但效率要比post高,适合提交数据量不大安全性不高的数据,比如:搜索,查询功能
post是向服务器传送数据,将用户提交的信息封装在HTML HEADER内,适合提交数据量大,安全性高的用户信息,比如:注册,修改,上传等功能。
Post传输数据时,不需要在URL中显示出来,而Get方法要在URL中显示。所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间(否则用户输入的信息可提交不到服务器上哦!)
标签整理
1.整体框架
<html>
<head>
<title>、<script>、 <style>、<link>、 <meta>
</head>
<body>
<h1>、<p>、<a>、<img>...
</body>
</html>
2. <span>:本身没有任何属性,用来分区域而达到一些效果。
3.
<!--注释文字-->
4. <em>需要强调的文本(斜体)</em>
5. <strong>需要强调的文本(粗体)</strong>
6. <q>对简短文本的引用(加双引号)</q>, <blockquote>长文本引用(整块缩进,无双引号)</blockquote>
7.
(空格,注意还有分号), <hr />(添加一条水平线)
- p标签不能包含任何块级标签,所以address不能写在其中,有些块级元素是可以包括块级元素的。
<address>联系地址信息</address>(也是斜体但是对比<em>另起一行)
<code>代码语言</code>(如果多行可以用<pre>标签)
- 一些特殊符号
"<" 代表 "<",">" 代表 ">","&" 代表 "&"。
ul-li没有顺序列表——ol-li有序号的列表
-
div用于分块,如下图。
创建表格的四个元素:table、tbody、tr、th、td。(嵌套的)
<table summary="表格简介文本"><table>
<caption></caption>标题
<thead><tbody><tfooter>(分部加载,thead->tbody->tfooter这样的标签顺序加载,与代码前后顺序无关。这样可以按结构一块块的显示,不用整个表格加载完后显示。)
<tr>…</tr>:表格的一行,有几对tr,表格就有几行。
<td>…</td>:表格的一列,有几对td,一行就有几列。
<th>…</th>:表格的第一行单元格。(th标签中的文本默认为粗体并且居中显示)<a href="目标网址" title="鼠标滑过显示的文本" target="_blank">链接显示的文本</a>
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">(单标签)
mailto后面的全在一个双引号里,后面多个变量的话(body、subject等,第一个用?第二个用&。)
<a href="mailto:yy@imooc.com? subject=有感 &body=对此评论有些想法。">
对此影评有何感想,发送邮件给我
</a>
17.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
method : 数据传送的方式(get/post)。
<form method="传送方式" action="服务器文件"></form>
- type:当type="text"时,输入框为文本输入框;当type="password"时, 输入框为密码输入框。
name:为文本框命名,以备后台程序ASP 、PHP使用。
value:为文本输入框设置默认值。(一般起到提示作用)
<input type="text/password" name="名称" value="文本" />(单个的)
type:当 type="radio" 时,控件为单选框;当 type="checkbox" 时,控件为复选框。
value:提交数据到服务器的值(后台程序PHP使用)。
同一组的单选按钮,name 取值一定要一致!!!!
<input type="radio/checkbox" name="名称" value="值" checked="checked"/>
<input type="submit" value="提交">
<input type="reset" value="重置">
- cols :多行输入域的列数。rows :多行输入域的行数。
这两个属性可用css样式的width和height来代替:col用width、row用height来代替。
<textarea rows="行数" cols="列数">(提示字、默认值)大段文本输入框</textarea>
- 下拉链表(放form中)
value是提交值
selected="selected"属性,你懂的:D
下拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple"属性,就可以实现多选功能,在 windows 操作系统下,进行多选时按下Ctrl键同时进行单击
<select>
<option value="看书">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
- <label for="控件id名称">
标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
转焦点比如单选男口女口,通过label可以实现点男选上或者点女选上。
(就是把文字和控件相关联,实现点击文字就是点击控件)