Web网页

65 阅读 0 评论 43 点赞

我是靠谱客的博主内向路灯，最近开发中收集的这篇文章主要介绍Web网页，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

web标准的构成

主要包括结构（Structure）、表现(Presentation)和行为(Behavior)三个方面。

标准	说明
结构	结构用于对网页元素进行整理和分类。HTML
表现	表现用于设置网页的版式、颜色、大小等外观样式。css
行为	行为是指网页模型的定义及交互的编写。javascript

web标准提出的最佳体验方案：结构、样式、行为分离。
简单理解：结构编写到HTML文件，表现写到CSS文件，行为写到javaScript文件中

网页开发工具

1、文档类型声明标签

文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>

这句话的意思是：当前页面采取的是HTML5版本来显示网页
注意：

声明位于文档中的最前面的位置，处于标签之前。
不是一个HTML标签，它就是文档类型声明标签。

2、lang 语言种类
用来定义当前文档显示的语言

en定义语言为英语
zh-CN定义语言为中文
简单来说定义en就是英文网页，定义为zh-CN就是中文网页
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文
这个属性对浏览器和搜索引擎(百度、谷歌)还是有作用的
3、字符集
字符集（Character set）是多个字符的集合。以便计算机能够识别和存储各种文字
在<head> 标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。

<meta charset="UTF-8">

charset 常用的值有：GB2312、BIG5、GBK和UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符:
注意:上面语法是必须要写的代码，否则可能引起乱码的情况，一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的“UTF-8”，不要写成“utf8”或“UTF8”

HTML常用标签

1、文本格式化标签
在网页中，有时候需要为文字设置粗体、斜体或或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要

语义	标签	说明
加粗	<strong> 或者<b></b>	更推荐用<strong> 语义更强烈
倾斜	<em></em>或者<i></i>	更推荐使用<em>语义更强烈
删除线	<del></del> 或者<s></s>	更推荐使用<del>语义更强烈
下划线	<ins></ins>或者<u></u>	更推荐使用<ins>语义更强烈

2、图像标签和路径

图像标签
图像标签的其他属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本、图像不能显示的文字
title	文本	提示文本，鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

3、链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

单词 anchor 的缩写，意为：锚。
两个属性的作用如下：

属性	作用
href	用于指定链接的目标的url地址，（必须属性）当为标签应用href属性时，它就有了超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式

链接分类
- 外部链接：例如<a href=“http:baidu.com”>百度</a>
- 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如<a href=“index.html”>首页</a>
- 空链接：如果当时没有确定链接目标时，<a href="#">首页</a>
- 下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件
- 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
- 锚点链接：点我们点击链接，可以快速定位到页面中的某个位置。
  * 在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a>
  * 找到目标位置标签，里面添加一个id属性=“刚才的名字”，如：<h3 id=“two”></h3>

4、列表标签

无序列表（重点）

<ul>标签标识HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 li 标签定义。
无序列表的基本语法格式如下：

<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>


* 1.无序列表的各个列表项之间没有顺序之分，是并列的
* 2.<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的
* 3.<li>与</li>之间相当于一个容器，可以容纳所有元素。
* 无序列表会带有自己的样式属性，但在实际使用时，我们会用css来设置。

有序列表
有序列表即为有排列顺序的列表，其各个列表会按照一定的顺序排列定义。
在HTML标签中，ol标签用于定义有序列表，列表排序以数字来显示，并且使用li标签来定义列表项。
有序列表的基本格式如下：

<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>

自定义列表（重点）
在HTML标签中，dl标签用于定义描述列表（或定义列表），该标签会与dt（定义项目/名字）和dd（描述每一个项目/名字）一起使用。
其基本语法如下：

<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>

* 1.<dl></dl>里面只能包含<dt>和<dd>。
* 2.<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>

列表总结

标签名	定义	说明
`<ul></ul>`	无序标签	里面只能包含li 没有顺序，使用较多，li里面可以包含任何标签
`<ol></ol>`	有序标签	里面只能包含li 有顺序，使用相对较少，li里面可以包含任何标签
`<dl></dl>`	自定义标签	里面只能包含dt和dd，dt和dd里面可以放任何标签

5、表单标签

input表单元素
type属性的属性值及其描述如下：

属性值	描述
button	定义可点按钮（多数情况下，用于通过jsvascript启动脚本）
checkbox	定义复选框
file	定义输入字段和浏览按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可以在其中输入文本，默认宽度为20个字符

除type属性外，<input>标签还有其他很多属性，其常用属性如下：

属性	属性值	描述
name	由用户自定义	定义input元素的名词
value	由用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

 * 1.name和value是每个表单元素都有的属性值，主要给后台人员使用
* 2.name表单元素的名字，要求单选按钮和复选框要有相同的name值
* 3.checked属性主要针对于单选按钮和复选框，主要作用一打开页面。就要可以默认选中某个表单元素
* 4.maxlength是用户可以在表单元素输入的最大字符数，一般较少用

<label>标签
<labal>标签作为input元素定义标注（标签）
用于绑定一个表单元素，当点击<labal>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。
语法：

<label for='sex'>男</label>
<input type="radio" name="sex" id="sex"/>

核心：<label>标签的for属性应当于与相关元素的id属性相同

<select>表单元素
在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。
语法：

<select>
<options>选项1</options>
<options>选项2</options>
<options>选项3</options>
...
</select>


* 1.<select>中至少包含一对<options>
* 2.在<option>中定义selected=’selected‘时，当前项即为默认选中项

<textarea>表单元素
语法：

<textarea row="3" cols="20">
文本内容
</textarea>


* 1.通过<textarea>标签可以轻松的创建多行文本
* 2.cols=“每行中的字符数” rows="显示的行数"，我们在实际开发中不会使用都是用CSS来改变大小。

6、表格标签

表格的基本语法

<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
</table>

 * <table></table>是用于定义表格的标签
* <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
* <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
* 字母td指表格数据(table data),即单元格的内容

表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。
<th>标签表示HTML表格的表头部分(table head的缩写)

<table>
<tr>
<th>姓名</th>
...
</tr>
...
</table>

表格属性

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1 或 “ ”	规定表格单元是否拥有边框，默认为“ ”，表示没有边框
cellpadding	像素值	规定单元格边沿与其内容之间的空白，默认1像素
ceelspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度