web——html

• html

  • 元信息meta

    • 作用

      • 在文档头部区域，存储文档的各种基本信息

      • 这些信息主要被浏览器采用，搜索引擎也会检索这些信息，看是否与用户的需求匹配，决定是否要给用户看 设置这些信息提高网页访问率

    • 属性

      • name和content属性配合使用

        • <meta name="author" content=" "/>

        • <meta name="describe" content=" "/>（必有）

          • 对于网页内容的描述

        • <meta name="generator" content=" "/>

          • 说明生成工具

        • <meta name="keywords" content=" "/>（必有）

          • 关键字，用户搜索时可通过此关键字来找到我们的网页

        • <meta name="revised" content=" "/>

          • 版本的迭代记录？？

        • <meta name="viewpoint" content=" "/>

          • 浏览器显示页面内容的屏幕区域？？

        • <meta name="robots" content=" "/>

          • all

            • 搜索引擎可抓取本页面，也可通过本页面的链接抓取其他页面

          • none

            • 搜索引擎不可抓取本页面，也不可通过本页面的链接抓取其他页面

          • index

            • 搜索引擎可抓取本页面

          • noindex

            • 搜索引擎不可抓取本页面，但可通过本页面的链接抓取其他页面

          • follow

            • 搜索引擎可通过本页面的链接抓取其他页面

          • nofollow

            • 搜索引擎可抓取本页面，但不可通过本页面的链接抓取其他页面

      • http-equiv和content属性配合使用

        • <meta http-equiv=" refresh" content=“页面刷新时间；跳转网址”/>？？

        • <meta http-equiv="content-type " content=“声明文档类型和字符集“/>

        • <meta http-equiv="content-language " content=“页面使用的语言“/>？？

        • <meta http-equiv="expires" content=”GTM时间格式“/>？？

          • 设定网页的到期时间，一旦网页过期，必须到服务器上重新传输

        • <meta http-equiv="set-cookie" content=”cookievalue=xx；expires=GMT时间格式；path=/“/>？？

          • 浏览器访问某个页面会将它存在缓存中，下次再访问时就可以从缓存中读取以提高速度。当你希望访问者每次都刷新你广告的图标或计数器时就要禁用缓存了 如动态服务器页面，因为每次看到的页面都是在服务器动态生成的，缓存失去意义

        • <meta http-equiv="pragma" content=“no-cache”/>？？

          • 不缓存页面，提高速度

  • 设计符合标准的结构

    • 网页布局css

      • 元素显示类型

        • html标签元素分类

          • 块状元素

            • 作用

              • 嵌套其他块状、行内等不同类型的元素，负责网页结构的支撑与构建

            • 常见属性

              • <div><p><h1>-<h6><ul><li><ol><dl dt dd><form fieldset legend><table><hr>

            • 特点

              • 每个块级元素都从新的一行开始，并且其后的元素也另起一行

              • 元素的高度、宽度、行高以及上下空白边都可以设置

              • 元素宽度在不设置的情况下，是它本身父容器的100%，除非设置一个宽度

            • 适合构建文档框架

            • 设置

              • display：block；

          • 内联元素（行内元素）

            • 常见属性

              • <a><span><br><i><em><strong><label>

            • 特点

              • 和其他元素都在一行上

              • 元素的高度、宽度及上下空白边不可设置

              • 元素的宽度是它包含的文字或图片的宽度，不可更改

            • 适合包裹多个行内元素，为行内信息定制样式

            • 设置

              • display：inline；

            • 不建议在行内嵌套块状，破坏结构的逻辑关系

          • 内联块状

            • 常见属性

              • <img><input>

            • 特点

              • 同时具备内联元素和块级元素的特点

              • 和其他元素都在一行上

              • 元素的高度、宽度、行高及上下空白边都可设置

            • 设置

              • display：inline-block；

          • display

            • （display 改变任意元素显示特性）

            • 值

              • none

                • 隐藏对象，不为被隐藏的对象保留物理空间

              • inline

              • block

              • list-item

                • 指定对象为列表项目

              • table

              • inline-table

              • table-caption

              • table-cell

              • table-row

              • table-row-group

              • table-column

              • table-column-group

              • table-footer-group

              • table-header-group

              • run-in

                • 根据上下文决定对象是内联对象还是块级对象

              • box

                • 将对象作为弹性伸缩盒

                  • 老版

              • inline-box

                • 将对象作为内联块级弹性伸缩盒显示

              • flexbox

                • 过渡版

              • inline-flexbox

              • flex

                • 弹性伸缩盒

                  • 新版

              • inline-flex

      • 网页布局分类

        • 根据页面版块分类

          • 通过栏目、呈现效果的行列组合进行排版

            • i行j列

        • 根据显示特性分类

          • 布局元素的显示性质

            • 自然流动、浮动、定位等布局

        • 根据布局性质分类

          • 页面宽度的设置单位

            • 固定宽度（以像素为单位）流动宽度（以百分比为单位）液态宽度（以em为单位），混合多种取值单位布局

      • 盒模型

        • 请听下回分解

    • 结构嵌套规则

      • html、head、body只写一个

      • html嵌套规则应用

        • body元素能直接包含的元素有ins、del（行内元素 插入删除）、script（脚本元素）和block类型元素（任意块状元素）

        • ins、del元素能够直接包含块状元素和行内元素等不同类型的元素，但是行内元素进制包含块状元素

        • p、h可以直接包含行内元素和纯文本内容，但是不能直接包含块状元素

        • ul、ol只能包含li，可以在li包含其他元素

        • dl只能包含dt、dd，可以

        • form元素不能直接包含input元素（input为行内元素，form仅能包含块状元素）

        • 子主题 7

          • table元素可以直接包含caption、colgroup、col、thead、tbody、tfoot，但是不能包含tr及其他元素，浏览器一般能自动在table和tr间加tbody元素

          • caption元素只能包含行内元素，tr元素只能包含th和td，th和td可包含任何元素

    • 定义网页结构

      • 共同信息模块

        • 标题

        • 广告

        • 导航

        • 功能

        • 内容

        • 版权

      • 列出基本结构

        • 基本结构

          • 网页结构外套

          • 标题模块

          • 菜单模块

          • 信息模块

          • 次要导航模块

          • 版权信息模块

        • 模块结构关系

          • 平行

          • 包含

          • 嵌套

        • 注意

          • 设计基本结构可不考虑标签的语义化，统一使用div来构建

          • 为每一个div设置一个id，方便后期控制

          • 可以为整个页面设置一个外套，方便后期控制

          • 设计结构时，不要考虑后期显示效果

      • 步骤

        • 构建基本框架

          • 信息模块化

        • 设计局部结构

          • 模块语义化

          • 注

            • 局部结构尽量避免使用id，宏观结构把证每个div一个id；局部结构不建议全div

              • 多使用语义化标签，定义id意义不大？？

              • 局部结构会出现很多重复的结构，定义id容易发生冲突

              • 可使用包含选择器来精准控制文档结构

            • 标题使用前挡，层次清晰。一般网页只有一个一级标题

            • 由于段落文本很多拥有相同的呈现样式，全文统一使用类进行控制，类命名也比较有规律

        • 正文版式设计

          • 包含信息的图像应使用img，不包含有用信息的（仅负责页面版式或功能修饰）以背景图的方式显示

  • 网页语义化

    • 元素分类

      • 结构语义（定义元素在html文档中扮演的结构角色）

        • span div

          • span div区别

            • div标签是块级元素，每个div标签都会从新行开始显示，占据一行；div标签内可以添加其他的标签元素（行内元素、块级元素都行）。而span标签是行内元素，会在一行显示；span标签内只能添加行内元素的标签或文本。

          • div

            • 作用

              • 把一些独立的逻辑部分（网页上相互关联的一组元素 如，独立的栏目板块）划分出来

            • 属性

              • id

                • 为了使逻辑更加清晰，用id属性来给div提供唯一的名称

              • class

                • 主要css样式用？？

          • span

            • 作用

              • 设置单独样式？？

        • ol ul li dl dt dd

        • del ins h1-h6 p hr

      • 内容语义（定义元素在文档中表示内容的语义）

        • a

        • addr（定义缩写词）

        • acronym（取首字母的缩写词）

      • 修饰语义

    • 属性分类

    • 定义文本信息（强调信息本身的含义）

      • 设计标题信息

        • 目的

          • 机器检索标题

        • 标签

          • h1-h6

        • 注意

          • 网页内容的主标题只有一个，也就是h1只用一次

          • 若h2为网页副标题，那h2也只能用一次

      • 设计段落信息

        • 方式

          • br

          • p

          • div

            • 对于机器来说，误认为段落是结构块，从而忽略信息的检索

      • 设计引用信息

        • q

          • 定义单行引用

        • cite

          • 应用短语短句

        • blockquote

          • 作用

            • 区块信息引用，应用一段或多段的长篇信息

          • 效果

            • 换行，前后左右有空白边

          • 注意

            • 一段文本不能直接放在blockquote中，引用的内容还必须包含在一个元素中，通常是p元素，这是可以使用cite属性指定引文的地址。cite？？（在页面上不显示，其作用为？？？）属性还可以跟q元素一起用来提供引用内容的来源地址。但是cite属性不能用在其他元素中。

      • 设计强调信息

        • 强调信息重要性，从语义角度考虑，html提供两个专用信息强调的语义元素：em和strong

        • strong（粗体）比em（斜体）的程度更强

      • 设计格式信息

        • 一般使用css，不建议使用格式化元素来定义文本表现效果，但某些情况下又需要这样的语义结构

        • b：粗体

        • i：斜体

        • big：文本变大

        • small：文本变小

        • sup：文本上标

        • sub：文本下标

        • bdo：文本显示方向

          • 属性：dir

          • 值：rtl（right to left）ltr（left to right）

      • 设计输出信息

        • code

          • 代码字体

        • pre

          • 预定义格式

        • tt

          • 打印机字体

        • kbd

          • 键盘字体

        • dfn

          • 定义的术语

        • var

          • 变量字体

        • samp

          • 代码范例

      • 设计信息缩写

        • 为浏览器、拼写检查程序、翻译系统、搜索引擎分度器提供有用的信息

        • abbr

          • 缩写词简称

        • acronym

          • 首字母缩写

      • 设计插入删除信息

        • ins

          • 插入

        • del

          • 删除

      • 设计其他文本信息

        • address

          • 特定语义信息，如地址、签名、作者、文档摘要

        • a

          • 定义定位语义，任何定义了id属性的元素都可以作为一个锚点

          • href

          • target

            • _blank

            • _parent？？

            • _self

            • _top？？

    • 定义列表信息（关注信息的结构特征和内涵）

      • 定义

        • 同类、同型、同质信息（具有同等性质并将导致同样结果的经济信息）的排列和组合

      • 列表元素（ul ol dl不能只能嵌套li dt dd，可以在li dt dd里嵌套别的）

        • 普通列表

          • ul（无序列表）

          • ol（有序列表）

          • li（列表项目）

        • 定义列表

          • dl（定义列表）

            • 列表包含框

          • dt（定义列表标题）

            • 定义条目，相当于词典中被解释的词汇

          • dd（定义列表说明）

            • 定义描述，相当于词典中解释内容

          • 语义结构中不再把定义列表看作是一种词条解释结构，搜索引擎仅认为dt元素包含的是抽象概括或简练的内容，dd包含的是与dt内容相关联的具体详细或生动的说明

          • 使用定义列表的误区

            • dt元素下跟随过多dd元素，严格讲，dt和dd必须配对使用，从而形成一个完整的语义单元

            • 缺失dt、dd元素，将定义列表当普通列表用，无语义，不如直接使用普通列表

    • 设计表格

      • 定义

        • 适用于每行是一条记录，表达一个完整的意思；每列数字是一个字段，表达一类信息

      • 表格元素

        • table（表）

          • 定义表格外框

          • 属性

            • summary（表格摘要）

              • 不会显示出来，仅是为语音合成、非视觉浏览器或机器定义的

        • caption（表格标题）

          • 数据表格的标题元素

        • tr（表格行）

          • 一行数据的包含框

        • th（列或行的表头）

          • 标题元素

        • td（表格数据单元）

      • 表格分组

        • 数据表过多时，方便数据的阅读和检索

        • 分组元素

          • 数据行分组

            • thead（表格头）

            • tbody（表格主体）

            • tfoot（表格脚）

          • 数据列分组

            • col（表格列）

              • 可嵌入到colgroup，也可单独使用

              • 可定义span属性来指定列分组的数目，默认为1

              • 元素从左到右按顺序分组数据列

            • colgroup（数据列组）

              • 必须配合col来使用

            • 考虑到元素的嵌套规则，即使不为数据表格分组，浏览器也会自动为数据结构进行分组，一般时把整个数据表中的行是为tbody元素内

    • 设计表单

      • 结构及元素

        • 包含框

          • form

            • 数据的处理任务，包括对各个表单域的数据采集、打包、发送到指定服务器端目标文件

            • 核心属性

              • enctype

                • 作用

                  • 用户输入的数据发送到服务器时，浏览器使用的编码类型

                • 值

                  • application/x-www-form-urlencoded：将表单中数据编码为名/值对得形式通过url发送给服务器

                  • multiple/form-data：将表单中的数据编码为一条信息，每个表单域对应消息中的一个部分，然后通过http方式发送到服务器

                  • text/plain：将表单中的数据以纯文本的形式进行编码，其中不含任何控件

              • action

                • 表单提交数据的目标文件，提交表单的目的是为了对用户数据进行处理，该文件应是包含服务器端脚本的处理文件

              • method

                • 作用

                  • 表示处理数据的方法

                • 值

                  • post

                    • 向服务器上递数据

                    • 将表单中的数据放在form的数据体中，按照变量和值对应的方式传递到action所指向的url

                  • get

                    • 从服务器上获取数据

                    • 将表单中的数据以名/值对的形式添加到action所设置的url后面，并使用？连接url，&连接各个变量

        • 输入框

          • 用户数据输入的接口

          • 表单框架

            • 表单框架form

              • action数据提交至服务器目标页面

              • enctype发送表单数据HTTP字符编码格式

                • application/x-www-form-urlencoded默认值，将表单中数据编码为名称/值对的形式发送至服务器，标准的编码格式

                • multipart/form-data将表单中数据编码为一条消息，表单中每个表单元素表示信息中的一部分，然后传送至服务器。表单中含有上传组件时，设置属性值是必需的

                • text/plain将表单中的数据以纯文本方式进行编码。发送邮件须设置该编码类型，否则会出现接受编码时混乱的情形

              • method发送表单数据的http请求方式

                • get传输数据量少，执行效率高。提交数据时，在浏览器地址栏中可以看到提示的查询字符串

                • post传输数据量大，无法通过浏览器地址栏查看提交的数据，适合传输重要信息。在进行数据删除、添加等操作时可设置post方法

            • 表单域input select

              • maxlength

              • value

              • size

              • readonly

              • disabled

            • 表单按钮input button

          • input

            • 属性

              • type

                • text

                  • 单行文本框

                  • 属性

                    • value

                      • 文本框包含的默认字符串

                    • placeholder

                      • 提示文字

                    • size

                      • 文本框字符数，设置文本框宽度（可css）

                    • maxlength

                      • 文本框能接收的最大字符串

                    • tabindex定义按下tab键时被表单元素或链接选中的顺序

                      • tabindex=0默认设置

                      • tabindex=-1禁用该标签的tab按键

                      • tabindex属性值越小，优先级越高，最早获得焦点

                      • 多个元素tabindex属性值相同，依照元素出现的先后顺序获得焦点

                      • 设置disabled属性的元素，tabindex属性值无效

                • password

                  • 文本框特殊形式，值不显示

                  • 属性于单行文本框一致

                • hidden

                  • 隐藏域，其传递的值不会显示出来，简单实用（实际应用中，很多数据不需要用户输入，但是需要作为参数传递给服务器，使用隐藏域可以避免这些数据对表单交互行为的干扰

                  • value

                    • 传递各种固定参数到服务器

                • checkbox多选按钮

                  • 复选框

                  • 属性

                    • value

                      • 设置复选框的传递值

                    • checked

                      • 设置复选框在默认状态下是否为选中状态

                • radio单选按钮

                  • 单选按钮（圆形的选择框，多个单选按钮组合为一个单选按钮组，单选按钮组中所有input元素的name属性值相等，把多个单选按钮捆绑

                  • 单选按钮所传递的值可以是任意值，但实际上他仅是一个开关，本质上他仅包含两个值：true和false，服务器一般也把单选按钮作为逻辑值来处理

                • file

                  • 文件域

                  • 是多个表单域捆绑的混合物，包含文本框和浏览按钮

                  • 当表单中包含文件域时，form元素的method必须设置为post，enctype必须设置为multipart/form-data

                  • css一般设计方法：透明化隐藏按钮，用定位技术将新设计的按钮放在默认按钮的下面，使用js获取文件上传输入框中的路径，将地址保存并放到需要的位置即可

                • submit

                • image

                  • 图像按钮

                  • 包含按钮和图像的属性，该按钮没有动作，需要用户通过脚本的形式为其定义操作的动作

                • button

                  • 该按钮没有动作，需要用户通过脚本的形式为其定义操作的动作

          • textarea

            • 多行文本框

            • 属性

              • cols

              • rows

              • wrap

                • 用户输入内容大于文本域显示宽度时的显示方式

                • 值

                  • soft

                    • 表单提交时不换行

                  • hard

                    • 换行，使用hard必须使用cols

              • readonly

              • disabled

        • 提交按钮

          • button

        • 优化结构

          • 表单分组（对于不同类型和用途的信息）

            • fieldset

              • 定义表单的字段域

            • legend

              • 定义字段域的标题

            • legend元素必须包含在fieldset里且紧邻fieldset元素

          • 增强表单对象的语义性，提升表单的用户体验和效率

            • 绑定提示标签

              • label

                • 使用for属性将表单域与其绑定在一起，用户点击标签文本时，系统自动把输入焦点定位到对应的表单域中

                  • for与相关属性的id值相同

                • 不使用for属性，也可通过label标签包含表单对象实现相同的设计目的

                • 也可以用label嵌套整个表单域对象

                  • 提示的标签文本会自动与相同 的表单域关联在一起

            • tabindex属性定义按下tab键时被表单元素或链接选中的顺序

              • 0默认

              • -1禁用该标签的tab按键

              • tabindex属性值越小，优先级越高，较早获得焦点

              • 多个元素的tabindex值相同，依照元素出现的先后顺序获得焦点

              • 设置disabled，tabindex属性值无效

        • 定义快捷键、访问键（tab访问键）和禁止访问（禁止文本框的使用）

          • accesskey、tabindex、disabled

          • alt+快捷键属性值或alt+shift+属性值

          • 表单中每个元素都有

        • button

          • 与input type submit的效果一致

          • 可以放置内容，如文本、图片

        • name

        • id