admin管理员组

文章数量:1794759

HTML网站设计

HTML网站设计

目录

 

HTML style="color:#2aa0ea" target=_blank class=infotextkey>网站设计

网站开发的步骤

开发之前的准备

静态页面设计工具

需要的浏览器

服务器应用程序开发环境

数据库开发环境

网页开发的模块

浏览器价值

HTML

HTML5的基本结构

标签(标记)

标签的分类

标签的属性

标签的书写要求

标签的书写规范

网页的生成

HTML中的常用基础标签

meta标签

标题标签h1-h6

p标签

字体格式化标签

hr标签

转义字符

img标签

a标签

pre标签

marquee标签

div标签

span标签

HTML中的模块化标签

无序列表

有序列表

自定义列表

表格

表单

HTML中的路径

绝对路径

相对路径

网站设计

  • 网站开发的完整流程

  • 网站页面设计的方法

    • 网站开发的步骤

    开发之前的准备 静态页面设计工具

    一般程序员：Dreamweaver、VS、VS Code、HBuilder、EditPlus......

    大牛、二逼：txt文本文档

    需要的浏览器

    IE8之后系列、火狐浏览器、谷歌浏览器、欧朋浏览器、苹果浏览器

    服务器应用程序开发环境

  • 基于.NET平台：VS

  • 基于Java平台：MyEclipse

    • 数据库开发环境

  • SQL Server

  • MySQL

    • 网页开发的模块

    遵循三大标准W3C组织规定的，只要网页遵循这三大标准那么不管网页在哪个国家，哪个城市，什么时间，什么浏览器上打开都能够保证网页的完整效果

    Web(网页)是由三部分组成

  • HTML标准-------骨骼架构

    主要负责搭建网页的页面架构

  • CSS标准---------肉体皮肤

    负责将网页的界面进行美化设计

  • JavaScript标准---灵魂

    负责使网页具有动态效果

    • 浏览器价值

    浏览器是网页运行的一个基本平台

    浏览器的真正作用：用来解析HTML、CSS、JS代码，将这些代码解析完成之后自然就展示出解析结果(网页)

    因为不同浏览器内核不同，但是所有的浏览器必须要遵循W3C提出的三大标准

    所有浏览器内核基本上来源于四个：IE Trident引擎、Edge浏览器edge引擎、火狐gecko引擎、谷歌webkit引擎、欧朋Presto引擎。因为不同的浏览器引擎是由不同的公司开发的，所以或多或少都有一些区别，但是只要遵循三大标准基本上最终的结果区别不大

    浏览器内核分成两部分：渲染引擎(处理HTML/CSS)和JS引擎(JS)。

    HTML

  • HTML是负责网页的框架

  • HyperText Markup Language超文本标记语言

  • 是一种用来制作超文本文档的简单“标记”语言

  • 使用HTML编写的超文本文档称为HTML文档

  • HTML定义了网页的逻辑结构、并且可以实现“嵌套”

  • 以.html或.htm作为文件的扩展

    • 学习web开发的第一个技术就是HTML技术，HTML就是静态网页资源

    学习HTML就是在学习一套标签，目前HTML推出了第五个版本，因此我们学习的是H5，和H4相比较没有什么不同只是多了一些标签

    XAML在H5之前基本上差点就替代了HTML

    HTML5的基本结构 <!DOCTYPE html> <html lang="en">    <head>        <meta charset="UTF-8">        <title>Document</title>    </head>    <body>            </body> </html>

    DOCTYPE：指定网页遵循的规范 html指的是H5，规定了这个文档中的所有元素所遵循的标准

  • 在Web设计中用来说明XHTML或者HTML是哪个版本

  • “XHTML”是“遵循XML规范”的HTML

    • html标签：定义了一个网页

    head标签：定义了网页的头部

    title标签：定义了网页的标题

    meta标签：定义了网页的说明信息

    body标签：定义网页的主体，主要的网页核心全部在body中放着

    标签我们可以理解成盒子，盒子用来装东西的，学习标签就是学习不同的盒子的作用

    所以盒子和盒子之间关系只有两种：包含关系、并列关系

    标签(标记)

    总是封装在一对"<>"中，浏览器打开html文件，在html文件中所有的<>都会被浏览器的渲染引擎第一时间当做是标签来处理

    标签的分类

  • 单标签

  • 只有一个标签，自己开始自己结束。例如

    <meta charset="UTF-8"/>

     

  • 只需要单独使用就能完整的表达意思，标记语法：< 标签名 >

  • 双标签

  • 由一个开始标签和一个结束标签组成。例如

    <title>Document</title>

     

  • 它由“始标记”和“尾标记”两部分组成，必须成对使用

  • 始标记告诉web浏览器从此处开始执行该标签的所有功能

  • 尾标记告诉web浏览器在这里结束该标签的所有功能，始标记前加一个“/”就成了尾标记

  • 标签语法：<标签名>内容</标签名>

    • 标签的属性

  • 例如

    <meta charset="UTF-8"/>

     

  • 标签的(双标签始标签)内部可以包含属性，用于给标签添加信息

  • 格式：<标签名 属性1="属性值1" 属性2="属性值2" ....>内容</标签名>

  • 各属性之间无先后次序，属性也可以省略

    • 标签的书写要求

  • 标签名称不区分大小写，但是尽量保持统一，一般都是小写

  • 属性名称必须小写，属性值用英文双引号括起来

  • 标签标准意义上必须严格嵌套

  • 双标签必须按照标准成对匹配，即使标签中没有内容也应该有始有终

    • 标签的书写规范

  • HTML文档无状态：HTML中的文字信息等不会浏览器不会识别回车换行，空格

  • 双标签必须要有结尾，如果没有他会默认将其后面的所有的内容至遇到下一个同级别的开始标签，全部扩进到起始标签中。

  • 文字内容可以直接放进body标签中，文字信息如果不在body标签中或者甚至不在html标签中那么都会以普通文本形式出现在网页中，但是这样不符合HTML的标准。

  • 同级别的标签不能嵌套，如果同级别的标签嵌套，会遵循就近原则(内容距离哪个标签近就按哪个标签的要求展示)，真实原因：浏览器做出了纠错处理：将外边的标签进行自动补全结束标签，然后将两个标签分开

  • 浏览器纠错标签：

    双标签丢失另一半，如果起始标签丢失了结束标签，则浏览器会自动补齐结束标签。

    而如果结束标签丢失了起始标签，则浏览器会自动消除结束标签

  • 标签的基本格式是<英文字母开始或者是/开始>，浏览器会将其当做标签去处理，然后如果这个标签是HTML中规定的符合标准的标签，会按照标签的作用去体现，如果不是HTML中的标准标签这种标签叫做自定义标签，只要自定义标签符合标签基本要求那么这个标签中的文本内容会按照普通文本出现

    但是如果有< > ,但是里面内容不符合标签的要求，那么会将< >连带内部内容原样输出

    • 网页的生成

  • 通过Dreamweaver、VS、VS Code、HBuilder等文本编写工具手工编写(首先必会)

  • 通过某些格式转换工具将现有的其他格式文档(Word文档)直接转成HTML文档

  • Web服务器(或HTTP服务器)一方实时动态的生成网页(后面ASP.NET重点)

    • HTML中的常用基础标签 meta标签

  • 标准在head标签中

  • 单标签

  • 作用：

  • 规定网页所使用的语言编码格式，避免乱码

  • 向搜索引擎说明网站的主要内容

    <meta name="description"          content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>

     

  • 为搜索引擎提供网页搜索的关键字

    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>

     

    • 标题标签h1-h6

  • 位置body标签中

  • 双标签

  • 说明：作用设置标题，从1号标题到6号标题依次减小

       <body>        <h1>一号标题</h1>        <h2>二号标题</h2>        <h3>三号标题</h3>                <h4>四号标题</h4>                <h5>五号标题</h5>                <h6>六号标题</h6>            </body>

  • 特征：

  • 每个标题占一行

  • 标题标签不要相互嵌套

    • p标签

  • 段落标签

  • 如果是单标签，表示一个段落结束，并且在段落后加一空行

    如果是双标签，意思就是之间内容是一整段

  • 段落标签浏览器中占一整行

    • br标签

  • 换行标签

  • 单标签

  • 不占空间

    • 字体格式化标签 作用标签
    加粗b标签、strong标签
    加斜i标签、em标签
    下划线u标签、ins标签
    删除线s标签、del标签、strike标签
    上标sup标签
    下标sub标签

  • 双标签

  • 每个标签占内部内容大小

  • 可以相互嵌套

    •        <b>加粗</b><strong>加粗</strong><br>          <i>加斜</i><em>加斜</em><br>        <u>下划线</u><ins>下划线</ins><br>        <s>删除线</s><del>删除线</del><br>       3<sup>2</sup>=9 <br>       H<sub>2</sub>O hr标签

  • 水平线标签

  • 占一整行

  • 单标签

    • 转义字符 说明转义符
    空格& nbsp;
    引号("")&quot ;
    小于<&lt ;
    大于>&gt ;
    版权号©&copy ;
    &&amp ;
    注册商标®&reg ;
    ±&plusmn ;
    乘号&times ;
    章节号§&sect ;
    美分¢&cent ;
    人民币符号¥&yen ;
    点号(居于中部，人名之间) ·&middot ;
    欧元符号€&euro ;
    英镑符号£&pound ;
    注册商标™&trade ;
    平方²&sup2 ;
    立方³&sup3 ;

  • 基本上都是以&开始以;结束

  • 基本上占自身大小

    • img标签

  • 图片标签

  • 单标签

  • 图片默认多大其多大，可以设置大小

  • 常用的图片类型

    图片类型优点缺点使用场合
    .jpg体积小，比较清晰有损压缩，画面失真网页图片
    .gif支持无损压缩和透明度，很流行支持有限透明度，效果不如别的图像网页图片
    .swf体积小，便于网络传输制作比较麻烦网页动画
    .png无损压缩、png还支持24位色优化不如jpg网页图片
    .bmp支持24位颜色深度，兼容性好不支持压缩，容量大桌面壁纸

     

  • 必要属性

    src：图像的位置路径

  • 可选属性

    title：鼠标放置于标签之后出现的提示文本，该属性也适用于其他标签

    alt：如果图片因为各种原因未加载出来，出现的提示内容

    width：宽度

    height：高度

    border：边框

    • a标签

  • 超链接标签

  • 双标签

  • 占内部内容大小

  • 必要属性

    href设置超链接的网址地址、或者文件地址

    如果给网址或者html文件地址、图片地址等会跳转到目标文件

    如果给doc文件、xls文件地址等文件是下载这个文件

  • 可选属性

    target属性：页面打开的目标位置

  • blank：新建窗口打开

  • self：本窗口打开

  • 浏览器默认是将所有的超链接以自身窗口打开，可以在head标签中使用base标签设置使所有的超链接以新建窗口打开设置target属性为blank，但是如果使用base设置了，个别超链接想要改变方式则不行

  • 发送电子邮件  

    <a href="mailto:896523846@qq">意见反馈</a>

     

    • pre标签

  • 预定义格式文本标签

  • 占一整行

  • 双标签

  • 作用：保持后台代码中所写的文本格式

    • marquee标签

  • 滚动标签

  • 双标签

    • div标签

  • 块状元素标签

  • 双标签

  • 占一行

    • span标签

  • 内联元素标签

  • 双标签

  • 占内容大小

    • HTML中的模块化标签 无序列表

  • 列表项前面带有“项目符号”

  • 格式：< ul> < /ul>中嵌套li标签，在ul中可以直接嵌套的标签是li标签

  • 属性：type：disc(默认：圆点)；circle(空心圆);square(正方形)

  • 每个ul占一整行，li也占一整行

       <ul type="square">        <li>C#</li>        <li>SQL</li>        <li>Html</li>    </ul>

    • 有序列表

  • 列表前面带有“自动生成的序号”

  • 格式：< ol>< /ol>中嵌套li标签，在ol中可以直接嵌套的标签是li标签

  • 属性：type：序号类型共有5种：a,A,i,I,1(默认)

  • 每个ol占一整行，li也占一整行

      前端模块    <ol type="a">        <li>HTML</li>        <li>CSS</li>        <li>JS</li>    </ol>

    • 自定义列表

  • 如果做一些术语解释等，采用自定义列表

  • 格式：< dl>< /dl>标签中嵌套dt和dd标签

  • 每个dl占一整行，dt、dd也占一整行

      HTML标签    <dl>        <dt>单标签</dt>        <dd>一个标签</dd>        <dd>例如img</dd>        <dt>双标签</dt>        <dd>开始标签和结束标签</dd>        <dd>常用的有a标签</dd>    </dl>

    在列表标签中要按照严格的标签嵌套方式使用，li标签或者dd标签中可以嵌套任何其他标签

    • 表格

    例如WPF中的DataGrid控件绑定表格信息

  • 表格作用

  • 主要用来存放网页上分类信息的文本和图像

  • 也可以实现网页的页面布局(基本上很少使用)

  • 表格的结构是由：表头、列标题、行、单元格组成

  • 表格的格式

    table标签：定义表格，里面可以直接放的标签就是caption、tr标签

    caption标签：定义表标题 可有可无

    th标签：定义列标题单元格 可有可无

    tr标签：定义行

    td标签：定义单元格

    tr标签中直接嵌套td标签、th标签

       <table>        <caption>学生信息表</caption>        <th>            <td>姓名</td>            <td>性别</td>            <td>年龄</td>            <td>电话</td>        </th>        <tr>            <td>张三</td>            <td>男</td>            <td>20</td>            <td>11223322</td>        </tr>        <tr>            <td>李四</td>            <td>女</td>            <td>20</td>            <td>11223322</td>        </tr>    </table>

     

  • 属性：border：设置表格的边框，可以给table设置也可以给th或者td设置

    width、height、单元格使用align属性设置单元格内部数据的对齐方式

    cellspacing：设置单元格间距

    cellpadding：设置单元格填充

  • table和Grid非常相似

    也可以进行行和列的合并使用rowspan和colspan进行合并行和列

    表格的合并采取的原则是：合并行：从上往下，合并列：从左往右

    合并之后一定要将多余的单元格删掉  

     <table border="1px" cellspacing="0" cellpadding="20px">        <caption>学生信息表</caption>        <tr>            <td colspan="5">学生基础信息</td> <table border="1px" cellspacing="0" cellpadding="20px">        <caption>学生信息表</caption>        <tr>            <td colspan="5">学生基础信息</td>        </tr>        <tr>            <th>姓名</th>            <th>性别</th>            <th>年龄</th>            <th>电话</th>            <th>班级</th>        </tr>        <tr>            <td>张三</td>            <td>男</td>            <td>20</td>            <td>11223322</td>            <td rowspan="2">C#1班</td>        </tr>        <tr>            <td>李四</td>            <td>女</td>            <td>20</td>            <td>11223322</td>        </tr>    </table>        </tr>        <tr>            <th>姓名</th>            <th>性别</th>            <th>年龄</th>            <th>电话</th>            <th>班级</th>        </tr>        <tr>            <td>张三</td>            <td>男</td>            <td>20</td>            <td>11223322</td>            <td rowspan="2">C#1班</td>        </tr>        <tr>            <td>李四</td>            <td>女</td>            <td>20</td>            <td>11223322</td>        </tr>    </table>

    • 表单

    网页的作用：为用户展示数据，接收用户提供的数据

    表单的作用

  • 浏览器通过表单收集和显示信息(客户端网页的作用)

  • 服务器可以通过表单接收用户提交的信息

  • 注意

  • 需要显示的信息可以不在表单中

  • 需要收集的信息一般都放在表单中

  • 一个网页中可以包含多个表单

    • 表单的组成

    表单域、表单控件、提示信息

  • form标签：定义表单区域

  • name属性：表单的名字

  • action属性：表单中接收到的所有数据发送给服务器的一个地址

  • method属性：一般使用两个数据post、get，数据的提交方式

  • 表单控件

  • input控件

  • type属性，控件的类型

    text：普通文本框

    password：密码框

    checkbox：复选框

    radio：单选框

    button：普通按钮

    submit：提交按钮，点了按钮会将这个表单中的所有 具有name属性的表单控件的数据提交至 action指定的服务器

    reset：重置按钮

    image：图片类型的提交按钮

  • value属性：控件中的默认值

  • size属性：控件的宽度

  • maxlength：文本框中的最大字符数量

  • checked：设置值为checked单选框或复选框被选中

  • name：控件的名字，要保证后台数据的准确获取必须要定义一个独一无二的名字。

    表单提交时将name和value通过action指定的url发送到服务器

  • select控件：实现下拉框

  • 里面要嵌套option标签

  • textarea控件：文本区域标签

    •  <h3>注册</h3>    <form action="#" method="GET" name="register">       姓名：<input type="text" name="xingm" value="张三"><br>       密码：<input type="password" value="123"><br>       性别：<input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女 <br>       爱好：<input type="checkbox">篮球 <input type="checkbox">足球<br>       国籍：<select name="contry" id="">            <option value="中国">中国</option>            <option value="">日本</option>            <option value="">美国</option>        </select>       说明：        <textarea></textarea> <br>        <input type="submit" value="提交">    </form>

    HTML中的路径 绝对路径

    绝对路径按照文件的物理位置去设置

    相对路径

    以当前html文档的位置为起始点，按照进入使用/，跳出使用../去寻找目标

     

     

     

    本文标签： 网站设计html

    版权声明：本文标题：HTML网站设计 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686939945a120576.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。