1、Web标准
(1)Web标准不是某一个标准,而是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C 万维网联盟是国际最著名的标准化组织(1994年成立)
(2)构成:结构(html)、表现(css)和行为(javascript)
结构类似人的身体, 表现类似人的着装, 行为类似人的行为动作
- 结构:用于对网页元素进行整理和分类(HTML)。
- 表现:设置网页元素的版式、颜色、大小等外观样式(CSS)
- 行为:网页模型的定义及交互的编写( Javascript)
2、HTML
2.1.介绍
HTML 指的是超文本标记语言 (Hyper Text Markup Language),是用来描述网页的一种语言。
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- 所谓超文本,有2层含义:
(1). 因为它可以加入图片、声音、动画、多媒体等内容(**超越文本限制 **)
(2). 不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(**超级链接文本 **)。
2.2.骨架标签
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
约定:HTML标签名、类名、标签属性和大部分属性值统一用小写
小技巧:生成页面骨架结构
- html: 5 按下tab键 或者
- ! 按下tab键
2.3 标签分类
(1)常规元素(双标签)
(2)空元素(单标签)如:换行<br />
,图像标签<img src="图像URL" />
,<input type="属性值" />
, 链接标签<link rel="stylesheet" href="url">
2.4 标签关系
(1)嵌套关系(父子级)
(2)并列关系(兄弟级)
2.5 常用标签
2.5.1 排版标签
1)标题标签h,一行只能放一个标题
2)段落标签p
3)水平线标签hr
4)换行标签br
5)div 和 span标签,都是盒子标签,用来装网页元素,进行网页布局
- div: 一行只能放一个
- span: 一行上可以放多个
2.5.2 文本格式化标签
2.5.3 图像标签img
<img src="图像URL" />
src属性用于指定图像文件的路径和文件名,img标签的必需属性
<h4> 正常的图片: </h4>
<img src="img.gif" />
<h4> 带有alt 替换文本:(图片不能正常显示,就显示文字) </h4>
<img src="img.gif" alt="图片不能正常显示,就显示文字" />
<h4> 带有title 提示文本:(鼠标放到图片上,显示的文字) </h4>
<img src="img.gif" title="鼠标放到图片上,显示的文字" />
<h4> 修改图片大小 宽度 width 高度 height </h4>
<img src="img.gif" width="600" />
<h4> 带有边框的图片 </h4>
<img src="img.gif" border="10" />
2.5.4 链接标签a
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
- href:用于指定链接目标的url地址(必须属性),当为标签应用href属性时,它就具有了超链接的功能
- target:用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,__blank为在新窗口中打开方式。
<h4>外部链接:</h4>
<a href="http://www.baidu.com" target="_blank"> 百度 </a>
<h4>内部链接:</h4>
<a href="index.html">首页 </a>
<h4>空链接:</h4>
<a href="#"> 链接 </a>
<h4> 图像链接:</h4>
<a href="http://www.baidu.com" target="_blank"> <img src="img.jpg" /> </a>
(1)锚点定位
- 创建锚点链接分为两步:
1. (找目标)使用相应的id名标注跳转目标的位置
<h3 id="two">第2集</h3>
2. (拉关系) 使用<a href="#id名">链接文本</a>创建链接文本(被点击的)
<a href="#two">
(2) base 标签
<base target="_blank" />
- base 可以设置整体链接的打开状态
- base 写到
<head> </head>
之间 - 把所有的连接 都默认添加 target="_blank"
2.5.5 注释标签
<!-- 注释语句 -->
快捷键是: ctrl + / 或者 ctrl +shift + /
2.5.6 预格式化文本pre标签 可定义预格式化的文本
- 被包围在
<pre>
标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 - 有了这个标签,里面的文字,会按照我们书写的模式显示,不需要段落和换行标签了。但是,比较少用,因为不好整体控制。
2.6 路径
2.6.1 相对路径
以引用文件之网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对路径。
- 同级
<img src="图像URL" />
- 上一级
<img src="images/图像URL" />
- 下一级
<img src="../图像URL" />
2.6.2 绝对路径
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的。
2.7 表格、表单、列表
2.7.1 表格table
<table>
<tr>
<td>单元格</td>
</tr>
</table>
- table用于定义一个表格标签。
- tr标签 用于定义表格中的行,必须嵌套在 table标签中。
- td 用于定义表格中的单元格,必须嵌套在
<tr></tr>
标签中。 <td></td>
标签,可以容纳所有的元素- 表头单元格标签th:一般表头单元格位于表格的第一行或第一列,并且文本加粗居中,只需用表头标签
<th></th>
替代相应的单元格标签<td></td>
即可。 - 表格标题caption
<table>
<caption>表格标题</caption>
</table>
1). caption 元素定义表格标题,通常这个标题会被居中且显示于表格之上。
2). caption 标签必须紧随 table 标签之后。
3). 这个标签只存在 表格里面才有意义。
- 表格属性
三参为0, 开发时这三个参数 border cellpadding cellspacing 为 0 - 合并单元格,跨行合并:rowspan=“合并单元格的个数”,跨列合并:colspan=“合并单元格的个数”;合并的顺序我们按照 先上 后下 先左 后右 的顺序;删除多余的单元格 单元格
- 表格划分结构:题头thead、正文tbody和脚注tfoot来标注
2.7.2 列表标签
- 无序列表 ul>li
1).<ul></ul>
中只能嵌套<li></li>
,直接在<ul></ul>
标签中输入其他标签或者文字的做法是不被允许的。
<ul>
<li>列表项1</li>
</ul>
2). <li>与</li>
之间相当于一个容器,可以容纳所有元素。
- 有序列表 ol>li
<ol>
<li>列表项1</li>
</ol>
- 自定义列表 dl>dt dd
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
2.7.3 表单标签
- 由表单控件(也称为表单元素)、提示信息和表单域3部分构成
1).表单控件:包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
2).提示信息:一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。
3).表单域:相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。 - input 控件 (单标签)
<input type="属性值" value=" 默认的文本值">
1). name属性,用于区别不同的表单。radio 如果是一组,我们必须给他们命名相同的名字,就实现可以多个选一个;checkbox 如果是一组,也要命名相同的名字
2). checked属性,表示默认选中状态 checked="checked"
- label标签:为了提高用户体验
1). 概念:label 标签为 input 元素定义标注(标签)
2). 作用: 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
3). 实现绑定元素方式:
1、(第一种)用label直接包括input表单,适合单个表单选择
<label> 用户名: <input type="属性值" value=" 默认的文本值"> </label>
2、(第二种) for 属性规定 label 与哪个表单元素绑定
<label for="id名">文本</label>
<input type="属性值" id="id名">
- textarea控件(文本域),通过textarea控件可以轻松地创建多行文本输入框,cols=“每行中的字符数” rows=“显示的行数” 实际开发不用
- select下拉列表,至少包含一对 option,实际开发会用的比较少
<select>
<option selected =" selected ">选项1 (当前项为默认选中项)</option>
<option>选项2</option>
</select>
- form表单域,实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
1). action:url地址,用于指定接收并处理表单数据的服务器程序的url地址。
2). method:get/post,用于设置表单数据的提交方式,其取值为get或post。
3). name:用于指定表单的名称,以区分同一个页面中的多个表单。
2.8 特殊字符
总结