html-02

<!DOCTYPE html>
<html>
<head>

</head>
<body>
279集

(a标签作用1:超链接)
<a href="百度地址">百度一下</a> #超链接标签,此例中点击页面中的'百度一下',就会给你跳到百度界面,且a标签不会换行.
a标签中有一个target属性,要是target='_self'表示超链接的另一个网页,在当前网页中打开.
要是target='_blank',则表示超链接的网页在新的空白窗口打开.

(a标签作用2:标签内部的跳转)
<p>alex</p>
<p>alex</p>
<p>佩奇</p>
<p>alex</p>
<a href="#peiqi">找佩奇</a> # 当你点击找佩奇时,页面会给你移动到名为'佩奇'的那行文本上去,也即系统滚轴会给你移动到第三个p标签上
<a href="#">找佩奇</a> #如果只带'#'号,表示匹配锚点,也即系统滚轴会给你移动到网页的最开始,相当于刷新了网页,但实际上是没有,所以不常用
<a href="javascript:void(0)">找佩奇</a> #void(0)表示阻止a标签的默认点击行为,也即当你再点击a标签时,页面不会有任何反应.当void()参数
不为0时,表示当你点击a标签时,想要网页给你弹出的信息.例如:void(你好),则当你点击'找佩奇'时
页面上方会给你弹出来一个'你好'信息

280集

(列表)
<ul>无序列表</ul> #ul下的子元素只能是li,也即ul标签中只能包含li标签,其他的标签都不行,但li标签中什么标签都可以放,因为li是块级标签,独占一行.
<!--<u>
<li>alex</li>
<li>taibai</li>
</u>-->
#u标签中的type='square',表示列表前的小点为方形的;type='circle',表示列表前小点为空心圆;type属性没有写,则默认为实心圆.
<ol>每行输出前都有序号</ol> #ol下的子元素也只能是li,且属性值可以是1(阿拉伯数字,默认),a,A,i,I.其中start属性可规定开始的序号.
<dl>定义列表</dl> # 没有属性。dl的子元素只能是dt和dd。
<dt>:definition title 列表的标题,这个标签是必须的
<dd>:definition description 列表的列表项,如果不需要它,可以不加
备注:dt、dd只能在dl里面;dl里面只能有dt、dd。

(table表格标签)
<table>表格标签</table> # 一个表格<table>是由每行<tr>组成的,每行是由<td>组成的。
tr是表格行,td是表格描述,内容
所以我们要记住,一个表格是由行组成的(行是由列组成的),而不是由行和列组成的。
                  注意了:<td>会切割这一行的空间,如一个<tr>标签内有两个<td>标签,则这一行会被分为两部分.
                      因此当你想要让数据在同一行显示,中间没有分割空间时,最好用一个<td>标签来包含你想要
                      展示在该行的内容.

<!--<table>-->
<!-- <tr>-->
<!-- <td>小马哥</td>-->
<!-- <td>18</td>-->
<!-- <td>男</td>-->
<!-- </tr>-->

<!-- <tr>-->
<!-- <td>小岳岳</td>-->
<!-- <td>45</td>-->
<!-- <td>男</td>-->
<!-- </tr>-->
<!-- </table>-->
单元格合并:
如果要将两个单元格合并,那肯定就要删掉一个单元格。
单元格的属性:
colspan:横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
rowspan:纵向合并。例如rowspan="2"表示当前单元格在垂直方向上
   table标签属性:
       (前言):
<caption>用来写表格标题,<tr>表格的一行,<th>表格的表头,<td>表格的列.
        1.
border属性,表格边框。如果不加border属性,则没有边框。
          为了能更好的测试设计效果,初期可以加边框,方便浏览。
          在table后加属性border="1",设置边框像素为1。
          若某单元格内无内容,则该单元格边框不显示,可以加&nbsp;来处理.
         2.
width属性,表格宽度绝对宽度,width="10px"相对宽度,width="100%"
          3.<th rowspan="2">项目</th>只需要在第一行中写,
          会默认向下合并合并两列<td colspan="2" align="center">看综艺节目</td>使用align让文字居中。
        4.
cellspacing属性,设置单元格与边框间的距离。
          当cellspacing="0"时,表格为单条线。cellpadding设置单元格与文字间的距离.
        5.
在table中加frame属性,可以设置为above、below、hsides、vsides、box。该属性在不设置border的情况下有效
                                  (form标签)
表单标签用<form>表示,用于与服务器的交互。表单就是收集用户信息的,就是让用户填写的、选择的。
  注意:我们一般会把与表单标签有关的标签放进form标签内,因为form标签中有一个action属性可以进行提交.你想啊,只要是个表单,那他
    最大的作用不就是把数据展示出来吗?你不提交到其他界面,那怎么展示啊?

属性:
name:表单的名称,用于JS来操作或控制表单时使用;
id:表单的名称,用于JS来操作或控制表单时使用;
action:指定表单数据的处理程序,一般是PHP,如:action=“login.php”
method:表单数据的提交方式,一般取值:get(默认)和post
form标签里面的action属性和method属性,在后面课程给大家讲解。稍微说一下:action属性就是表示,表单将提交到哪里。
method属性表示用什么HTTP方法提交,有get、post两种。
get提交和post提交的区别:
GET方式:
将表单数据,以"name=value"形式追加到action指定的处理程序的后面,两者间用"?"隔开,每一个表单的"name=value"间用"&"号隔开。
特点:只适合提交少量信息,并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。最大只能提交2kb数据,因此不适合用来提交文件.

POST方式:
将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。
特点:可以提交海量信息,相对来说安全一些,提交的数据格式是多样的(Word、Excel、rar、img)。可提交大量数据,因此提交文件时应该用post.

Enctype:
表单数据的编码方式(加密方式),取值可以是:application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。

Application/x-www-form-urlencoded:默认加密方式,除了上传文件之外的数据都可以
Multipart/form-data:上传附件时,必须使用这种编码方式。
(input标签)
<input>用于接收用户输入</input>
属性:
type="属性值":文本类型。属性值可以是:
text(默认)
password:密码类型
radio:单选按钮,名字相同的按钮作为一组进行单选(单选按钮,天生是不能互斥的,如果想互斥,必须要有相同的name属性。name就是“名字”。
)。非常像以前的收音机,按下去一个按钮,其他的就抬起来了。所以叫做radio。
checkbox:多选按钮,名字相同的按钮作为一组进行选择。
checked:将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时,可以用这个属性。属性值也是checked,可以省略。
hidden:隐藏框,在表单中包含不希望用户看见的信息
button:普通按钮,结合js代码进行使用。
submit:提交按钮,传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。
点击按钮后,这个表单就会被提交到form标签的action属性中指定的那个页面中去。
reset:重置按钮,清空当前表单的内容,并设置为最初的默认值
image:图片按钮,和提交按钮的功能完全一致,只不过图片按钮可以显示图片。
file:文件选择框。
number:文本框内只允许输入数字,字符等都无法输入.
提示:如果要限制上传文件的类型,需要配合JS来实现验证。对上传文件的安全检查:一是扩展名的检查,二是文件数据内容的检查。
value="内容":文本框里的默认内容(已经被填好了的)
size="50":表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
注意size属性值的单位不是像素哦。
readonly:文本框只读,不能编辑。因为它的属性值也是readonly,所以属性值可以不写。
用了这个属性之后,在google浏览器中,光标点不进去;在IE浏览器中,光标可以点进去,但是文字不能编辑。
disabled:文本框只读,不能编辑,光标点不进去。属性值可以不写。

(label标签)
我们先来看下面一段代码:
<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女
对于上面这样的单选框,我们只有点击那个单选框(小圆圈)才可以选中,点击“男”、“女”这两个文字时是无法选中的;于是,label标签派上了用场。

本质上来讲,“男”、“女”这两个文字和input标签时没有关系的,而label就是解决这个问题的。我们可以通过label把input和汉字包裹起来作为整体。

解决方法如下:

<input type="radio" name="sex" id="nan" />
<label for="nan">男</label>
<input type="radio" name="sex" id="nv" />
<label for="nv">女</label>
上方代码中,input元素要有一个id,然后label标签有一个for属性,和id相同,那么这个label和input就有绑定关系了。

当然了,复选框也有label:(任何表单元素都有label)
<input type="checkbox" id="kk" />
<label for="kk">10天内免登陆</label>

(textarea标签)
text就是“文本”,area就是“区域”。
属性:
value:提交给服务器的值。
rows="4":指定文本区域的行数。
cols="20":指定文本区域的列数。
readonly:只读。
(select标签)
<select>标签里面的每一项用<option>表示。select就是“选择”,option“选项”。select标签和ul、ol、dl一样,都是组标签。

<select>标签的属性:
multiple:可以对下拉列表中的选项进行多选。没有属性值。
size="3":如果属性值大于1,则列表为滚动视图。默认属性值为1,即下拉视图。
<option>标签的属性:
selected:预选中。没有属性值。

(html中的id属性作用)
id 属性规定 HTML 元素的唯一的 id
id 在 HTML 文档中必须是唯一的。
id 属性可用作链接锚(link anchor),通过 JavaScript(HTML DOM)或通过 CSS 为带有指定 id 的元素改变或添加样式。

(html中的class属性作用)
html中的class=是一个选择器,可以理解为一个标识,用来标识特定的标签。

class一般是用于统一样式设置,比如说啊一个ul里面的所有li,他的的字体,背景颜色啊等等 ,
你可以把所有liclass名字取成一样 ,因为在html中 class name这两个名字都可以重复,
接着上面说,你统一样式之后,比如说有几个li的样式不一样,这个时候你给几个不一样 样式的li取个id,然后 通过id控制他的属性

注:class属性不能在以下HTML元素中使用:base, head, html, meta, param, script, style以及title

(id与class的区别)
id属性是用于指定文档的唯一标识符;因而,可以使用id在页面中区分不同的模块。CSS和JavaScript使用id属性来为唯一元素执行特定任务。
在CSS中,id属性使用#符号后跟id编写

class属性用于为HTML元素指定一个或多个类名;class属性可用于任何HTML元素。
CSS和JavaScript可以使用类名来为具有指定类名的元素执行某些任务。CSS样式表中的类名称使用“.”符号。

idclass都是属性,不是标签。ID只能用于一个标签,唯一标示;class能用于多个标签,标示一类标签;
用后者你可以一次改变很多标签的css属性,很多时候更方便,应用也更广

(form标签中常嵌套的标签)
form:
label
for:与input的id有很大关联
input:
type:普通文本
password:密码文本
submit:
radio:单选框
checkbox:多选框
select:
option
textarea:
rows
cols
        我们不难看出这大部分都是与表单标签有关的标签.

</body>
</html>
原文地址:https://www.cnblogs.com/gongteng/p/13567304.html