学习HTML第二天

作者: 官方发布人 分类: HTML 发布时间: 2017-09-04 02:34 ė 6 学习HTML第二天已关闭评论

1、客户端和服务器端

a)浏览者使用的计算机,用来服务器发送请求

b)服务器端:存放网页文件的计算机

2、文件名、基本名、扩展名

a)文件名由基本名和扩展名组成

b)基本名就是文件的名称

c)扩展名文件类型    txt   docdocx  ppt  jpg gif png

3、打开一个网页的执行过程

a)可以端向服务器发送一个请求(http),服务器将文件的代码发送到客户端,通过浏览器解析生成我们看到的界面

4、站点

a)站点是一个文件夹,用来存放与网页有关的静态资源(html,css,js,图片,flash动画,gif动画、声音、视频)

5、什么是HTML

a)超文本标记语言

6、HTML语言的规则

a)所有的标记都要放在<>

b)大部分的标记是成对出现的,昨天我们学了不成对的标记有<br><hr>

7、网页的基本框架

<html>

<head>

       <title>网页标题</title>

    </head>

    <body>

       //网页主体

    </body>

</html>

8、几种常见的标记

<p>        段落

<br>       换行

<hr>       水平线

<b>        粗体

<i>        倾斜

<u>        下划线

<strong>   加粗强调

<em>       倾斜强调

<sub>      下标

<sup>      上标

9、标记的分类

a)容器标签:成对出现

b)空标签:不成对出现

10、属性

a)属性跟在标记的后面,一个元素可以有多个属性,每个属性有一个值,值要用引号扩起来(单引号和双引号都可以),属性和属性之间用空格隔开,属性和属性之间是没有顺序的。

11、设置页面解析时候的字符编码

我们常用的字符编码就两种

简体中文

    Gb2312

    Gbk

标准编码

    Utf-8

12、简述W3C(万维网协会)的(XHTML 1.0)规范

1、一个网页只能有一个根

2、不允许空标记的存在

3、区分大小写

13、滚动文字的设置

<marquee direction=”up”
height=”300px” scrollamount=”10″
behavior=”alternate” onmouseover=”stop()”
onmouseout=”start()”>
你好吗</marquee>

14、路径

a)绝对路径:从指定的盘符开始,只要移动位置,就找不到了

b)相对路径:从自身文件开始,相对于自己的位置

i.../  上一级目录

ii../    当前目录

c)在项目中,绝对路径和相对路径都要用,大约各占50%

15、链接

a)不管是什么样的连接,都是<a>标记

b)内部链接:网站内部页面之间的跳转

c)外部连接:连接到其他网站上,地址要写全了  http://www.XXX,com

d)空连接:有连接的样子,但是不跳转

e)下载连接:只要连接到浏览器无法打开的文件就会出现下载连接

f)锚连接:连接到页面指定的地方

锚的定义:

<a id=’编号’></a>

连接到锚点

<a href=’#编号’>关键字</a>

16、六种标题级别

a)<h1>一级标题</h1>

b)<h2>二级标题</h2>

c)<h3>三级标题</h3>

d)<h4>四级标题</h4>

e)<h5>五级标题</h5>

f)<h6>六级标题</h6>

17、列表

a)有序列表

<ol type=’i’ start=’3’>

    <li></li>

</ol>

从第3个罗马数字开始

b)无序列表

<ul type=’’>

    <li></li>

</ul>

c)自定义列表

<dl>

    <dt></dt>

    <dd></dd>

</dl>

18、<!DOCTYPE> 标签

这是页面的声明,告诉浏览器当前页面遵循的是那种规则,不属于HTML的一部分。

项目中就要两种,一种是xhtml1.0的过渡性,还有一种是html5

1.2作业undefined

1.2.1跳转到其他页面指定的锚点处undefined

语法:<a href=’页面地址#id’></a>

1.2.2完成如下页面undefined

<h1>网页制作完全手册</h1>

<hr />

<p>通过下列连接访问参考资料</p>

<p>动态HTML模型参考</p>

<ul>

    <li><a
href=”#”>DHTML
对象</a></li>

<li><a href=”#”>DHTML对象</a></li>

<li><a href=”#”>DHTML对象</a></li>

<li><a href=”#”>DHTML对象</a></li>

<li><a href=”#”>DHTML对象</a></li>

</ul>

<p>HTML参考</p>

<ul>

    <li><a
href=”#”>HTML
元素</a></li>

<li><a href=”#”>HTML元素</a></li>

</ul>

<p>CSS样式</p>

<ul>

    <li><a
href=”#”>CSS
样式</a></li>

<li><a href=”#”>CSS样式</a></li>

</ul>

1.3<meta>undefined

作用:1、给搜索引擎搜索;2、告知浏览器使用什么编码解析页面。

例如:<meta name=”keywords”
content=”
烧饼,武大郎烧饼,黄桥烧饼” />

1.4插入图片undefined

语法:<img src=’图片的路径’ width=’宽度’ height=’高度’ alt=’图片的说明’ />

网上图片格式为jpggifpng格式

Alt属性的作用:

1、但图片无法显示的时候,将图片的说明性文字显示到图片的位置上

2、给搜索引擎来用,目前搜索引擎确定图片还是通过alt属性。

Title属性的作用:

但鼠标移动到图片上的时候,显示图片的说明文字

1.5热点undefined

点击同一张图的不同的区域,跳转到不同的页面。

选中图片,在属性栏上就会出现热点的按钮,

点击热点按钮画出热点形状

选中热点形状做超链接

最终形成的代码如下:

1.6Object标签undefined

Object标记用来插入flash的。

dw中点击媒体图标——swf

Flash插入以后去掉flash背景颜色,选中flash,在属性栏上wmode选项中选择透明。

1.7pre标签undefined

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体

提醒:pre标签不要用来拼版,主要用来做调试。

 

1.8实体undefined

实体名称

字符

&nbsp;

空格

&lt;

&gt;

&quot;

 

1.9使用表格undefined

默认情况下,网页的布局是流布局,(排队)不能够随意摆放位置,如何解决?通过表格来布局

表格的作用就是用来做页面布局的。

1.10  与表相关的标记undefined

<table>   表格

<tr>       

<td>       单元格

<th>       列标题

1.11  使用表的相关标记创建表undefined

<table border=”1″
width=”500px” height=”400px”
bordercolor=”#FF0000″>

    <tr>

        <th>姓名</th>

<th>性别</th>

<th>年龄</th>

</tr>

<tr>

        <td>令狐冲</td>

<td></td>

<td>22</td>

</tr>

<tr>

        <td>任盈盈</td>

<td></td>

<td>20</td>

</tr>

<tr>

        <td>任我行</td>

<td></td>

<td>55</td>

</tr>

<tr>

        <td>岳不群</td>

<td></td>

<td>55</td>

</tr>

</table>

 

Border:边框

Color:颜色

1.12  单元格中数据的对齐方式undefined

对齐分为水平对齐和垂直对齐

水平对齐是align=left    center   right

垂直对齐  valign=top       middlebottom

1.13  单元间距和单元填充undefined

单元格间距:单元格和单元格之间的距离

单元格填充:内容距离单元格的距离

默认情况下,单元格间距是2像素,单元格填充是1像素

Cell:单元格

Space:距离

Padding:填充

通过cellspacing设置单元格间距

通过cellpadding设置单元格填充

1.14  合并单元格undefined

合并单元格分为合并行和合并列,合并行就是把不同的行合并起来,合并列就是把不同的列合并起来。

Column:柱状体,柱子  col

Row:

Span:跨度

Colspan:跨了几列(合并列)

Rowspan:跨了几行(合并行)

<table width=”500″
border=”1″ bordercolor=”#0000FF” align=”center”
height=”400″>

    <tr>

        <th colspan=”3″>学生证</th>

</tr>

<tr>

        <th width=”30%”>姓名</th>

<td width=”30%”>&nbsp;</td>

<td rowspan=”3″ align=”center”><br /><br /></td>

</tr>

<tr>

        <th>性别</th>

<td>&nbsp;</td>

</tr>

<tr>

        <th>年龄</th>

<td>&nbsp;</td>

</tr>

</table>

 

1.15  表单简介undefined

表单是用来收集用户提交的数据。

1.16  表单域undefined

表单域是表单的区域,用来控制表单提交时候的数据访问

<form></form>

所有的表单元素都要放到表单中

1.17  表单元素undefined

1.17.1文本框undefined

文本框也加单行文本

<input type=”text”
name=”username” size=”20″ maxlength=”10″ />

Size=20    表示宽度是20个字符的宽度

Maxlength=10  表示最多输入10个字符

Name=’username’   给文本框取的名字叫username

Type:类别

1.17.2密码框undefined

<input type=”password”
name=”pwd” maxlength=”6″ />

1.17.3单选按纽undefined

<input type=”radio” name=”sex” value=”1″
checked=”checked” />

<input type=”radio” name=”sex” value=”0″
/>

1.17.4复选框(多选按钮)undefined

<input type=”checkbox”
name=”hobby” value=”
拥护共产党” checked=”checked” />拥护共产党

<input type=”checkbox”
name=”hobby” value=”
爬山” />爬山

<input type=”checkbox”
name=”hobby” value=”
游泳” />游泳

单选按钮和复选框的注意事项:

1、同一组的名字要一致

2、必须给无法输入的表单元素赋值

3、默认选中  checked=checked

1.17.5下拉菜单undefined

<select name=”xueli”>

<option value=”高中“>高中</option>

<option value=”大专
selected=”selected”>
大专</option>

<option value=”本科“>本科</option>

</select>

<select>是下拉菜单

<option>是下拉菜单项

Selected:表示默认选中

1.17.6下拉列表undefined

按住ctrl键可以多选

1.17.7多行文本(<textarea>undefined

多行文本也加文本域

<textarea name=”leavewords”
cols=”30″ rows=”5″></textarea>

Cols:表示容纳的列数(调节的宽)

Rows:表示容纳的行数(调节高)

1.17.8提交按钮undefined

<input type=”submit” value=”注册” name=”submit” />

用来向服务器提交数据

1.17.9重置按钮undefined

<input type=”reset” value=”重置” name=”button” />

作用:用来清空填写的数据,将表单回复到初始值

1.17.10普通按钮undefined

提交按钮和重置按钮都是带有功能的按钮,在很情况下,我们点击按钮的时候不是需要提交和重置,而是执行我们自己的功能,这时候就需要一个不带有功能的按钮

<input type=”button” value=”返回” />

1.18  总结:Input – Type 属性undefined

1.19  使用表单undefined

表单中有两个属性

Action=’数据提交的位置’  action=’’表示提交到本页面

Method=’get|post’  数据提交的方法,数据提交的方法有两种,getpost

Getpost的区别

 

get

post

外观上

在地址栏上带有?

地址栏上没有?

提交的数据量上

少量数据,一般低于2K

大量数据,PHP默认可以提交8M的数据

安全性上

不安全

安全

提交原理

提交的数据之间都是独立的

将所有的数据作为一个整体一起提交

灵活性

很灵活,只要页面跳转就可以传递数据。

不灵活,必须要有表单的参与

用的最多的就是get提交

 

 

本文出自Anpingblog,转载时请注明出处及相应链接。

本文永久链接: http://hezhaoyu.com/archives/308

0
Ɣ回顶部