精华内容
下载资源
问答
  • 网页制作知识点归纳

    千次阅读 多人点赞 2017-05-02 15:40:04
    锚点常用于内容庞大繁杂的网页,便于查找定位某些资源的位置。 外部链接 :指向外部网站或者其他网络。通常分为: HTTP协议链接 E-mail链接 FTP链接 Telnet链接 文件下载链接 href=...

     

    一、HTML

    1、HTML简介

     

    HTML全称 Hyper Text Markup Language,它不是一款编程语言,而是属于标记语言的一种,用于描述超文本中内容的显示方式,但必须通过浏览器的解释和翻译才能正确显示所标记的内容。
    HTML元素包括:标题段落列表表格各种嵌入对象。其基本结构如下:

     

    <!doctype html>
    <html> <!--文件开始标记-->
        <head> <!--文件头开始标记-->
            ······文件头内容
        </head> <!--文件头结束标记-->
        <body> <!--文件主体开始标记-->
            ······文件主体内容 
    </body> <!--文件主体结束标记--></html> <!--文件结束标记-->

    2、基本标记

    一个完整的HTML文档必须包含 3 部分:

    • <html>:文档版本信息;

    • <head>:文档头部;

    • <body>:文档主体。

    文档头部标记<head>中通常包含的标记有:

    • 标题标记:<title>、

    • 样式:<style>、

    • 脚本:<script>、

    • 元信息标记:<meta>。

    元信息标记可以对页面信息的说明、关键字、刷新等进行设置,这些信息不会显示在页面中。一个网页中可以有多个meta元素。meta的属性有name和http-equiv,其中name用于描述网页,以便于搜索引擎查找、分类。name的部分使用方式如下:

    • 设置页面关键字:<meta name="keywords" content="具体的关键字" />

    • 设置页面说明:<meta name="description" content="页面说明" />

    • 定义编辑工具:<meta name="generator" content="采用的编辑器" />

    • 添加作者信息:<meta name="author" content="作者姓名" />

    http-equiv的部分使用方式如下:

    • 设置网页文字及语言:

      <!-- 在charset中设置语言的编码方式,如英文:ISO-8859-1 -->
      <meta http-equiv="content-type" content="text/html; charset=gb2312" />

       

    • 设置网页的定时跳转:

      <!-- 默认计时为秒 -->
      <meta http-equiv="refresh" content="跳转的时间; URL=跳转的地址" />

       

    HTML中采用<!--注释的内容-->对文档进行注释。
    标题字标记:<hn></hn>,n∈{1, 2, 3, 4, 5, 6},n越大,标题的级别越低。
    标题字对齐属性:align,用法:<hn align="值"></hn>;取值:左对齐left、右对齐right、居中center。
    段落标记<p>:可以没有</p>,每个新的<p>代表开始一个新的段落。
    换行标记<br />:将文本强制换行;不换行标记<nobr />:不允许浏览器对文本自动换行。
    水平线<hr />:在对应的位置上放置水平线。
    段落中的其他常用标记:

    空格"&<>ק©®
    &nbsp;&quot;&amp;&lt;&gt;&times;&sect;&copy;&reg;&trade;

    3、超链接

     

    URL:Uniform Resource Locator,统一资源标识符。
    绝对路径:包括服务器在内的完全路径。优点:与链接的源端点无关;缺点:测试时必须在Internet服务器端进行,不利于站点的移植。
    相对路径:与原端点的位置相关,即源端点与目标端点之间的相对位置。目标文件在同一目录下:文件名称;在当前目录的子级目录下:子级路径+文件名称;在当前位置的父级目录下:用“..”符号表示当前的父级目录,该符号可以使用多次来表示更高的父级目录。
    链接分为内部链接外部链接锚点链接
    目标窗口:设置链接的打开方式。target一共有四个值,分别为在当前页面打开链接(-self)、在全新的空白窗口打开连接(-blank)、在顶层框架中打开链接(-top)、在当前框架的上一层打开链接(-parent)
    内部链接:指向同一个网站中的资源。用法:<a href="innerFile.html">触发对象</a>。
    锚点链接:指向网页中的锚点。用法:创建锚点<a name="a_name"></a>;链接锚点<a href="#a_name"></a>。也可以链接到其他文件中的锚点,用法:<a href="链接的文件地址#锚点名称"></a>。
    锚点常用于内容庞大繁杂的网页,便于查找定位某些资源的位置。
    外部链接:指向外部网站或者其他网络。通常分为:

    HTTP协议链接E-mail链接FTP链接Telnet链接文件下载链接
    href="http://······"href="mailto:邮件地址"href="ftp://ftp地址"href="telnet://telnet地址"href="下载文件地址"

     

    4、使用图像

     

    插入图像标记img,相关属性:源文件src、提示文字alt、宽度和高度width和height、边框border、垂直间距vspace、水平间距hspace、对齐align、设定avi文件的播放dynsrc、设定avi文件的循环播放次数loop、设定avi文件循环播放延迟loopdelay、设定avi文件播放方式start、设定低分辨率图片lowsrc、映像地图usemap。
    src用于指定图像源文件的路径;alt有两个作用,一是正常显示图像时,鼠标指针置于其上会出现提示文字,二是未成功加载图像时,图像的位置会显示提示文字;width、height用于指定图像在网页中的宽度和高度。
    例:

     

    <img src="地址" alt="提示文字" width="宽度" height="高度" align="center" />

    图像热区连接:将图像分成多个热点区域,每个区域链接不同的网页。使用的标记为usemap。Dreamweaver能更加方便地设置热区连接。usemap的使用方式为:

    <img src="图像地址" usemap="映射图像名称" />
    <map name="映射图像名称">
        <area shape="热区形状" coords="热区坐标" href="链接地址">
    </map>

    5、使用列表

     

    列表是一种数据排列工具,它可以清晰直观的形式显示数据。HTML中一共有3种列表:有序列表无序列表定义列表
    有序列表,在列表中将每个元素用数字或字母标号。可以设置序号类型type和起始数值start。type共有五种类型值,分别为:数字1,小写英文字母a,大学英文字母A,小写罗马数字i,大写罗马数字I;有序列表默认从1开始,start可以用来设置有序列表的起始数值,对英文字母与罗马数字同样起作用,但start的设定值只能是数字。语法如下:

     

    <ol type="a" start="a">
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ol>

    无序列表,项目排列没有顺序,并以符号作为分项标识。使用<ul></ul>作为无序列表的开头和结束。type的值有三种:默认的黑色实心圆disc,空心圆环circle,正方形square。
    定义列表,由定义条件和定义描述组成。语法格式为:

    <dl>
        <dt>待释名词</dt>
        <dd>名词解释</dd>
    </dl>

    菜单列表,显示效果与无序列表相同,标记为<menu></menu>。

    6、使用表格

     

    表格常用于排列数据或者布局定位。
    表格由单元格三部分构成,一般通过3个标记来创建,分别是表格标记<table></table>、行标记<tr></tr>以及单元格标记<td></td>。
    在<table></table>之间可以利用caption标记设置表格的标题。格式为:<caption>表格的标题</caption>。
    表头是单元格的变体,常常指的是表格的第一行或第一列,用来表明这一行或列的内容属性。一般情况下浏览器会自动以粗体加居中的方式显示表头内容。表头的使用格式为:<th>表头内容</th>。
    宽度、高度和对齐方式是表格的三个主要基本属性。语法格式为:<table width="宽度" height="高度" align="对齐方式"></table>。
    表格的边框设置有:边框宽度border、边框颜色bordercolor、内框宽度cellspacing、表格内文字与边框间距cellpadding。这四个属性放在<table>中设置。其中cellspacing用于设置每个单元格之间的间距,cellpadding设置单元格内的文字与其边框之间的距离。
    表格的背景可以通过背景颜色bgcolor(如:#ffcc99)、背景图像background(图像地址)进行设置。
    表格的行属性包括:高度控制height、边框颜色bordercolor、行背景bgcolor与background、水平对齐方式align、垂直对齐方式valign。其中valign的取值范围为:顶部对齐top、中央对齐middle、底部对齐bottom。
    表格的单元格属性包括:单元格大小width与height、水平跨度colspan、垂直跨度rowspan、对齐方式align与valign、背景色bgcolor、边框颜色bordercolor、亮边框bordercolorlight、暗边框bordercolordark、背景图像background。默认情况下,单元格的大小会根据内容自动调整;colspan与rowspan用于合并相邻的单元格;
    tr的属性会覆盖table的属性设置,td的属性会覆盖tr的属性设置。
    表格的结构,具体分为首、主体、尾。表格结构的划分,有利于对表格属性进行统一设置。
    表首采用的标记是<thead></thead>,它可以设置的属性有背景颜色、文字对齐方式、文字的垂直对齐方式等。往往将表格的第一行或者前几行作为表首。
    表主体采用的标记是<tbody></tbody>。
    表尾采用的标记是<tfoot></tfoot>。表格结构的设置示例:

     

    <table 表格属性值设置>
        <thead 表首属性设置>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>学历</td>
                </tr>
        </thead>
        <tbody 表主体属性设置>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>本科</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>男</td>
                <td>专科</td>
            </tr>
        </tbody>
        <tfoot 表尾属性设置>
            <tr>
                <td colspan="3">这是表尾</td>
            </tr>
        </tfoot>
    </table>

    7、使用表单

     

    表单主要用来收集客户端提供的相关信息,使网页具有交互功能。使用<form></form>创建表单,在<form>中设置表单的基本属性。表单的处理程序action以及传送方法method是必不可少的参数。
    action用于指定表单数据提交到的目标地址。
    name用于为表单命名,不是表单的必要属性。
    method用于指定在把数据提交到服务器时使用的HTTP提交方法,取值为get或post。其中get作用是把数据提交到action属性指定的URL后,再将这个新的URL送到处理程序上;post将数据包含到表单主体中,然后送到处理程序上。
    enctype用于设置表单信息提交的编码方式,取值有默认的application/x-www-form-urlencoded与用于上传文件的multipart/form-data等。
    上面四个属性的使用示例如下:

     

    <form action="mailto:957419821@qq.com" name="a_form" method="post" enctype="application/x-www-form-urlencoded">
    </form>

    表单对象通常包括:文字字段text、密码域password、按钮、文件域file。按钮又细分为单选按钮radio、复选框checkbox、普通按钮button、提交按钮submit、重置按钮reset、图像按钮image。隐藏域中的数据是不显示在浏览器中的,这种需要提交的数据用hidden设置。
    text的语法:

    <input name="控件名称" type="text" value="文字字段的默认取值" size="控件长度" maxlength="最长字符数" />

    密码域只能让周围的人看不到输入的文本,并不能使数据安全,想要让数据安全需要在浏览器与服务器之间建立一个安全链接。password的语法:

    <input name="控件名称" type="password" value="文字字段的默认取值" size="控件长度" maxlength="最长字符数" />

    在单选按钮中必须设置value的值,同一个选择列表中的所有单选按钮的name值及value值必须相同,并且只能有一个按钮被设为checked。radio的语法:

    <input name="单选按钮名称" type="radio" value="单选按钮的取值" checked="checked" />

    复选框可以选择多个选项,并且通过对某一个框设置checked对选择列表进行默认选项设置。checkbox的语法如下:

    <input name="复选框名称" type="radio" value="复选框取值" checked />

    普通按钮一般需要脚本的配合,value的值是按钮上要显示的文字。普通按钮的使用方法:

    <input name="按钮名称" type="submit" value="按钮取值" onclick="处理程序" />

    提交按钮用于实现表单的提交,重置按钮用来清除用户在页面中输入的信息。两者的使用方式如下:

    <input name="按钮名称" type="submit" value="按钮取值" />
    <input name="按钮名称" type="reset" value="按钮取值" />

    图像按钮用于将指定的图像设定为按钮,它需要src设置目标图像。用法如下:

    <input name="图像域名称" type="image" src="图像路径"/>

    设置隐藏域只需将提交按钮中的type属性改为hidden即可。
    文件域用于浏览器查找硬盘中的文件路径,然后通过表单将选中的文件上传到服务器中。file的语法如下:

    <input name="文件域名称" type="file" size="控件长度" maxlength="最长字符数" />

    菜单与列表项主要用来选择给定答案中的一种,都是通过<select>与<option>标记来完成。
    下拉菜单的宽度由<option>中最长文本的宽度来决定。语法如下:

    <select name="下拉菜单名称">
        <option value="选项值" selected>选项显示内容</option>
        ···
    </select>

    列表项可以显示出几条信息,当条目超出一定数量后,列表项会显示滚动条。size用于设置在页面中显示的最多列表级数,语法如下:

    <select name="l列表项名称" size="显示的列表项数" multiple>
        <option value="选项值" selected>选项显示内容</option>
        ···
    </select>

    文本域用于提交多行文本,使用<textarea>标记实现。不能使用value设置默认显示的初始值。语法如下:

    <textarea name="文本域名城" cols="列数" rows="行数">文本域内显示的文本</textarea>

    id用来表示页面中的唯一元素。

    8、添加多媒体

     

    多媒体包括动画、声音、视频等媒体元素。
    滚动标记marquee可以用来移动文字、网页、表格等元素。marquee可以设置的属性有:滚动方向direction、滚动方式behavior、滚动速度scrollamount、滚动延迟scrolldelay、滚动循环loop、滚动范围width和height、滚动背景颜色bgcolor、空白空间hspace和vspace。
    滚动方向direction默认情况下是从右向左,取值可以为:向上up、向下down、向左left、向右right。
    滚动方式behavior默认效果是循环滚动,取值可以为:循环滚动scroll、仅循环一次slide、来回交替滚动alternate。
    滚动速度scrollamount单位是像素,用来设置每次滚动时移动的长度。
    滚动延迟scrolldelay单位是毫秒,用来设置相邻两次移动之间的停留时间。
    滚动循环loop用来设置滚动的次数,默认情况下为无限循环。
    滚动范围width、height默认效果是文字背景与文字同高与浏览器同宽,单位为像素
    滚动背景颜色bgcolor设置滚动范围的背景颜色。
    空白空间hspace和vspace设置滚动对象到滚动范围上下边框的距离,默认是0。

     

    滚动效果的一个示例:

     

    <marquee direction="up" behavior="alternate" scrollamount="3" scrolldelay="400" loop="10" width="300" height="400" bgcolor="#ff9966" hspace="50" vspace="40">
        我在滚动
    </marquee>
    采用embed标记插入Flash动画、声音文件和视频文件。语法如下:
    <embed src="文件地址" width="宽度" height="高度"></embed>

     

     

     

    9、HTML 5 入门基础

     

    HTML 5 是一种网络标准,比HTML 4.01 和XHTML 1.0 具有更强的页面表现功能,可以充分调用本地资源。
    HTML 5 采用一些新属性替代了部分JavaScript代码,并把部分Div布局代码变得更加语义化,这使得网站前端的代码变得更加精炼、简洁和清晰。它提供了搞笑的数据管理、绘制、视频和音频工具,拥有强大的灵活性,支持开发交互式网站,引入了新标签以及表单控制、API、多媒体、数据库支持等增强性功能。
    3个要点:
    i、省略标签
    a、必须写明结束标签的元素:
    area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、whr
    b、可以省略结束标签的元素:
    li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th
    c、可以省略整个标签的元素:
    html、head、body、colgroup、tbody
    ii、取得布尔值的属性
    设定属性值为“true”时,可以将属性值设为属性名称本身,也可以设为空字符串,甚至只需写出该属性而不用设置,如:

    <!--以下的checked属性值皆为true-->
    <input type="checkbox" checked >
    <input type="checkbox" checked="checked" >
    <input type="checkbox" checked="" >

    iii、省略属性的引用符
    只要属性值不包含“空格”、“<”、“>”、“ ' ”、“ " ”、“=”、“ ` ”等符号,都可以省略属性的引用符。如:

    <!--以下的type属性值皆为text-->
    <input type="text" >
    <input type='text' >
    <input type=text >

    HTML 5 与HTML 4 相比,优点是:
    i、使搜索引擎更加容易抓取和索引
    ii、提供更多的功能
    iii、可用性提高,提升用户体验
    HTML 5 新增的元素和废除的元素:
    新增结构元素:章节section、文章头部header、文章底部footer、链接集合nav、文章article
    新增块级元素:侧边aside、媒介内容的分组figure、媒介内容的标题说明ficaption、日常对话dialog
    新增行内语义元素:标记文本内容mark、日期/时间time、度量meter、运行进度progress
    新增嵌入多媒体元素与交互性元素:视频video、音频audio、多媒体embed
    新增input元素的type类型:url、email、date、time、datetime
    废除能使用CSS的元素
    废除frame框架
    废除只能部分浏览器支持的元素
    废除acronym、dir、isindex、listing、xmp、nextid、plaintext,并分别用abbr、ul、form+input、pre、code、guids、"text/plain"替代。
    此外HTML 5 还新增并废除了一些属性。

     

    10、HTML 5 的结构

     

    主体结构元素:article、section、nav、aside
    非主体结构元素:header、hgroup、footer、address
    article具有独立的结构,可以作为独立的内容项,例如论坛帖子、杂志文章、博客文章、用户评论、插件等。该元素可以将信息各部分进行任意分组。可以包含<header><footer>等标签。
    一个网页中可能有多个独立的article元素,每一个article元素都允许有自己的标题与脚注等从属元素,并允许对自己的从属元素单独使用样式。例如对article中的header采用样式设置:article header{color:red;text-align:left;}
    section元素对于网站或APP中页面上的内容进行分块。通常由内容及标题构成。
    nav元素在HTML 5 中用于包裹一个导航链接组,在同一个页面中可以存在多个nav。使用位置:顶部传统导航条、侧边导航、页内导航。
    aside元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。当aside放在article中时,可以作为主要内容的附属信息部分;当aside放在article元素之外时,可以作为页面或站点全局的附属信息部分。
    header元素用于放置整个页面或页面内的一个内容区块的标题,包括文字、表格、表单、logo图片等。它常置于页面的开头。每个页面可以有多个header,每个header至少有一个heading元素(h1~h6)。
    hgroup用于将标题及其子标题进行分组,一个内容区块的标题及其子标题算一组。当文章只有一个主标题时,不需要hgroup。
    footer用于放置脚注信息,如作者、相关阅读、版权信息。可以多次使用。footer可以单独用于整个页面的页脚,也可以作为一个内容区块的页脚,如<section>、<article>。
    address用于放置联系信息,如作者、站点链接、电子邮件、电话号码等,通常放置在文档末尾,这部分内容在浏览器中会以斜体显示。

    11、HTML 5 补充

     

    • 视频video

    支持OGG、MP4、WEBM3种视频格式,拥有的属性有:src、poster、preload、autoplay、loop、controls、width、height等。
    poster:指定视频加载时或用户点击播放按钮前显示的图像。
    preload:定义视频是否预加载,一共3个取值:none、metadata、auto,默认为auto。none不载入视频,metadata载入元数据,auto载入整个视频。若使用autoplay属性,则preload被忽略。
    autoplay:是否自动播放,接收布尔值。
    loop:是否循环播放,接收布尔值。
    controls:是否显示控件,接收布尔值。
    应用于video元素中的source元素用来插入视频源,并且可以插入多个同一个但不同编码方式的视频,网页会使用第一个浏览器可以识别的格式。source元素只能在video中未设置src时使用。它的属性有3个:源地址src、媒体类型type、媒介选项media。type属性值形式为:"video/mp4"或"video/ogg"或"video/webm",media默认为"all"。
    一个例子:

     

    <video width="500" height="240" controls autoplay loop poster="某个图片地址">
        <source src="xxx.mp3" type="video/mp3">
        <source src="xxx.ogg" type="video/ogg">
        <source src="xxx.webm" type="video/webm">
    </video>
    • 音频audio

    audio同样可以利用source插入多个音频源。当audio标记中不包含controls属性时,页面将不会显示播放器,这时应将音频播放的方法放在页面的onload事件中。
    可以被audio触发的事件有:onClick、onMouseMove、onFocus、onPlay、onPause、onEnded等,故可用JavaScript实现交互。
    一个例子:

    <script>
        function showpicture(){
            document.getElementById("musicstaff").style.visibility="visible";
        }
        function hidepicture(){
            document.getElementById("musicstaff").style.visibility="hidden";
        }
        function thanks(){
            document.getElemenById("thanks").innerHTML="<h2>Thanks for listening</h2>";
        }
    </script>
    <div id="thanks"></div>
    <audio id="audio1" controls onplay="showpicture()" onpause="hidepicture()" onended="thanks()">
        <source src="某个音频地址" type="audio/格式">
    </audio>
    <img src="某个图片地址" width="376" height="262" id="musicstaff" style="visibility:hidden;">
    • 画布canvas

    canvas可以直接在HTML上进行图形操作。它可以控制指定矩形区域当中的每一个像素。canvas必须包含width与height属性。需要使用JavaScript。
    两个应用方式:
    线性渐变:通过document获得canvas元素,得到canvas中的context,利用得到的context创建线性渐变linearGradient,在渐变中设置颜色点及该点的颜色,用最后的渐变设置context的style,设置context的rect。
    方法createLinearGradient(x1, y1, x2, y2)设置渐变的区域和方向。
    一个例子:

    <script>
        var myCanvas = document.getElementById("this_is_a_canvas");
        var myContext = myCanvas.getContext("2d");
        var myGradient = myContext.createLinearGradient(30, 30, 300, 300);
        myGradient.addColorStop("0", "#CC3");
        myGradient.addColorStop(".40", "#FF0");
        myGradient.addColorStop(".57", "#390");
        myGradient.addColorStop(".82", "#90C");
        myGradient.addColorStop("1.0", "#9FF");
        myContext.fillStyle = myGradient;
        myContext.fillRect(0, 0, 400, 400);
    </script>

    径向渐变:从一个点向外围扩散,可以使用createRadialGradient()方法创建,该方法拥有6个参数,每3个为一组,每组定义一个圆的原点和半径。与创建线性渐变的过程相似,不同的是要用createRadialGradient()方法替代createLinearGradient()方法。例如:

    var myGradient = myContext.createRadialGradient(200, 200, 10, 300, 300, 300);
    • 可缩放矢量图形SVG

    SVG是基于XML的一种图形格式,遵从XML语法,并用文本格式的描述性语言来描述图像内容,是一种与图像分辨率无关的矢量图形格式。支持3种类型的图形对象:形状、图像、文本。SVG可以将图形对象分组、样本化、转换和组合到之前呈现的对象中,且具有嵌套转换、剪切路径、alpha蒙板和模板对象。
    SVG是动态和交互式的,并支持DOM。
    SVG的基本图形有:圆circle、椭圆ellipse、矩形rect、线条line、折线polyline、多边形polygon。
    circle的属性:半径r、圆心坐标cx和cy;
    rect的属性:左上角坐标x和y、宽度和高度width与height、4个圆角的半径rx和ty;
    ellipse的属性:中心坐标cx和cy、半长轴和半短轴rx和ry;
    line的属性:起点和终点坐标x1、y1、x2、y2;
    polyline是相互连接的线段的集合,需要使用points属性,语法为:<polyline points="坐标1,坐标2, ···" fill="none" stroke="#000" />。
    polygon使用方式与polyline相同,但在最后会自动闭合线条。
    在同一个svg标记下的图像元素会依次重叠,文本不能自动换行,各个图像可以使用fill及stroke属性设置图像的内部填充颜色及笔画的颜色及宽度。stroke-width及stroke-linecap用来设置线条宽度和线段端点的形状,stroke-linecap的取值有:butt、square、round。
    svg支持animate标记来实现动画,一个例子:

     

     

    <svg width="8cm" height="3cm" viewBox="0 0 800 300">
        <desc>基本动画元素</desc>
        <rect x="1" y="1" width="798" height="298" fill="none" stroke="blue" stroke-width="2" />
        <rect id="RectElement" x="300" y="100" width="300" height="100" fill="rgb(255, 255, 0)">
            <animate attributeName="x" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="300" to="0"/>
            <animate attributeName="y" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="0" />
            <animate attributeName="width" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="300" to="800" />
            <animate attributeName="height" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="300" />
        </rect>
        <g transform="translate(100, 100)">
            <text id="TextElement" x="0" y="0" font-family="Verdana" font-size="35.27" visibility="hidden">
    动画播放!
                <set attributeName="visibility" attributeType="CSS" to="visible" begin="3s" dur="6s" fill="freeze" />
                <animateMotion path="M 0 0 L 100 100" begin="3s" dur="6s" fill="freeze" />
                <animate attributeName="fill" attributeType="CSS" from="rgb(0, 0, 255)" to="rgb(128, 0, 0)" begin="3s"dur="6s" fill="freeze" />
                <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="3s" dur="6s" fill="freeze" />
                <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="3s" dur="6s" fill="freeze" />
            </text>
        </g>
    </svg>

     

    展开全文
  • 基本上都是本网页设计的所有知识点,很全面,基本上有所有响应式的知识在里面
  • 自适应网页设计知识点总结

    千次阅读 2014-02-08 17:16:57
    自适应网页设计知识点总结 "自适应网页设计"到底是怎么做到的?其实并不难。 一. 允许网页宽度自动调整: 首先,在网页代码的头部,加入一行viewport元标签。 viewport是网页默认的宽度和高度,上面这行代码...

    自适应网页设计的知识点总结

    "自适应网页设计"到底是怎么做到的?其实并不难。

    . 允许网页宽度自动调整:

    首先,在网页代码的头部,加入一行viewport元标签。

    < meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, width=device-width"/>

    viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%

    对于老式IE678浏览器需要js处理,由于主要平台是ios和安卓,所以可以暂时不考虑Opera不支持。

    . 不使用绝对宽度

    由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。

    具体说,CSS代码不能指定像素宽度:

    width:xxx px;

    只能指定百分比来定义列宽度:

    width: xx%;

    或者:

    width:auto;

    或者:

    使用最大宽度和最大高度max-width,max-height;

    . 相对大小的字体

    字体也不能使用绝对大小(px),而只能使用相对大小(em)。
      body {
        font: normal 100% Helvetica, Arial, sans-serif;
      }
    上面的代码指定,字体大小是页面默认大小的100%,即16像素。
      h1 {
        font-size: 1.5em;
      }
    然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。
      small {
        font-size: 0.875em;
      }
    small
    元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。

    . 流动布局(fluid grid
    "
    流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。
      .main {
        float: right;
        width: 70%;
      }
      .leftBar {
        float: left;
        width: 25%;
      }
    float
    的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。
    另外,绝对定位(position: absolute)的使用,也要非常小心。

    . "自适应网页设计"的核心,就是CSS3引入的Media Query模块。
    它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。 
        media="screen and (max-device-width: 400px)"
        href="tinyScreen.css" />
    上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。
        media="screen and (min-width: 400px) and (max-device-width: 600px)"
        href="smallScreen.css" />
    如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。
    除了用html标签加载CSS文件,还可以在现有CSS文件中加载。
      @import url("tinyScreen.css") screen and (max-device-width: 400px);

    . CSS@media规则
    同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。
      @media screen and (max-device-width: 400px) {
        .column {
          float: none;
          width:auto;
        }
        #sidebar {
          display:none;
        }
      }
    上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。

    为列和浮动元素采用线性设计:

    @media screen and (max-width: 480px) {
        div,li {
          display: block;
          float:none;
          width:100%;
        }
      }


    . 图片的自适应(fluid image
    除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。
    这只要一行CSS代码:
      img { max-width: 100%;}
    这行代码对于大多数嵌入网页的视频也有效,所以可以写成:
      img, object { max-width: 100%;}
    老版本的IE不支持max-width,所以只好写成:
      img { width: 100%; }
    此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:
      img { -ms-interpolation-mode: bicubic; }
    或者,Ethan MarcotteimgSizer.js
      addLoadEvent(function() {
        var imgs = document.getElementById_x_x_x_x("content").getElementsByTagName("img");
        imgSizer.collate(imgs);
      });
    不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。

      首页内容搜索栏,产品分类,热门产品,关键字。

    九. 避免出现水平滚动条

    有时,图片或其他网页元素会阻碍在一般情况下能够正常流动的容器元素.一下脚本能轻松地阻止上述行为:

    img,iframe {max-width:100%;box-sizing:border-box;}


    谢谢关注websites博客!


    刚刚博主喜得小公举, 就开个关于宝妈宝爸孕育宝宝的知识干货,以及女性私密和宝爸爱看的笑话.的订阅号, 每天都更新,全是手写的原创(除了宝爸爱看的笑话之类的,你懂的,这个真原创不了).

    开这个订阅号原因:老婆是妇幼保护师,我本来就是程序猿,所以正好把这想法实现,希望大家来看看哦! 


    展开全文
  • word教育资料 网页制作复习题 第1章 网页制作概况 网页的概念 网页是用HTML超文本编辑语言语言编写通过WWW传播并被WEB浏览器翻译成为可以显示出来的集文本超链接图片声音和动画视频等信息元素为一体的页面文件 网页...
  • 标记型网页制作工具:是指创建的网页文件在编辑过程中只能看到页面的源代码,而需要转到浏览器中才能够看到页面的效果。要求用户对HTML的使用方法非常熟悉才能够做出希望要的页面,其优点在于可以完全地控制页面的...

    IP地址:在TCP/IP地址编排方案中,采用了一种通用的地址格式,为互联网中的每一个网络和每一台计算机都分配了一个地址,这个地址在Internet中是唯一的,并以此屏蔽了物理网络地址的差异。这个统一的地址是由高层软件技术来实现的,准确地说是通过IP协议层来实现的。IP层所用到的地址是互联网地址,又叫IP地址。

    域名:为了解决IP地址不便于记忆这个问题,同时也为了便于网络地址的分层管理和分配,自1984年起在互联网上采用了一种字符型的地址标识,这便是域名(Domain Name)。

    协议:事先约定或定义的一组通信规则,它精确地规定了所交换数据的格式和传输方法,即计算机在交换信息时都要遵守的表达方式。

    URL:统一资源定位器的英文缩写,是一个提供在全球广域网上的站点或资源的Internet位置字符串,与此被访问的站点或资源所协议在一起。主要由四部分组成,分别是:访问类型、访问的主机、端口号以及访问的文件的路径。

    互联网:是由世界上各种各样的网络互联所形成的“网络的网络”,是一个网际网。有时候也根据音译称为“因特网”,它是目前世界上最大的计算机通信网络,遍布全球,将世界各地种种规模的计算机网络连接成一个整体,从而实现信息交流和共享。

    Web浏览器:是指一个运行在用户计算机上的程序,主要作用在于在客户端与服务器端之间进行交互、通信,负责下载、显示网页,因此也称为WWW客户程序。

    软件协议:程序之间的通信是通过软件协议完成的。无论是网络客户机,还是网络服务器都提供有特定的协议包,它们与其他计算机通信之间,必须在那些计算机中载入相应的协议包,协议包里包含了计算机访问特定网络设备或服务所需的协议。

    标记型网页制作工具:是指创建的网页文件在编辑过程中只能看到页面的源代码,而需要转到浏览器中才能够看到页面的效果。要求用户对HTML的使用方法非常熟悉才能够做出希望要的页面,其优点在于可以完全地控制页面的元素,写出精简的代码。

    下载:为了能够方便处理,客户机把文件从服务器上复制到本地的过程,与下载相反的过程是上传(Upload)。

    网页:Web站点中使用HTML编写而成的单位文档,是Web中的信息载体。其使用的描述语言是HTML.

    所见所得型网页制作工具:创建的网页文件在编辑过程中的显示与文件最终在浏览器中显示的效果是一样的,用户不需要接触HTML源代码就可以做出希望要的页面。

    HTML:超文本标记语言是创建网页时使用的语言。HTML文件被浏览器所解释后就是网页,由标记和文本组成。

    网站的链接结构:页面之间相互链接的拓扑结构,它建立在目录结构基础之上,可以跨越目录甚至主机。

    网站风格:整个网站所采用的结构布局、色调、文字、标志、图案等要素带给浏览者的关于网站的印象。

    信息看板:Web站点中为访问者提供的各种最新信息的集合。

    树形链接结构:类似DOS的目录结构,首页链接指向二级页面,二级页面链接指向三级页面。当使用这样的链接结构浏览时,一级级进入,一级级退出。优点是条理清晰,访问者明确知道自己在什么位置,不会“迷路”。缺点是浏览效率低,要进行栏目跳转时,必须绕经首页。

    展开全文
  • 自适应网页设计到底是怎么做到的比如允许网页宽度自动调整、相对大小的字体、流动布局(fluid grid)等等,下面为大家介绍下
  • 1.什么是bom bom 浏览器对象模型,他独立于内容而与浏览器窗口进行交互的对象,其核心对象是window bom是由一系列的对象构成,并且每个对象都提供很多方法与属性 window.onresize = function(){} 检测浏览器窗口是否...

    在这里插入图片描述

    在这里插入图片描述
    onpageshow 和 onload 事件都是重新加载页面事件不同的是 onpageshow在火狐浏览器里面支持效果很好

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    缓冲动画

    在这里插入图片描述
    定位window滚动条位置

    window.scroll(x,y);

    js之手机端操作

    在这里插入图片描述

    展开全文
  • 计算机网络基础知识点总结

    万次阅读 多人点赞 2019-06-03 22:27:31
    网络层 IP(Internet Protocol,网际协议)是为计算机网络相互连接进行通信而设计的协议。 ARP(Address Resolution Protocol,地址解析协议) ICMP(Internet Control Message Protocol,网际控制报文协议) IGMP...
  • 网页设计中,总有一些技术是我们经常使用的,并且作用也是非常重要的,所以来总计一下这些技术都有哪些。对以后的网页设计的学习帮助更大。 字体:Css中的字体属性能够应用到各种有文字的地方。 1.HTML标签<...
  • vue知识点归纳总结(笔记)

    千次阅读 多人点赞 2019-12-29 16:41:08
    当前总结是本人在业余学习与实践过程后的总结归纳,旨在检验自己的积累,也方便忘记时查阅,同时也希望能帮助那些这方面知识匮乏的同行门,总结是基于vue2.x,vue-cli3.x,主要记录些,vue常用的指令、事件,监听、数据...
  • css的知识点归纳总结

    千次阅读 多人点赞 2020-02-07 16:57:59
    每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性、常用于网页布局和网页结构的搭建 块级元素的特点: 总是从新行开始 高度、行高、外边距以及内边距都可以控制。 宽度...
  • 大一新生,刚学完HTML5不久,根据书上总结的最基础的知识点,适合没接触过HTML5的人看看
  • HBase核心知识点总结

    2021-02-24 23:10:42
    HBase被设计成在一个服务器集群上运行,可以相应地横向扩展。互联网搜索问题:爬虫收集网页,存储到BigTable里,MapReduce计算作业扫描全表生成搜索索引,从BigTable中查询搜索结果,展示给用户。抓取增量数据:例如
  • 平面设计基础(PS)知识点总结

    千次阅读 2019-02-21 16:11:16
     PS基础知识: 一、ps全称:Adobe Photoshop ,Adobe Photoshop是由Adobe...3.在网页设计中的应用 4.在界面设计中的应用 5.在数码艺术中的应用 6.在效果图后期制作中的应用 三、图片文件格式: (gif) (jpeg) (png)...
  • 计算机网络知识点总结 1、下面的总结针对前言和1-15页 2、因特网生态系统 3、TCP分岔通常用于优化云服务的性能 4、Featuring the Internet:因特网特色 5、因特网是一种革命性和破坏性的技术(都...
  • CSS中Font的一些基本知识点归纳总结

    千次阅读 2020-02-26 20:58:42
    一般来讲,一款字库的诞生,要经过字体设计师的创意设计、字体制作人员一笔一划的制作、修改,技术开发人员对字符进行编码、添加程序指令、装库、开发安装程序,测试人员对字库进行校对、软件测试、兼容性测试,生产...
  • 前端越发展越复杂,知识点越来越庞杂。 前端要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念: HTML负责结构,网页想要表达的内容由html书写。 CSS负责样式,网页的美与丑由它来控制 JS...
  • 知识点总结来了!是新朋友吗?记得先点 蓝字关注我哦~互联网正在改变我们的生活,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?...
  • 网页编程基础第三章知识点总结——超链接和图像 知识点预览 网页中的超链接 网页中的图像   网页中的超链接   1.超级链接和URL a)超级链接的构成 Oracle  i.可见部分:带下划线的文字  ii.不可见部分:URL...
  • 知识点总结

    2018-12-12 09:30:47
    vlc开发随笔 --- vlc 提供了ie浏览器的activeX插件和火狐或者chrome的插件,基本上覆盖了所有浏览器,所以有复杂解码需求的情况下用vlc来解决网页播放视频,也是一种没办法的办法。 海康摄像机、NVR、流媒体...
  • 爬虫知识点总结

    2019-12-17 22:26:32
    爬虫知识点小结 网络爬虫 一、定义 按照一定的规则,自动抓取万维网数据的程序或脚本。 二、爬虫可以解决的问题 1.解决冷启动问题 2.搜索引擎的根基 ---- 通用爬虫是搜索引擎的重要组成部分 3.帮助...
  • 数据挖掘基础知识点总结

    千次阅读 2019-08-10 16:34:55
    本文总结了数据仓库和数据挖掘的基础知识
  • )经过一段时间对html css的学习,我想对其中最常用的知识点及用法进行一些整理,并且对困惑的地方和入门学习踩过的坑进行思考总结 首先列出最最基础的常用标签是 <div></div> <p></p> <a...
  • HTML知识点总结

    2018-12-26 21:04:58
    第一章:知识点总结 1. &amp;amp;amp;lt;b&amp;amp;amp;gt;HTML文档结构&amp;amp;amp;lt;/b&amp;amp;amp;gt;(括号里面的是注释) &amp;amp;amp;lt;!DOCTYPE html &amp;amp;amp;gt; *注:...
  • 软件工程知识点总结

    千次阅读 2019-07-23 16:29:45
    软件工程知识点总结 有以下知识点(考试内容,当然不止这些) 1. 软件工程的定义 2. 软件生存周期 3. 软件过程模型 4. 需求分析的定义、获取 5. 常见的软件体系结构(B/S 、C/S 、软件总线中间件) 6. SOA ...
  • 1.2 Web技术的基本概念 web的本意是蜘蛛网和网的意思,在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式,即超文本(hypertext)、超媒体(超文本,图片,视频)(hypermedia)...
  • HTML知识点 一功能 用来制作静态网页网页中的全部内容都是通过 Html 语言展现出来 使用场合开发静态网页 二思想 一切功能都由标签实现标签具有四要素 三常用标签 标签关键字 功能 常用属性 <font</font> 设置字体 ,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 48,450
精华内容 19,380
关键字:

网页制作知识点归纳