网页基础

帮助文档

W3C : http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/

HTML 初识

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”。
是用来描述网页的一种语言。所谓超文本，因为它可以加入图片、声音、动画、多媒体、链接等内容。

  • HTML 指的是超文本标记语言 (Hyper Text Markup **Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)

HTML 作用就是用标记标签来描述网页，把网页内容在浏览器中展示出来。

开发工具

chrome 、 sublime 、 photoshop

浏览器

浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。

认识网页

网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
网页是如何形成的呢?
代码->浏览器渲染->实际页面

常见浏览器内核介绍

浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。

浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎 它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS 引擎 则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。

移动端的浏览器内核主要说的是系统内置浏览器的内核。
Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。
iOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari或者IE内核Trident的

Web标准

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

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

HTML 基础

HTML基本骨架格式

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<HTML>   
    <head>     
        <title></title>
		<meta charset="UTF-8" />
    </head>
    <body>
    </body>
</HTML>

0.DOCTYPE标签：位于文档的最前面声明文档类型
1.HTML标签：作用所有HTML中标签的一个根节点。 最大的标签 根标签
2.head标签：页面的头部
3.meta标签：设置页面的编码格式,统一使用UTF-8 字符集，避免乱码
3.title标签：页面的标题
4.body标签：页面的主体 主要代码，基本都是放到body里面的

HTML标签分类

在HTML页面中，带有“< >”符号的元素被称为HTML标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素

1
2
3
4
5
6
7
8
1.双标签：<标签名> 内容 </标签名>
该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。

2.单标签：<标签名 />
单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。
主要有：<br /> <hr /> <base />

3.HTML标签关系：嵌套和并列

字符集

gb2312 简单中文 包括6763个汉字
BIG5 繁体中文 港澳台等用
GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8则包含全世界所有国家需要用到的字符

HTML 基础语法

排版标签

标题标签（6个）：h1、h2、h3、h4、h5、h6
语法格式：<hn> 标题文本 </hn>

段落标签：p
语法格式：<p> 文本内容 </p>

水平线标签：hr
语法格式：<hr />

换行标签：br
语法格式：<br />

盒子标签：div和span
ps：div表示一个整体部分，span表示一小部分，不换行
语法格式：
<div> div内容 </div>
<span> span内容</span>

文本格式化标签：

1
2
3
4
b/strong  	粗体
i/em		斜体
s/del		删除线
u/ins		加下划线

b i s u 只有使用 没有 强调的意思 strong em del ins 语义更强烈
语法格式：<tab_name>文本</tab_name>

标签属性

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：
语法格式：<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.任何标签的属性都有默认值，省略该属性则取默认值。
4.采取键值对 key=”value” 的格式

图像标签

作用：用于显示图像
语法格式：<img src="dir/img.img" />
-src：用于指定图像文件的路径和文件名
-alt：用于图像不能显示时的替换文本
-title：鼠标悬停时显示的内容
-width：设置图像的宽度（默认单位：像素）
-height：设置图像的高度（默认单位：像素）
-border：设置图像边框的宽度

链接标签

作用：用于链接跳转
语法格式：<a href="跳转目标" target="弹出方式">内容</a>
-href：跳转链接URL地址
-target：跳转方式：_self：当前页面（默认值），_blank：新窗口

锚点链接

作用：快速定位目标内容
语法格式：

1
2
3
<a href="#id_name">链接目录</a>
..................
<p id="id_name">链接标题</p>

base 标签

作用：可以设置页面整体链接的打开状态,写到head 之间
语法格式：

1
2
3
<head>
	<base target="_blank" />
</head>

特殊字符

常见字符：

1
2
3
4
 	空格  	&nbsp;
<	小于号	<
>	大于号	>
©	版权	&copy;

注释标签

作用：便于阅读和理解但又不需要显示在页面中的注释文字
语法格式：<!-- 注释语句 -->

路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。

1.图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="img.jpg" />
2.图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img1/img.jpg" />
3.图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如<img src="../../img.jpg" />

绝对路径：绝对路径以Web站点或磁盘根目录为参考基础的目录路径。
磁盘路径：D:\web\img\img.jpg
完整的网络地址：http://www.levimaster.cn

列表标签

无序列表 ul
语法格式：

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

有序列表 ol
语法格式：

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

自定义列表 dl
语法格式：

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

表格 table

基本格式：

1
2
3
4
5
6
7
<table>
  <tr>
    <td>单元格内容</td>
    ...
  </tr>
  ...
</table>

1.table用于定义一个表格
2.tr用于定义表格中的一行，必须嵌套在table标签中，在table中包含几对 tr，就有几行表格。
3.td用于定义表格中的单元格，必须嵌套在tr标签中

表格属性

border 表格边框
cellspacing 设置单元格之间的间距
cellpadding 设置单元格内容与单元格之间的间距
width 设置宽度（默认单位：像素）
height 设置高度（默认单位：像素）
align 水平对齐方式（left,center,right）

表格元素

thead 表头标签
th 表头
tbody 表格主体
caption 表格标题
rowspan 跨行合并
colspan 跨列合并

完整表格

1
2
3
4
5
6
7
8
9
10
11
12
<table>
	<thead>
		<tr>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
		</tr>
	</tbody>
</table>

表单

input控件

输入框：
<input type="text />

密码框：
<input type="password" />

单选按钮：

1
2
<input type="radio" name="r_name" value="1" />1 
<input type="radio" name="r_name" value="2" />2

复选框：

1
2
<input type="checkbox" name="c_name" value="1" />1 
<input type="checkbox" name="c_name" value="2" />2

普通按钮：
<input type="button" value="btn_name" />

提交按钮：
<input type="submit" value="sub_name" />

重置按钮：
<input type="reset" value="re_name" />

图片按钮：
<input type="image" src="file_dir/img_name.jpg" />

文件域：
<input type="file" name="file_name" />

input控件控件属性：

-name： 控件名称
-value：控件默认值
-size： 控件默认大小
-checked： 设置默认选择项
-maxlength：控件允许输入的最多字符数

label标签

作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
语法格式：

1
2
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

-for：label绑定的表单元素

textarea控件(文本域)

作用：多行输入框
语法格式：

1
2
3
<textarea cols="5" rows="3">
  文本内容
</textarea>

-cols：每行字符数
-rows：显示的行数

select下拉菜单

作用：下拉列表菜单
语法格式：

1
2
3
4
5
<select>
  <option selected =" selected ">选项1</option>
  <option>选项2</option>
  <option>选项3</option>
</select>

-selected =” selected “ 默认选中

form表单域

作用：收集用户信息提交到指定服务器
语法格式：

1
2
3
<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

-action：用于指定接收并处理表单数据的服务器程序的url地址。
-method：用于设置表单数据的提交方式，其取值为get或post。
-name：用于指定表单的名称，以区分同一个页面中的多个表单。

写到最后

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=14shc3b9o2vvs