书小宅之网页设计—

网页标题title：title定义的标题仅是在浏览器标题栏中显示的信息。title作为属性用来定义提示文本。
网页内容的标题hi：一般一个网页应该只有一个一级标题（主标题），也就是说网页内容应该只用依次h1元素。h2元素定义网页栏目的标题，h2元素作网页副标题时也应该只用一次。h3元素定义子栏目的标题。文档的标题层次一般在三层左右。
设计引用信息：
q元素定义单行引用，如论文、博客中引用别人的话，引用的文本会被加上双引号；
cite元素常引用短语或短句子，常用来引用某人说的话，引用的文本以斜体显示；
blockquote元素用来引用一段或者多段的长篇信息。
设计强调信息：
em元素：表示强调信息，斜体表示；
strong元素：表示加强强调的信息，加粗。
设计信息缩写：
使用缩写信息能够为浏览器、拼写检查程序、翻译系统一级搜索引擎分度提供有用的信息。

abbr元素：缩写词，如Defines是dfn；

<p><span title="Abbreviation"><abbr title="Abbreviation">abbr</abbr></span>
表示它所包含的文本是一个更长的单词或短语的缩写形式，浏览器会根据这个信息改变你对这些文本的显示方式，或者用其他文本代替。
</p>

acronym元素：首字母缩写;

<p>
<acronym title="Cascading Style Sheets">CSS</acronym>
层叠样式或级联样式表，定义如何显示HTML标签，用于控制网页外观布局和样式设计。
</p>

设计其他文本信息：

address元素：用来表示特定的语义信息，如地址、签名、作者和文档摘要等，并不仅仅指地理地址。

<address title="作者">书小宅</address>
<address title=“详细地址”>重庆</address>
<address title="文章摘要">语义辨析</address>

a元素：
两种用法：一种是用来作为超链接，二是用来作锚。
href属性设置超链接的目的地址(URL)；
target表示打开目标文档的方法，如_blank表示在新窗口中打开文档，_parent表示在父窗口中打开文档，_self表示在当前文档中打开文档，_top表示在顶层窗口中打开文档。
1、超链接：链接到某一目标网址。

 <a href="http://www.baidu.com">去百度搜索</a>

效果演示：去百度搜索
2、锚链接：定义锚点，实际上是一个定位标记，定位到网页某个具体的位置。

<a href="#btm">跳转到底部</a>
<div id=“box” style="height:2000px; border:solid 1px red;">撑开浏览器滚动条</div>
<span id="btm">底部锚点位置</span>

定义列表信息：
- 有序列表输出的内容有前缀，是大写字母、小写字母、数字和罗马数字等；
- 无序列表输出的内容有前缀，是实心圆、空心圆、实心正方形；
- 自定义列表有缩进而没有前缀。

导航菜单是同质数据，适合使用列表数据。

有序列表和无序列表
先标识列表有序还是无序，再内嵌列表项目

<ul>……</ul>：标识无序列表。

<ol>……</ol> ：标识有序列表。

<li>……</li> ：标识列表项目。

定义列表：
搜索引擎认为dt元素包含的是抽象、概括或简练的内容，对应的dd元素包含的是与dt内容相关联的具体、详细或生动说明。
误区：（1）一个dt之下包含多个dd；（2）缺失dt或dd元素。

<dl>……</dl> ：标识定义列表，包括词条和解释两块内容。

<dt>……</dt> ：标识词条。

<dd>……</dd> ：标识解释。

设计表格：

每列数据属于不同的类型，每行数据（一条记录）表达一定的意思的多行多列数据使用表格。

table：数据表结构。
tr ：表格行。
td：表格数据单元格。

如果数据本身是纯专业、技术的数据，使用表格结构会更合适；
对于同类型的信息使用列表结构会更恰当。

表格分组：
数据行分组：
<thead>……</thead>：在数据表中定义头部区域
<tbody>……</tbody>：在数据表中定义头部区域
<tfoot>……</tfoot>：在数据表中定义脚步区域

<thead><tr><td rowspan="2">排名</td><td colspan="3">人数</td>……</tr><tr></tr>
</thead><tbody>……</tbody>

解释：对于行，分成又不区域和主体区域两部分。头部有两行，每一个单元格占的行列数的大小由rowspan和colspan属性来控制。

数据列分组：
<col>……</col>：在数据表中定义列区域
<colgroup>……</colgroup>：在数据表中定义数据列组

<colgroup><col span="3"/><col span="4"/>
</colgroup>

解释：对于列，划分为两个区域，其中一个区域占3个单元格的宽度，另一个单元格占4个单元格的宽度。

设计表单：
optgroup：定义下拉选项组，选择列表中相关选项的组合。
isindex：定义简单的输入框。

所有表单元素都有两个基本属性：
1、name：定义表单对象的名称，后台服务器利用该属性值来读取其中的数据，属性可以根据对应表单对象包含的内容来确定。
2、id：定义了表单对象的id编码，前台客户端利用该属性控制该对象的动态表现。
一般为1、2设置相同的属性值。

<h1>表单的语义化结构</h1>
<form id="form1" method="post" action="">                    <!--表单包含框--><p>单行文本域：<input type="text" name="textfield" id="textfield"/></p>    <!--输入框--><p>密码域：<input type="password" name="passwordfield" id="passwordfield"/></p> <p>多行文本域：<textarea name="textareafield" id="textareafield"></textarea></p> <p>复选框：复选框1<input name="checkbox1" type="checkbox" value=""/>复选框2<input name="checkbox2" type="checkbox" value=""/></p> <p>单选按钮：<input name="radio1" type="radio" value=""/>按钮1<input name="radio2" type="radio" value=""/>按钮2</p> <p>下拉菜单：<select name="selectlist" size="2">      <!--select元素必须与option元素配合使用--><option value="1">选项1</option>   <!--size小于选项数目会出现滚动条--><option value="2">选项2</option><option value="3">选项3</option></select></p> <p> <input type="submit" name="button" id="button" value="提交"/> </p>    <!--提交按钮-->
</form>

form元素的核心属性：
1、enctype=：

“application/x-www-form-urlencoded”：将表单中的数据编码为名-值（name-value）对的形式通过URL发送给服务器。
“multipart/form-data”：将表单中的数据打包为独立的数据包，编码为一条消息，每个表单域对应消息中的一个部分，然后通过http方式发送到服务器。
“text/plain”：将表单中的数据以纯文本的形式进行编码，不含任何控件（表单域的名称）或格式字符。

2、action属性用来设置表单提交数据的目标文件，该文件应该是包含在服务器端脚本的处理文件。
3、method=

”get“：从服务器上获取数据；
“post”：向服务器传递数据。
当表单中包含文件域时，form元素的method属性必须设置为"post",enctype属性必须设置为"multipart/form-data"，否则提交操作会失败。

表单分组：
fieldset：定义表单的字段域（或称字段集），集合表单的容器，默认显示边框效果。
legend：定义字段域的标题，默认位于左上角。
legend元素必须包含在fieldset元素内部，且紧邻fieldset元素。

绑定提示标签：
label：定义表单的控制标签。常使用for属性使其与表单域绑定在一起，形成关联。单击标签文本时输入焦点自动定位到对应的表单域。

<label for="username">用户名</label>
<input type="text" id="username" name="username"/>

敬请批评指正！

书小宅之网页设计——用之有道相关推荐

书小宅之网页设计——标签
HTML常用标签文档结构标签 <html>--</html> :标识HTML文档的起始和终止. <head>--</head> :标识HTML文档的头 ...
书小宅之网页设计——二次贝塞尔曲线和三次贝塞尔曲线
贝塞尔曲线起始点和终止点在曲线上,方向控制点不再曲线上.二次贝塞尔曲线有一个控制点,三次贝塞尔曲线有两个控制点. 二次贝塞尔曲线定义和用法 quadraticCurveTo() 方法通过使用表示二次 ...
书小宅之网页设计CSS3——圆角矩形
圆角半径四个方向的参数都写时,对应的顺序是左上,右上,右下,左下. border-radius: 1-4 length|% / 1-4 length|%; 注释:按此顺序设置每个 radius 的四个 ...
书小宅之网页设计CSS3——多边形
CSS3绘制三角形和梯形 div的边框属性 border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式. 只有当这个值不是 none 时边框才可能出现. 1.border- ...
书小宅之概念汇总——胜读十年书
计算机基础世界上第一台电子计算机于1946年诞生于美国. 1945年,ENIAC 的顾问.美籍匈牙利数学家冯·诺依曼在为一台新的计算机EDVAC (EDVAC是电子离散变量计算机的缩写,是世界上 ...
dw网页插入java小程序_DW网页设计100例35：构建Java插入模块
Java 是一种程序设计语言, Java applet ( Java 小程序)是在 Java 的基础上演变而成的.能够嵌入在网页中的.可以执行一定小任务的应用程序. 20060407140110aa1 ...
dw网页插入java小程序_DW网页设计35：构建Java插入模块
Java 是一种程序设计语言, Java applet ( Java 小程序)是在 Java 的基础上演变而成的.能够嵌入在网页中的.可以执行一定小任务的应用程序. 效果说明建立文件,以 Java 计 ...
书小宅之C#——实现的第三方程序嵌入自己的WinForm
首先创建一个C#的窗体应用(.net框架): 在左侧隐藏的工具箱中可以添加控件,对自己的窗体做初步的布局. 这里记录我在做项目的过程中遇到的两个较严重的问题: 问题1:用重叠的Panel实现界面切换, ...
小清新简单网页设计制作模板免费下载
前言此作品包含assets文件夹.images文件夹和index.html文件,PC端和手机端都能够支持浏览,在电脑上下载后,先用rar软件进行解压,解压后直接双击打开index.html文件即 ...

书小宅之网页设计——用之有道

书小宅之网页设计——用之有道相关推荐

最新文章

热门文章