zoukankan      html  css  js  c++  java
  • HTML

     

    网页设计的基本概念

    网页是从互联网上获取信息的途径。

    网页设计的基础   

    HTML(超文本标记语言)

    网页的分类   

    静态网页   

    动态网页   

    交互式网页

    HTML

    全    称: HyperText Mark-up Language
    中文名: 超标记语言
    作    用:开发网文本页内容
    网页文件默认后缀.html .htm

    格式:

    <HTML>
       <HEAD>
          <TITLE> 网页的标题 </TITLE>
       </HEAD>
       <BODY>
          网页的内容
       </BODY>
    </HTML>

    <HTML>:说明该文件是一个HTML文件
    <HEAD>:HTML文件的头部,主要进行网页配置信息的设置与加载
    <TITLE>用于声明网页的显示名称
    <BODY>:HTML文件的主体,用于编写网页中要显示的主体内容

    HTML的头标签

    头标签都放在<head></head>头部分之间。包括:title base meta link
    <title>:指定浏览器的标题栏显示的内容。
    <base>:为页面上的所有链接规定默认地址或默认目标。
    <meta>:可提供有关页面的基本信息
    <link>:定义文档与外部资源的关系。

    标签定义语法规则

    任何标签皆由"<"及">"所包围
    标签名与小于号之间不能留有空白字符。
    标签中字母不区分大小写。
    某些标签要加上参数,某些则不必,参数可以使用双引号或者单引号成对包裹,也可以省略
    参数只可加于起始标签中。
    在起始标签的标签名前加上符号"/"便是其终结标签,如 </font>

    标记按形态分为围堵标签与空标签
    围堵标签以起始标签及终结标签将文字围住,令其达到预期显示效果。
    空标签是指标签单独出现,只有起始标签没有终结标签。

    HTML中常见的标签

    注释标签:<!-- -->
    标题标签: <hx>
    文字粗体标签: <b>
    文字斜体标签: <i>
    下划线标签: <u>
    换行标签: <br>
    段落标签: <p>
    空格标签: &nbsp;

    字体标签

    标题标签  <h1  … <h6>
    字体状态标签 <b>  <i>  <u> <sub> <sup>
    实体标记:显示效果固定(优先使用)
    逻辑标记:根据浏览器不同变换显示效果
    <strong> <address> 等等
    字体标签  <font>

    字体标签:<font>
    功能:对网页中的文字进行字体设置,非主流修改方案
    常用属性:
    face :文字字体
    size :文字大小
    color:文字颜色
    内建值如red,blue,green等
    调色器#FF0000

    转义字符/特殊字符

    &lt;    <   小于号
    &gt;    >  大于号
    &amp;   &   
    &quot;   “   引号
    &reg;       己注册
    &copy;     版权
    &trade;     商标
    &ensp;      半方大的空白
    &emsp;     全方大的空白
    &nbsp;      不断行的空白

    清单标签

    清单标签分为三种
    普通清单:带有层次的清单
    顺序清单:清单列表具有一定的数字序列顺序
    无序清单:清单列表无任何前后顺序

    普通清单标签:<dl>
    功能:定义清单,是容器型标签,可以省略
    定义条目标签:<dt>
    功能:定义条目,隶属<dl>标签
    定义内容标签:<dd>
    功能:定义清单内容,隶属<dl>标签

    顺序清单标签:<ol>
    功能:描述具有一定的数字排序顺序清单
    常用属性:
    type:设定顺序显示风格(1,a,A,i,I)
    start:设定清单起始值,只能为数字

    清单项标签:<li>
    功能:为清单生成对应的清单项目
    常用属性:
    value(顺序清单)
    type(非顺序清单)

    无序清单

    顺序清单标签:<ul>
    功能:描述无序清单
    常用属性:
    type:设定清单显示风格(disc、circle、square)

    图形标签:<img>
    功能:用于将图片插入到网页中显示
    常用属性:
    src    width    height    border    alt    lowsrc
    其他属性:
    vspace    hspce    border

    表格标签

    网页中存在有大量的同一类型的多条数据需要显示的情况,遇到大量相同数据的显示,常使用表格标签进行展示
    <table>是一个容器标记,用以声明这是表格而且其他表格标记只能在它的范围内才适用,属容器型标记。
    <tr>用以标示表格行,常在<table>内部使用
    <td>用以标示储存格,常在<tr>内部使用

    表格定义标签:<table>
    功能:绘制一个表格
    常用属性:
    width     border  

    表格行标签:<tr>
    功能:描述表格标签内部一个独立的行

    表格列标签:<td>
    功能:描述表格行标签内部一个独立的单元格
    常用属性:
    width     colspan    rowspan

    超链接标签

    网页中充斥着大量的文字,图片信息,其中还有一类使用鼠标点击后用于跳转到某个网站或完成某个功能,此类功能即超链接。

    超链接标签:<a>
    功能:定向到指定的URL路径对应页面
    常用属性:
    href:http地址参照指向路径
     http协议与本地资源区别
    target :链接的显示视窗    
    其他属性:  
    name:为链接设置名称,参看外部与内部链接

    外部链接和内部链接

    外部链接:用于页面与页面间的跳转
    内部链接:用于页面内的跳转或从一个页面跳转到另一个页面的内部指定位置

    内部链接实现方式

    网页中在指定位置处添加一个带有name属性的超链接标记(称之为锚地址),可以没有href属性。
    设置另一个超链接的href属性为上述链接的name值,格式为href=“#name值”
    如果想从外部页面跳转到带有锚地址的页面指定位置,则格式为href=“页面名#name值”

    表单标签

    表单是用于封装提交数据的一种模型,属于容器标签。
    将要提交的数据放置于表单标签中,提交表单后,所要提交的数据将传送给表单对应的服务器。

    表单标签:<form>
    功能:用于封装客户端提交给服务器的数据
    常用属性:
    action:请求地址的URL
    method:form提交方式
    get
    post

    form表单提交时,提供的参数method具有两种可选值
    get提交的数据采用明文传输,主要用于传输安全系数较低的数据,例如搜索引擎传输搜索关键字,数据量控制在1K之内,超过1K的数据将被截断,传输速度较快


    post提交的数据采用非明文传输,主要用于传输安全系统较高的数据,例如注册信息中的密码、用户身份证号等信息,数据量不设限制,传输速度较慢

    数据输入标签:<input>
    功能:收集用户数据,并将其封装到表单中
    常用属性:
    type:用户区分是何种类型的数据输入标签,共9种可选值
    input标签伴随着type的取值不同,所携带的属性也各不相同

    type:button按钮
    功能:按钮,可以与用户进行交互
    常用属性:
    value:按钮对外显示的名称

    type:text文本框
    功能:文本框,提供给用户用于输入单行文本
    常用属性:
    name:用于提交数据时进行数据区分,暂时无意义
    value:文本框中默认显示的值
    size:文本框的总宽度,即显示的字符总数(+1)
    maxlength:文本框中文字的最大输入总数

    type:radio单选按钮
    功能:单选按钮
    常用属性:
    name:用于对单选按钮进行分组,并在提交数据时进行数据区分
    value:选中此单选按钮后最终提交的值,暂无意义
    checked:设置该按钮是否被默认选中
    如果一组单选按钮多个设置有该选项,则以最后一个设置为最终显示效果

    type:checkbox多选按钮
    功能:多选按钮
    常用属性:
    name:用于提交数据时进行数据区分,并对数据进行分组,暂无意义
    value:选中此多选按钮后最终被分组提交的值,暂无意义
    checked:设置该按钮是否被默认选中

    type:password密码输入框
    功能:密码输入框,使用回文形式显示
    密码框与文本框作用完全相同,设置也相同,仅仅在对外显示方面存在差异

    type:submit提交按钮
    功能:提交该按钮所在的form对应的action,并将form内所有具有name属性的表单表单进行提交
    常用属性:
    value:按钮对外显示的名称

    ype:reset重置按钮
    功能:重置该按钮所在的form内所有表单的值为初始化值。
    重置不是清空,仅仅对表单进行初始化,即第一次加载时候的值,如果第一次加载时表单没有值,则重置后也没有值
    常用属性:
    value:按钮对外显示的名称

    type:image图片按钮
    功能:以图片的形式创建的按钮,功能同按钮完全相同
    常用属性:
    src:图片按钮显示的图片路径名

    type:file文件选择框
    功能:文件选择框,用户选择本次磁盘的某个文件,并将该文件的路径名表示形式显示出来,最终形式可以理解为一个文本框,同文本框基本相同
    其他属性:
    accept:所接受的文件类别,共26种选项,通常不设置该属性,采用默认值

    列表标签:<select>
    功能:提供一个可选的下拉列表,该标签属于容器标签,所包含的项通过<option>标签实现
    常用属性:
    name:设置列表名称,暂无意义
    size:列表显示的项目总数
    multiple:设置列表是否可以多选

    列表项标签:<option>
    功能:为<select>标签提供选项
    常用属性:
    value:设置该选项的最终值,也是所在<select>标签的最终选择值,暂无意义
    selected:设置初始化时,该选项是否被选中
    如果设置<select>标签为不允许多选,则selected属性只对同一个<select>标签中最后一个<option>选项生效。

    文本区标签:<textarea>
    功能:提供一个可以输入大量文字信息,并且文字信息可以分行显示的表单
    常用属性:
    name:设置文本区名称,暂无意义
    cols:文本区中一行可以显示的字符数量
    rows:文本区所显示的总行数
    warp:设置文本区内的折行规则
    可选值off, physical, virtual

    XHTML与HTML5

    HTML功能很单一,并且无法进行自定义标签,无法满足用户开发特殊标签的需求,此外,HTML格式并不严谨,在此基础上使用XML与HTML进行有效的融合,得到一种新的规范XHTML,对HTML进行了多方面的规则标准化
    HTML5自2008年1月22日公布,历经多年的方案收集,主要致力于web applications的开发及应用。

    页面设计的原则与细节

    符合行业要求,色调搭配要求与行业相符。
    政府机关:白深蓝、白红
    邮政与铁路:白浅绿
    广告与传媒:白橘、白红、白黄
    医院:白天蓝
    艺术行业:黑白、白黑
    女性:(婚庆)白粉、白红
    计算机:白深蓝

    总结:

    多数标签都是有开始标签和结束标签,其中有个别标签因为只有单一功能,或者没有要修饰的内容可以在标签内结束。
    想要对被标签修饰的内容进行更丰富的操作,就用到了标签中的属性,通过对属性值的改变,增加了更多的效果选择。
    属性与属性值之间用“=”连接,属性值可以用双引号或单引号或者不用引号,一般都会用双引号。或公司规定书写规范。

  • 相关阅读:
    使用Docker-compose部署MySQL测试环境
    使用MySQL SQL线程回放Binlog实现恢复
    MySQL 插件之 连接控制插件(Connection-Control)
    sysbench工具使用
    故障分析--主从复制故障1
    MySQL性能指标计算方式
    AJAX的 同步异步;EZView.js 图片预览和pdf预览
    Caused by: java.lang.ClassNotFoundException: org.springframework.context.App
    解决Myeclipse或Eclipse出现JPA project Change Event Handler问题的解决办法
    java中转换为string的方法;eques和==区别
  • 原文地址:https://www.cnblogs.com/sooper/p/3425991.html
Copyright © 2011-2022 走看看