一. WEB标准
自定义标题
- 一. WEB标准
- 1.认识网页
- 2.浏览器(显示代码)
- 3.浏览器的内核
- 4.WEB标准
- 二. HTMl
- 1.HTML骨架格式:
- 2.HTML常用标签
- 3.表格table的使用
- 4.列表的使用
- 5.表单的使用
1.认识网页
网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。
2.浏览器(显示代码)
浏览器是网页显示、运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我们平时称为五大浏览器。
3.浏览器的内核
浏览器 | 内核 |
IE | Trident (读try dent) |
firefox(没落了) | Gecko(读get ko) |
Safari | webkit |
chrome | Chromium/Blink |
Opera | Blink |
移动端的浏览器内核主要说的是系统内置浏览器的内核。
Android手机而言,使用率最高的就是Webkit内核,大部分国产浏览器宣称的自己的内核,基本上也是属于webkit二次开发。
iOS以及WP7平台上,由于系统原因,系统大部分自带浏览器内核,一般是Safari或者IE内核Trident的。
4.WEB标准
Web标准不是某一个标准,而是由W3C组织和其他标准化组织制定的一系列标准的集合。
W3C 万维网联盟是国际最著名的标准化组织。
WEB标准的好处
遵循web标准可以让不同我们写的页面更标准更统一外,还有许多优点
1、让Web的发展前景更广阔
2、内容能被更广泛的设备访问
3、更容易被搜寻引擎搜索
4、降低网站流量费用
5、使网站更易于维护
6、提高页面浏览速度
WEB标准构成
主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。
结构:用于对网页元素进行整理和分类,咱们主要学的是HTML。
表现:用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS。
行为:是指网页模型的定义及交互的编写,咱们主要学的是 Javascript。
二. HTMl
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
html的作用:网页是由网页元素组成的 , 这些元素是利用html标签描述出来,然后通过浏览器解析,就可以显示给用户了。
所谓超文本,有2层含义:
- 因为它可以加入图片、声音、动画、多媒体等内容(超越文本限制 )
- 不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本)。
1.HTML骨架格式:
<!DOCTYPE html> <!--就是告诉浏览器按照HTML5 规范解析页面. -->
<html lang="en"> <!-- 指定该html标签 内容 所用的语言为英文 zh-CN为中文 -->
<head>
<meta charset="UTF-8"> <!-- 让 html 文件是以 UTF-8 编码保存的, 浏览器根据编码去解码对应的html内容 -->
<title>Document</title>
</head>
<body>
</body>
</html>
2.HTML常用标签
h:标题标签 h1-h6
<h1>标题标签</h1>
p:段落标签
<p>段落标签</p>
hr:水平线标签
**<hr /> 是单标签**
br:换行标签
**<br /> 单标签**
div span:没有语义的标签(重点)
- div标签 用来布局的,但是现在一行只能放一个div
- span标签 用来布局的,一行上可以放好多个span
<div> 这是头部 </div> <span>今日价格</span>
strong em del ins :文本格式化标签(熟记)
img:图像标签(重点)
<img src="图像的地址" />
<img src="" alt="图像不见显示我" title=" 鼠标经过我就出现" width="图片的宽" height="图片的高">
引用路径的问题:
同一级路径:src=“baidu.jpg”
下一级路径:src=“images/baidu.jpg”
上一级路径:src=…/baidu.jpg
a:链接标签(重点)
<a href="跳转目标" target="目标窗口的弹出方式 _blank表示打开新窗口">文本或图像</a>
注意:
- 外部链接 需要添加 http:// www.baidu.com
- 内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页
- 如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。
- 不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。
base :设置整体链接的打开状态
<base target="_blank" /><!-- 写在head里面 -->
特殊字符的代码
3.表格table的使用
表格的基本语法:
<table>
<tr> <!--行-->
<td>单元格内的文字</td> <!--单元格-->
</tr>
</table>
案例:
<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
<caption>表格标题</caption>
<th> <th>姓名</th> <th>性别</th> <th>年龄</th> </th>
<tr> <td>刘德华</td> <td>男</td> <td>55</td> </tr>
</table>
cellspacing 设置单元格与单元格之间的距离h
cellpadding 设置单元格内容与单元格边距的距离
caption:表格的标题,写在table里,文字会在表格的上方加粗和居中
th 为表头单元格标签,会加粗文本并居中
单元格合并的问题解决:
- 先确定是跨行(rowspan)还是跨列(colspan)合并
- 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 :
- 删除多余的单元格 单元格
表格划分结构(了解)
4.列表的使用
无序列表ul:
无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
有序列表ol:
有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
自定义列表dl:
定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
5.表单的使用
在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。
表单控件 input:(重点)
语法如下:
<input type="属性值" value="你好">
<input />标签为单标签
常用的属性:
label标签----提供用户体验
当我们鼠标点击 label标签里面的文字时, 光标会定位到指定的表单里面
语法如下:
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
文本域标签textarea
<textarea> </textarea>
select 下拉列表
<select>
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
form 表单域
<form action="服务器程序的url地址" method="提交方式get/post" name="表单名称">
各种表单控件
</form>