网页设计HTML零基础入门

、Html概述

Html是Hyper Text Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容文件渲染成网页，显示的网页可以从一个网页链接跳转到另一个网页。

二、Html标签语法

Html中标签分为：成对标签和自闭合标签【空标签】

1、成对标签

成对出现，有开始标签必须有结束标签，内容包裹在两个标签中，而且开始标签名和结束标签名一致,并且结束标签必须以斜杠/开头

语法：

<font>内容</font>

2、自闭合标签

只有一个标签，用斜杠结束，斜杠也可以省略

语法：

<br/>

注意事项：

成对标签中，结束标签必须以斜杠开头
成对标签与成对标签可以嵌套不能交叉
标签名不区分大小写，但是我们都必须小写

三、Html基本架构

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    
</body>
</html>

1、！DOCTYPE

!DOCTYPE html是文档声明，定义文档类型为html，并且告诉不同的浏览器用标准方式进行解析html语言，如果不写的话，会产生怪异模式，所谓怪异模式，就是浏览器会用自己的方式进行解析，不同的浏览器有各自的解析方式，从而会出现无效果、不兼容等问题。
注意，html中有两种声明类型，一种叫做xhtml，即html，另一种叫做html5，html5是xhtml的升级版，所以我们建议使用html5的声明方式
xhtml声明方式：
<htmlxmlns="http://www.w3.org/1999/xhtml">
html5声明方式：
<!DOCTYPE html>

2、html

html是html文档的整体，也就是表示一个网页。
html中的lang="en"是定义该文件语言是英文

3、head

head是html的第一层子元素【子标签】，负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和JavaScript文件等。设置的内容不会显示在网页上，标题的内容会显示在标题栏中。即title标签。

4、meta

meta是html语言head标签中的一个辅助性标签，该标签不包含任何内容，但是该标签的属性定义了与文档相关联的名称，比如：编码

<meta charset="utf-8"></meta>

5、body

body也是html的第一层子元素，我们页面中显示的所有内容全部都是编写在该标签体中。

四、Html文档规范

html制定了文档的编写规范，必须遵守。
所有的标签必须小写
所有的属性必须用双引号括起来

五、Html注释

html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上。
注释的语法：


六、html基本属性

注：属性是标签的辅助作用。

属性描述 bgcolor 设置网页的背景颜色 background 设置网页的背景图片

1.bgcolor

设置网页的背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的属性</title>
</head>
<body bacolor="pink">
    
</body>
</html>

2.路径

我们在开发网页时，需要经常的插入图片、视频、文件等一些操作，但是我们需要指定文件所在的位置，这个位置就是所谓的路径

路径分为：

相对路径指目标相对于当前文件的路径，网页结构设计中多采用这种方式来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。表示方法如下： ./ ：代表文件所在的目录（可以省略不写）../ ：代表文件所在的父级目录../../ ：代表文件所在的父级目录的父级目录/ ：代表文件所在的根目录【/ ：可以理解为目标文件的绝对路径】
绝对路径指目标文件的完整路径，从盘符开始。

3.background

设置网页的背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的属性</title>
</head>
<body background="../images/10.jpg">
    
</body>
</html>

注意事项：
bgcolor和background不能同时使用
background不能指定绝对路径

七、Html标签

1.网页的组成

网页的组成：文字、图片、视频、超链接、列表、表格、表单等组成。

2、文本段落标签

标签描述 hn 设置文字标题【n：取值范围 1~6】 center 居中对齐 hr 水平线属性（width：宽度 color：颜色 size：粗细） br 换行 p 段落

3、文本控制标签

标签描述 font 设置字体，需要借助属性设置

属性描述 color 设置字体颜色 size 设置字体大小，不需要带单位，取值范围：1~7【浏览器默认值：3】 face 设置字体风格

<font size="2" color="red" face="黑体"></font>

4、文本格式化标签

标签描述 b 定义粗体文本 em 定义着重文字 i 定义斜体文字 small 定义小号字 strong 定义加重语气 sub 定义下标字 sup 定义上标字 ins 定义插入字 del 定义删除字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html文本格式化标签</title>
</head>
<body>

    <b>粗体文本</b>
    <i>倾斜文本</i>
    <em>着重文本</em>
    <small>小号字</small>
    <strong>加重语气</strong>
    <sub>上标</sub>
    <sup>下标</sup>
    <ins>插入字</ins>
    <del>删除字</del>
    
</body>
</html>

5、图片标签

在Html中，图像由
标签定义。
是空标签，意思是说，它只包含属性。
要在页面上显示图像，你需要使用源属性（src）。src指"source"。源属性的值是图像的URL地址。

标签描述 img 图片标签

属性描述 src 指定图片的地址 width 设置图片的宽度 height 设置图片的高度 alt 设置图片的预备文本

注意事项：不建议设置图片大小，容易失真

6、audio

在Html中，声音由标签定义。

标签描述 audio 声音标签

属性描述 src 指定声音地址

<audio src="nice.mp3">对不起，您的浏览器不支持</audio>

7、video

在Html中，视频由video标签定义

标签描述 video 视频标签

属性描述 src 指定视频地址

<video src="美女.mp4">对不起，您的浏览器不支持</video>

8、超链接

a标签定义超链接，用于从一个页面链接到另一个页面。
a标签最重要的属性是href，它指定链接的目标。
在所有浏览器中，链接的默认外观如下：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

语法：

<a href="链接目标">点击内容</a>

属性描述 href 指定链接目标 name 指定锚的名称 download 指定下载链接 target 指定跳转方式属性值描述 _blank 新窗口打开【常用】 _parent 在父窗口中打开链接【了解】 _self 默认，在当前窗口打开【了解】 _top 在当前窗体打开链接，并替换当前的整个窗体【了解】 framename 到 iframe 在讲【常用】

超链接分类：

内部链接链接目标：本地页面 <a href="demo.html">点击内容</a>
外部链接链接目标：外部页面 <a href="http://www.baidu.com">点击内容</a>
多媒体链接链接目标：图片、视频等 <a href="images/美女.jpg">点击内容</a>
电子邮件链接链接目标：电子邮件【系统自带的电子邮件】 <a href="mailto:12345@qq.com">点击内容</a>
锚链接链接目标：锚点 1.建立锚点
<a name="锚点名"></a>

2.跳转
<a href="#锚点名">点击内容</a>

9、列表

列表的使用与word等软件的列表概念相似，只不过是应用在网页展示中。

1.有序列表

有序列表是指有数字编号或字母的列表项，可以使用css定义更多样式。

<!-- 有序列表 -->
    <ol type="a">
        <li>新闻一</li>
        <li>新闻二</li>
        <li>新闻三</li>
    </ol>

属性描述 type 设置符号类型值：1 a A I i 默认数字 start 从第几个开始【用于ol标签中】 value 从第几个开始【用于li标签中】

<!-- 有序列表 -->
    <ol type="a" start="4">
        <li>新闻一</li>
        <li type="1" value="1">新闻二</li>
        <li>新闻三</li>
    </ol>

2、无序列表

无序列表是指没有数字编号或字母的列表项，可以使用css定义更多样式。

<!-- 无序列表 -->
<ul>
    <li>童装</li>
    <li>男装</li>
    <li>女装</li>
</ul>

属性描述 type 用于设置符号类型，默认：实心圆值：空心圆、正方形【用于ul、li】

<!-- 无序列表 -->
<ul type="square">
        <li>童装</li>
        <li type="circle">男装</li>
        <li>女装</li>
    </ul>

3、描述列表

描述列表指每个列表项有单独的标题。

<!-- 描述列表 -->
    <dl>
        <dt>开源产品</dt>
        <dd>Java封装库</dd>
        <dd>Web组件库</dd>
        
        <dt>网站导航</dt>
        <dd>mrliujava.com</dd>
        <dd>mrliuweb.com</dd>
    </dl>

10、表格

表格在网页开发中使用频率非常高，尤其是数据展示的时候。

10.1 基本使用

标签描述 table 代表表格标签 caption 表格标题 thead 表头部分 tbody 表格主体部分 tfoot 表格尾部

属性描述 border 表格边框 cellspacing 单元格与单元格间距 width 宽度 height 高度 bgcolor 设置背景颜色 background 设置背景图片 align 对齐方式

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>员工薪资统计表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职位</th>
                <th>薪资</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程师</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程师</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>测试工程师</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>当前页：1 页</td>
                <td>上一页</td>
                <td>下一页</td>
                <td>尾页</td>
                <td>共 3 页</td>
            </tr>
        </tfoot>
    </table>

10.2 单元格合并

属性说明 rowspan 行合并 colspan 列合并

下面是行合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>员工薪资统计表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职位</th>
                <th>薪资</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td rowspan="2">JavaEe工程师</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>测试工程师</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>当前页：1 页</td>
                <td>上一页</td>
                <td>下一页</td>
                <td>尾页</td>
                <td>共 3 页</td>
            </tr>
        </tfoot>
    </table>

下面是列合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>员工薪资统计表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职位</th>
                <th>薪资</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程师</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程师</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td colspan="2">傻蛋</td>
                <td>测试工程师</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>当前页：1 页</td>
                <td>上一页</td>
                <td>下一页</td>
                <td>尾页</td>
                <td>共 3 页</td>
            </tr>
        </tfoot>
    </table>

11、表单

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表(select)、单选框(radio)、复选框(checkbox)等等。

11.1 基本使用

表单需要使用表单标签来设置：

<form>
input元素
</form>

11.2 GET&POST

属性说明 action 后台地址 method 提交方式GET或POST

GET和POST区别：

1.GET

数据会显示在地址栏中，数据不安全
数据大小有限制
数据通过请求头传递

2.POST

数据不会显示在地址栏中，数据安全
数据对大小无限制
数据通过实体内容传递

<form action="后端接口" method="POST">
        <input type="text">
        <input type="password">
</form>

11.3 LABEL

使用label用于描述表单标题，当点击标题后文本框会获得焦点，需要保证使用的ID在页面中是唯一的。

<form action="后端接口" method="POST">
        <label for="username">用户名</label>
        <input type="text" id="username">

        <label for="password">密码</label>
        <input type="password" id="password">
</form>

也可以将文本框放在label标签内部，这样就不需要设置id与for属性了。

11.4 INPUT

文本框用于输入单行文本使用，下面是常用属性与示例。

属性说明 type 表单类型,默认为text name 后端接收字段名 required 必须输入 placeholder 提示文本内容 value 默认指 maxlength 允许最大输入字符数 size 表单长度,一般用css来控制 disabled 禁用,不可提交后端 readonly 只读,可提交后端 accept 设置选中类型比如:.jpg capture 使用麦克风\视频或摄像头哪种方式获取手机上传文件,支持的值有microphone , video , camera

11.4.1 基本示例

<form action="后端接口" method="POST">
        <label for="username">用户名</label>
        <input type="text" name="username" id="username" placeholder="请输入用户名" maxlength="5" size="50" required>
</form>

11.4.2 调用摄像头

当input类型为file时手机会让用户选择图片或者拍照,如果想直接调取摄像头使用以下代码.

<form action="后端接口" method="POST">
        <label for="file">上传文件</label>
        <input type="file" name="file" id="file" accept="*.jpg" capture="camera">
</form>

11.4.3 其他类型

通过设置表单的type字段可以指定不同的输入内容.

类型说明 email 输入内容为邮箱 url 输入内容为URL地址 password 输入内容为密码项 tel 电话号,移动端会调出数字键盘 search 搜索框 hidden 隐藏表单 submit 提交表单 reset 重置表单 button 自定义按钮

11.4.4 HIDDEN

隐藏表单用于提交后台数据,但在前台内容不显示所以在其上做用样式定义也没有意义.

<input type="hidden" name="id" value="1">

11.4.5 SUBMIT

创建提交按钮可以将表单数据提交到后台,有多种方式可以提交数据,比如:AJAX,或者Html的表单按钮.

a.使用input构建提交按钮,如果设置了name值,那么按钮数据也会提交到后台,如果有多个表单项可以通过这些进行判断是哪个表单提交的.

<input type="submit" name="submit" value="提交表单">

b.使用button也可以提交,设置type属性为submit或不设置都可以提交表单.

<button type="submit">提交表单</button>

11.4.6 禁用表单

通过为表单设置disabled或readonly都可以禁止表单,单readonly表单的数据可以提交到后端

<input type="text" value="数据" readonly>

11.4.7 PATTERN

表单可以通过设置pattern属性指定正则验证.

属性说明 pattern 正则表达式验证规则 oninvalid 输入错误时触发的事件

<form action="">
        <label for="username">用户名</label>
        <input type="text" name="username" id="username" pattern="[a-z]{5,20}" oninvalid="validate('请输入5~20位字母的用户名')">
        <button>提交表单</button>
    </form>

    <script>
        function validate(message){
            alert(message);
        }
    </script>

11.4.8 TEXTAREA

文本域指可以输入多行文本的表单,当然更复杂的情况可以使用编辑器如ueditor , ckeditor等.

属性说明 cols 列字符数(一般使用css控制更好) rows 行数(一般使用css控制更好)

<textarea cols="30" rows="3">请踩踩我......</textarea>

11.4.9 SELECT

下拉列表项可用于多个值中的选择.

属性说明 multiple 支持多选 size 列表框高度 optgroup 选项组 selected 选中状态 option 选项值

<form action="">
        <select multiple size="10">
            <option value="">选择课程</option>
            <optgroup label="后端">
                <option value="">JAVA</option>
                <option value="">PHP</option>
                <option value="">LINUX</option>
            </optgroup>

            <optgroup label="前端">
                <option value="">HTML</option>
                <option value="">CSS</option>
                <option value="">JAVASCRIPT</option>
            </optgroup>
        </select>
    </form>

11.4.10 RADIO

单选框指只能选择一个选项的表单,如性别的选择:男 , 女 , 保密只能选择一个.

属性说明 checked 选中状态

<form action="">
        <input type="radio" name="" id="boy" checked>
        <label for="boy">男</label>

        <input type="radio" name="" id="girl">
        <label for="girl">女</label>
    </form>

11.4.11 CHECKBOX

复选框指允许选择多个值的表单

属性说明 checked 选中状态

<form action="">
        <input type="checkbox" name="JAVA" id="java">
        <label for="java">JAVA</label>

        <input type="checkbox" name="WEB" id="web">
        <label for="web">WEB</label>
    </form>

11.4.12 FILE

文件上传有很多方式,可以使用插件或者JS拖放上传处理.Html本身也提供了默认的上传功能,只是上传效果并不是很美观.

属性说明 multiple 支持多选 accept 允许上传类型.png , .psd 或者 image/png , image/gif

<form action="" enctype="multipart/form-data">
        <input type="file">
        <input type="submit" value="上传">
    </form>

11.4.13 日期时间

属性说明 min 最小时间 max 最大时间 step 间隔: date缺省是1天 week缺省是1周 month缺省是1月

a.日期选择

<h1>日期选择</h1>
    <form action="">
        <input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">
    </form>

b.周选择

<h1>周选择</h1>
    <input type="week" name="" id="">

c.月份选择

<h1>月选择</h1>
    <input type="month" name="" id="">

d.日期与时间

<h1>日期与时间</h1>
    <input type="datetime-local" name="" id="">

11.4.14 DATALIST

input表单的输入值选项列表

<form action="">
        <label for="username">用户名</label>
        <input type="text" name="" id="usernmae" list="less">
        <datalist id="less">
            <option value="JAVA">后台管理语言</option>
            <option value="CSS">美化网站页面</option>
            <option value="MYSQL">掌握数据库使用</option>
        </datalist>
    </form>

12、框架集

frameset元素可定义一个框架集。它被用来组织多个窗口（框架），每个框架存有独立的文档，在其最简单的应用中，frameset元素仅仅会规定在框架集中存在多少列或多少行，您必须使用cols或rows属性。

注意事项：由于是分割原网页，所以我们不能在body中进行编写，在head中进行分割。

标签说明 frameset 框架集 frame 框架

属性说明 cols 定义框架集中列的数目和尺寸 rows 定义框架集中行的数目和尺寸 frame border 去除框架边框 scrolling 去除滚动条

12.1 垂直框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html垂直框架</title>

    <frameset cols="50%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frame src="http://www.taobao.com" frameborder="0"  scrolling="no"></frame>
    </frameset>
</head>
<body>
    
</body>
</html>

12.2 水平框架

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Html水平框架</title>
		<frameset rows="50%,*" >
				<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
		</frameset>
	</head>
<body>
</body>
</html>

12.3 混合框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html混合框架</title>

    <frameset rows="20%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frameset cols="20%,*">
            <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
            <frame src="https://www.huya.com/" frameborder="0" scrolling="no"></frame>
        </frameset>
        
    </frameset>
</head>
<body>
    
</body>
</html>

12.4 导航框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html美女</title>
</head>
<body>
    
    <img src="../images/10.jpg" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html野兽</title>
</head>
<body>
    

    <img src="../images/timg.gif" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html动物</title>
</head>
<body>
    
    <img src="../images/4.jpg" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html链接</title>
</head>
<body>

    <a href="Html美女.html" target="view">美女图片</a>
    <a href="Html野兽.html" target="view">野兽图片</a>
    <a href="Html动物.html" target="view">动物图片</a>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html垂直框架</title>

    <frameset rows="20%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frameset cols="20%,*">
            <frame src="Html链接.html" frameborder="0" scrolling="no"></frame>
            <frame src="https://www.huya.com/" frameborder="0" scrolling="no" name="view"></frame>
        </frameset>
        
    </frameset>
</head>
<body>
    
</body>
</html>

13、内联框架

iframe元素会创建包含另外一个文档的内联框架。

属性说明 align 对齐方式，后期采用css的方式进行设置 width 设置宽度 height 设置高度 src 设置iframe中显示的文档的URL name iframe的名称 scrolling 是否显示滚动条 frameborder 设置iframe的边框

、选择题（1-18题各3分19-36题各2分，共92分）

1.在HTML的<TD>标签中，align 属性的取值是（　C　）

A. top ; B. middle ; C. center ; D. bottom

<tr>

</tr>

<tr>

</tr>

</table>

2. CSS样式表根据所在网页的位置，可分为（ B ）

A.行内样式表、内嵌样式表、混合样式表; B.行内样式表、内嵌样式表、外部样式表;

C.外部样式表、内嵌样式表、导入样式表; D.外部样式表、混合样式表、导入样式表

行内样式：

<html>

<body>

</body>

</html>

-----------------------------------------------------------------

内嵌样式：

<html>

<head>

#div{width:100px;height:100px;background:red;}

</style>

</head>

<body>

</body>

</html>

--------------------------------------------------------------

外部样式：

<html>

<head>

</head>

<body>

</body>

</html>

---------------------

css文件

#div{width:100px;height:100px;background:red;}

#和.区别

.点是使用class引用的，多个控件可以同时使用一个class，一个控件上也可以使用多个class，比如

.tdRed{border:solid 1px red;}

.tdBKBlue{background-color:blue;}

而ID是在一个页面中唯一的

总得来说class表示泛性的，id表示个性的

比如你所有的按钮都是一个颜色的

.normalButton{background-color:blue;border:solid 0px black;}

对于提交按钮会要做的大一点

#submit{width:100px;height:100px;}

那么你的按钮就是

普通的按钮就是

3. 在插入图片标签中，对插入的图片进行文字说明使用的属性是（　D　）

A.name; B.id; C.src; D. alt

4. 对于<FORM action=″URL″ method=*>标签，其中*代表GET或（　C　）

A.SET; B. PUT; C. POST ; D. INPUT

Get和post区别

安全性：POST比GET安全；

编码方式：POST方式提交时可以通过HTML文档中的<META>元素设置实体部分的编码方式，而GET方式提交时URI默认的编码方式为ISO-8859-1，不可以在页面中设置；

传输文件大小：POST方式提交文件放在实体部分传输，大小无上限，而GET方式提交文件内容放在URI部分传输，最大为2KB;

请求速度：GET比POST快。

数据传输方式：GET：查询字符串（名称/值对）是在 GET 请求的 URL 中发送的，如：/test/demo_form.asp?name1=value1&name2=value2；POST:查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的。

5. 下列标签可以不成对出现的是（　B　）

A.〈HTML〉〈/HTML〉 ; B.〈P〉〈/P〉; C.〈TITLE〉〈/TITLE〉 ; D.〈BODY〉〈/BODY〉

<p>是段落标签。

在HTML4.01中某些标签（<p><br>,<hr>,<img>, <input>,<link>等）允许不成对出现，但是不推荐。在现在的浏览器里，都会“兼容”这些单标签。浏览器解释<p>标签后，碰到一个不对应的标签时，会自动填补</p>。所以<p>标签可以单标签使用，但不推荐。

在HTML5中规定了元素必须始终关闭，也就是标签必须成对出现。

6. 对于标签〈input type=*〉，如果希望实现密码框效果，*值是（ C ）

A. hidden; B.text ; C. password ; D. submit

7. HTML代码<select name=“name”></select>表示？（ D ）

A. 创建表格 ; <table>

B. 创建一个滚动菜单; <marquee>

C. 设置每个表单项的内容;

D.创建一个下拉菜单

8. BODY元素用于背景颜色的属性是（　C　）

A. alink ; B. vlink ; C. bgcolor; D. background

9. 在表单中包含性别选项，且默认状态为“男”被选中，下列正确的是（　A　）

A. <input type=radio name=sex checked> 男 ; B.<input type=radio name=sex enabled>

C.<input type=checkbox name=sex checked>男；

D.nput type=checkbox name=sex enabled>男

性别(单选框)：<input type="radio" value="1" name="sex" checked="checked"/>男

<input type="radio" value="2" name="sex"/>女

角色（下拉框）：<select name="role">

</select>

10. 在CSS中下面哪种方法表示超链接文字在鼠标经过时，超链接文字无下划线？（　B　）

A. A:link{TEXT-DECORATION: underline }; B. A:hover {TEXT-DECORATION: none};

C. A:active {TEXT-DECORATION: blink }; D. A:visited {TEXT-DECORATION: overline }

11. JavaScript代码： 'abcdefg'.indexOf('D') 结果是（ B ）

A：0 B：-1 C：3 D：4

Js常用方法

1.substr

substr(start,length)表示从start位置开始，截取length长度的字符串。

var src="images/off_1.png";

alert(src.substr(7,3));

弹出值为：off

2.substring

substring(start,end)表示从start到end之间的字符串，包括start位置的字符但是不包括end位置的字符。

var src="images/off_1.png";

alert(src.substring(7,10));

弹出值为：off

3.indexOF

indexOf() 方法返回某个指定的字符串值在字符串中首次出现的位置（从左向右）。没有匹配的则返回-1，否则返回首次出现位置的字符串的下标值。

var src="images/off_1.png";

alert(src.indexOf('t'));

alert(src.indexOf('i'));

alert(src.indexOf('g'));

弹出值依次为：-1,0,3

4.lastIndexOf

lastIndexOf()方法返回从右向左出现某个字符或字符串的首个字符索引值（与indexOf相反）

var src="images/off_1.png";

alert(src.lastIndexOf('/'));

alert(src.lastIndexOf('g'));

弹出值依次为：6,15

5.split

将一个字符串分割为子字符串，然后将结果作为字符串数组返回。

以空格分割返回一个子字符串返回

var s, ss;

var s = "1,2,3,4";

ss = s.split(",");

alert(ss[0]);

alert(ss[1]);

12. <img src="name">的意思是？（ A ）

A. 图像相对于周围的文本左对齐; B. 图像相对于周围的文本右对齐;

C. 图像相对于周围的文本底部对齐; D. 图像相对于周围的文本顶部对齐

13. 点击按钮，在ID为“Link”的DIV标签内显示东软实训超链接, 下面对该按钮的onClick事件函数描述正确的是：C

A. Link.innerText='<a href="http://www.jb-aptech.com.cn">东软实训</a>';

B. Link.outerText='<a href="http://www.jb-ptech.com.cn">东软实训</a>';

C. Link.innerHTML='<a href="http://www.jb-aptech.com.cn">东软实训</a>';

D. Link.outerHTML='<a href="http://www.jb-aptech.com.cn">东软实训</a>'

innerHTML 设置或获取位于对象起始和结束标签内的

HTML

outerHTML 设置或获取对象及其内容的 HTML 形式

innerText 设置或获取位于对象起始和结束标签内的文本

outerText 设置(包括标签)或获取(不包括标签)对象的文本

innerText和outerText在获取时是相同效果，但在设置时，innerText仅设置标签内的文本，而outerText设置包括标签在内的文本

14.(“24.7” + 2.3 ) 的计算结果是（ C ）

A. 27 ; B. 24.7 2.3; C. 24.72.3; D. 26.7

15. （ B ）事件处理程序可用于在用户单击按钮时执行函数

A. onSubmit; B. onClick; C. onChange; D. onExit

属性当以下情况发生时，出现此事件onabort图像加载被中断onblur元素失去焦点onchange用户改变域的内容onclick鼠标点击某个对象ondblclick鼠标双击某个对象onerror当加载文档或图像时发生某个错误onfocus元素获得焦点onkeydown某个键盘的键被按下onkeypress某个键盘的键被按下或按住onkeyup某个键盘的键被松开onload某个页面或图像被完成加载onmousedown某个鼠标按键被按下onmousemove鼠标被移动onmouseout鼠标从某元素移开onmouseover鼠标被移到某元素之上onmouseup某个鼠标按键被松开onreset重置按钮被点击onresize窗口或框架被调整尺寸onselect文本被选定onsubmit提交按钮被点击onunload用户退出页面

16. 用户更改表单元素 Select 中的值时，就会调用（ D ）事件处理程序

A. onClick; B. onFocus; C. onMouseOver; D. onChange

17.onMouseUp 事件处理程序表示（ A ）

A. 鼠标被释放; B. 鼠标按下; C. 鼠标离开某个区域; D. 鼠标单击

18. 下列哪一项表示的不是按钮（ C ）

A. type="submit"; B. type="reset"; C. type="image"; D. type="button"

19.下面哪一项是换行符标签？（ C ）

A. <body>; B. <font>; C. <br>; D. <p>

font规定文本字体、大小和颜色：

20. 下列哪一项是在新窗口中打开网页文档。（ B ）

A. _self; B. _blank; C. _top; D. _parent

_blank在新窗口中打开被链接文档；

_self是指在本身这个网页窗口来打开新的网页链接；

_top表示在顶层窗口打开网页链接，即在整个窗口中打开被链接文档；

_parent表示在父窗口打开网页链接；

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>onclick="javascript：window.open('Default.aspx','_blank');"

21. 下面说法错误的是( D )

A. CSS样式表可以将格式和结构分离;

B. CSS样式表可以控制页面的布局;

C. CSS样式表可以使许多网页同时更新;

D. CSS样式表不能制作体积更小下载更快的网页

CSS样式表能为我们实现些什么样的功能?

1、你可以将格式和结构分离。

2、你可以以前所未有的能力控制页面布局。

3、你可以制作体积更小下载更快的网页。

4、你可以将许多网页同时更新，比以前更快更容易。

5、浏览器将成为你更友好的界面

将格式和结构分离

HTML从来没打算控制网页的格式或外观。这种语言定义了网页的结构和各要素的功能，而让浏览器自己决定应该让各要素以何种模样显示。但是网页设计者要求的更多。所以当 Netscape推出新的可以控制网页外观的HTML标签时，网页设计者无不欢呼雀跃。我们可以用<FONT FACE>、<I>包在<P>外边控制文章主体的外观等等。然后我们将所有东西都放入表格，用隐式GIF空格产生一个20象素的边距。一切都变得乱七八糟。编码变得越来越臃肿不堪，要想将什么内容迅速加到网页中变得越来越难。串接样式表通过将定义结构的部分和定义格式的部分分离使我们能够对页面的布局施加更多的控制。HTML仍可以保持简单明了的初衷。CSS代码独立出来从另一角度控制页面外观。

以前所未有的能力控制页面的布局

<FONT SIZE>能使我们调整字号，表格标签帮助我们生成边距，这都没错。但是，我们对HTML总体上的控制却很有限。我们不可能精确地生成80象素的高度，不可能控制行间距或字间距，我们不能在屏幕上精确定位图象的位置。但是现在，样式表使这一切都成为可能。

可以制作出体积更小下载更快的网页还有更好的消息：

样式表只是简单的文本，就象HTML那样。它不需要图象，不需要执行程序，不需要插件，不需要流式。它就象HTML指令那样快。有了CSS之后，以前必须求助于GIF的事情现在通过CSS就可以实现。还有，正如我先前提到的，使用串接样式表可以减少表格标签及其它加大HTML体积的代码，减少图象用量从而减少文件尺寸。

可以更快更容易地维护及更新大量的网页

没有样式表时，如果我想更新整个站点中所有主体文本的字体，我必须一页一页地修改每张网页。即便站点用数据库提供服务，我仍然需要更新所有的模板，而且更新每一模板中每一个实例实例的 <FONT FACE>。样式表的主旨就是将格式和结构分离。利于样式表，我可以将站点上所有的网页都指向单一的一个CSS文件，我只要修改CSS文件中某一行，那么整个站点都会随之发生变动。

浏览器将成为你更友好的界面

不象其它的的网络技术，样式表的代码有很好的兼容性，也就是说，如果用户丢失了某个插件时不会发生中断，或者使用老版本的浏览器时代码不会出现杂乱无章的情况。只要是可以识别串接样式表的浏览器就可以应用它。

22. 要使表格的边框不显示，应设置border的值是( B )

A. 1; B. 0; C. 2; D. 3

23. 如果要在表单里创建一个普通文本框，以下写法中正确的是( A )

A. <INPUT>; B. <INPUT type="password">;

C. <INPUT type="checkbox">; D. <INPUT type="radio">

24. 以下有关按钮的说法中，错误的是( B )

A. 可以用图像作为提交按钮; B. 可以用图像作为重置按钮;

C. 可以控制提交按钮上的显示文字; D. 可以控制重置按钮上的显示文字。

function fangfa(){

document.formname.submit();

document.formname.reset();

}

、什么是前端

前端对于网站来说，通常是指网页，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发。

前端设计一般可以理解为网站的视觉设计，比如 UI 设计；前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。

前端开发的核心部分主要是：HTML，CSS，JavaScript 三个部分。

HTMLHTML 是这三者中最基础的部分，相当于是网页的骨架，也就是网页的结构； CSSCSS 部分是网页的表现形式，也可以说是网页的美化，比如一个图片的大小、位置，文字的大小颜色等； JavaScriptJavaScript 是一种动态的脚本语言，负责与用户进行交互，增加用户体验的作用。

2、网页组成

一个网页的组成部分主要包括下面几个部分：文字、图片、输入框、视频、音频、超链接文字、图片、输入框、视频、音频、超链接等。

3、Web 标准

说道 Web 标准，不能不说 W3C 组织（World Wide Web Consortium），全称为「万维网联盟」。万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。

W3C 最重要的工作是发展 Web 规范（称为推荐，Recommendations），这些规范描述了 Web 的通信协议（比如 HTML 和 XHTML）和其他的构建模块。简单的说就是就是确定 Web 页面的语法格式和规范的。

与之类似的一个组织是「European Computer Manufacturers Association」（ECMA组织），这个组织制定了标准的脚本语言规范 ECMAScript ，而 JavaScript 就参照的这个规范。

那么 Web 标准规范了下面三个部分：

HTML 标准（结构标准），相当人的骨架结构。CSS 样式（表现）标准，相当于给人化妆变得更漂亮。JavaScript 行为标准，相当于人在唱歌，页面更灵动。

4、浏览器内核

浏览器内核是一个浏览器的核心部分，也就是「渲染引擎渲染引擎」。它的主要作用是决定一个浏览器如何显示网页的内容及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。

这里涉及到一个「兼容性问题兼容性问题」，浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。所以我们在编写代码的时候，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。

内核和对应的浏览器：内核和对应的浏览器：

trident : IE windows gecko : firefox 跨平台 webkit : safari/chrome presto : opera 渲染速度最快 blink : google/opera 共同开发

5、认识 HTML

HTML 全称为：超文本标记语言超文本标记语言（Hyper Text Markup Language）。这里超文本就是超链接的意思，就是可以实现页面的跳转。

6、 HTML 结构标准

HTML 基本结构如下：

<!doctype html> 声明文档类型
<html> 根标签
  <head> 头标签
    <title></title> 标题标签
  </head>
  <body> 主体标签
  </body>
</html>

<!DOCTYPE html> 是告诉浏览器，以下文件用 HTML 哪个版本解析，这里是 HTML5 版本。<html></html> 标签是一个网页的根标签，所有的标签都要写在这一对根标签里面。<head></head> 是头标签，主要是定义文档（网页）的头部，包括完档的属性和信息，文档的标题，还可以引入 JavaScript 脚本，CSS 格式等。<body></body> 是一个文档的主题，里面包含文档的所有内容，比如文本，超链接，图片，表格等内容。

7、html 标签分类

单标签 <! Doctype html> 双标签 <html> </html> ，<head></head>， <title></title>

8、 html 标签关系分类

包含（嵌套关系） <head><title></title></head> 父子关系并列关系 <head></head><body></body> 兄弟姐妹

9、开发工具

前期学习一种语言的时候，开发工具很重要。Web开发工具有很多。最简单的一个开发工具就是 Windows 系统自带的记事本了，但是又难用又难看，没有语法高亮、代码补全等功能。

那么我推荐大家使用的是「Sublime Text 3」代码编辑器，它虽小巧精致，但有着炫酷的界面，并且有大量的插件可以使用，大大提高了代码的编写效率。

提到 Web 开发工具不得不提到 JebBrain 全家桶的「 Webstorm 」软件。目前已经被广大 Web 开发者誉为"Web前端开发神器"、"最强大的HTML5编辑器"、"最智能的JavaScript IDE"等。它令人称道的是它智能打代码补全、代码一键格式化、HTML 提示、联想查询、代码重构等强大功能。

还有近些年来崛起的【visual studio code】，已经成为前端开发的主流工具。

建议初学者初期使用Sublime等文本编辑器，太过于智能的编辑器确实会带给我们极大的便利，但是在带给我们便利的同时，也会削弱我们对基础知识的掌握，只有自己一个单词一个单词敲出来的代码，才会让我们记得更加牢固。

1、什么是前端
2、网页组成
3、Web 标准
4、浏览器内核
5、认识 HTML
6、HTML 结构标准
7、html 标签分类
8、html 标签关系分类
9、开发工具

学习了解更多前端、互联网内容，点赞关注我。私信获取完整前端学习资料。

在线咨询

上一篇：为HTML页面添加视频、音频的方法-零基础自学网页制作
下一篇：从0开始通过一个商城实例手把手教你学习网站开发第2章HTML基础

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

网页设计HTML零基础入门

、Html概述

二、Html标签语法

1、成对标签

2、自闭合标签

三、Html基本架构

1、！DOCTYPE

2、html

3、head

4、meta

5、body

四、Html文档规范

五、Html注释

六、html基本属性

1.bgcolor

2.路径

3.background

七、Html标签

1.网页的组成

2、文本段落标签

3、文本控制标签

4、文本格式化标签

5、图片标签

6、audio

7、video

8、超链接

9、列表

1.有序列表

2、无序列表

3、描述列表

10、表格

10.1 基本使用

10.2 单元格合并

11、表单

11.1 基本使用

11.2 GET&POST

11.3 LABEL

11.4 INPUT

11.4.1 基本示例

11.4.2 调用摄像头

11.4.3 其他类型

11.4.4 HIDDEN

11.4.5 SUBMIT

11.4.6 禁用表单

11.4.7 PATTERN

11.4.8 TEXTAREA

11.4.9 SELECT

11.4.10 RADIO

11.4.11 CHECKBOX

11.4.12 FILE

11.4.13 日期时间

11.4.14 DATALIST

12、框架集

12.1 垂直框架

12.3 混合框架

12.4 导航框架

13、内联框架

、什么是前端

2、网页组成

3、Web 标准

4、浏览器内核

5、认识 HTML

6、 HTML 结构标准

7、html 标签分类

8、 html 标签关系分类

9、开发工具

您的项目需求