HTML

Day1

1.认识网页
网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含银屏、视屏以及Flash等。

2.常见的浏览器

• IE浏览器、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等，平时称为五大浏览器

2.2常见浏览器内核
IE浏览器 内核：Trident IE、猎豹安全、360极速浏览器、百度浏览器
Firefox浏览器 内核： Gecko 可惜这几年已经没落了、打开速度慢、升级频繁。
Safari浏览器 内核： Webkit X现在很多人错误地把webkit叫做chrome内核（）
Chrome浏览器 内核： Chromium/Blink 在Chromium项目中研发Blink渲染引擎即（浏览器核心）内置于Chrome浏览器之中。Blink浏览器 内核：其实就是WebKit的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera浏览器 内核： Blink 现在跟随chrome用blink内核

3.为什么要遵循WEB标准？
Web标准是有W3C（万维网联盟 World Wide Web ）组织，因为浏览器的内核不同，

4.网页中web标准三层组成（面试题—重要）
构成: 主要包括结构（html）、**表现（css）和行为（javascript）**三个方面
结构: 结构用于对网页元素进行整理分类。主要学的是HTML
表现： 表现用于设置网页元素的板式、颜色、大小等外观样式、主要指的是CSS
行为： 行为是指网页模型的定义以及交互的编写，主要学的是JaveScript

5.初识HTML

HTML指的是超文本标记语言。

Sublime使用生成网页骨架结构：Html:5 然后按下Tab键、或！按下Tab键

: 文档类型表示HTML5的版本号 : 指定html语言种类 : 表示他的字符级编码方式

6.HTML常用标签

标题标签：  <h1></h1>  h1~h6
段落标签：  <p></p>
水平线标签:  <hr />
换行标签：  <br />
Div标签和span标签（重点）:   是我们网页布局主要的2个盒子，div一行只能放一个,span一行可以放多个
加粗标签：  <b></b>   <strong></strong>   推荐：strong
倾斜标签(语义加强)：  <i></i>  <em></em>  推荐：em
删除标签：  <s></s>  <del></del>  推荐：del
下划线：    <u></u>  <ins></ins>  推荐：ins

**图像标签：**  <img src=”图像url” />
<img /> 标签属性：
Src:  路径
alt:  图像不能显示时的替换文字
Title:   鼠标悬停时显示的内容
Width:  设置图片的宽
Height:  设置图片的高

**超链接标签：**  <a href=”跳转的地址” target=”打开的方式” > </a>
Href属性定义为”#”,表示该链接暂时为空链接。

Target: 打开页面的方式、_self和_blank两种，其中_self为默认值，_blank在新窗口打开

注释标签： <!--  --> 		添加注释和取消注释快捷键：ctrl+/

7.路劲（重点、难点）

目录文件夹： 就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件，图片等等

根目录： 打开目录文件夹的第一层就是根目录
路劲主要分为： 相对路径、绝对路径
相对路劲：当保存于不同目录的网页引用同一个文件时，所使用的的路径将不相同，称为相对路径

同一级路径： 直接引用图片
下一级路径： 使用路径+/
上一级路径： 使用…/+图片.jpg

绝对路径： 绝对路径以根目录为参考的目录路径。
列如：D:\web\img\logo.gif 或完整的网络地址

8.锚点定位：

通过创建锚点链接，用户能够快速定位到目标内容。
创建步骤：

1.使用相应的id名标注跳转目标的位置
<h1 id=”first”>第二集</h1>
2.使用<a href=”#first”>链接文本</a>

Base标签：

<base target="_blank">  设置所有超链接的打开状态, _self默认窗口、_blank新窗口打开

预格式化标签：  <pre></pre>
所谓的预格式化标签，就是会按照我们预先写好的文字格式在网页中显示。

特殊字符 描述 字符的代码

	空格符	$nbsp
<	小于号	$lt
>	大鱼号	$gt
$	和号	$amp

9.表格

表格： <table></table> <tr></tr><td></td>

表头单元格：  <th></th> 里面文字会加粗并且居中

表格标题标签:  <caption>我是表格标题</caption>
1.caption元素定义表格标题，通常这个标题会被居中显示与表格之上
2.Caption标签必须紧随table标签之后
3.这个标签只存在表格里面才有意义。

表格属性：

属性名 	含义	       常用属性值
Border	 设置表格的边框（默认border=”0”无边框）	像素值
Cellspacing	设置单元格与单元格之间的空白间距	像素值（默认2像素）
Cellpadding	设置单元格内容与单元格边框之间的空白距离	像素值（默认为1像素）
Width	设置表格的宽度	像素值
Height	设置表格的高度	像素值
Align	设置表格在网页中的水平对齐方式	Left、center、right

10.合并单元格：（难点）

跨行合并： rowspan=”合并单元格的个数”
跨列合并： colspan=”合并单元格的个数”

<thead></thead>：用于定义表格的头部，用来放标题之类的东西
<tbody></tbody>：用户定义表格的主题。放数据本体
<tfoot></tfoot>  : 放表格的脚注之类

11.列表标签： （列表标签常用于布局使用）
无序列表： （重点）
有序列表： （了解）
自定义列表： （理解）

列表就是用来布局的，因为非常整齐和自由

标签名	定义	说明
<ul><li></li></ul>	无序标签	里面只能包含li 没有顺序，布局中经常使用
<ol><li></li><ol>	有序标签	里面只能包含li，有顺序，使用较少
<dl><dd></dd></dl>	自定义标签	里面有两个兄弟，dt和dd并列关系

12.表单标签：
Input控件（重点）

常用属性：

属性			属性值			描述
text	单行文本输入框
password	密码输入框
radio	单选按钮
checkbox	复选框
button	普通按钮
submit	提交按钮
reset	重置按钮
image	图像形式的提交按钮
file	文本域
name	名字	控件的名称
value	具体的值	Input控制中的默认文本指
size	正整数	Input控件在页面中的显示宽度
checked	checked	定义选择控件默认的备选项
maxlength	正整数	控件允许输入的最多字符数

type属性：
属性通过改变值，可以决定你属于哪种input表单

value属性：
value默认的文本值，有些表单想打开页面默认显示几个文字，就可以通过value设置

name属性：
radio如果是一组，我们必须给他们命名相同的名字name

name属性，我们现在用的比较少，但是，当我们学ajax和后台的时候，是必须的

size属性： 设置文本框的长度

checked属性： 表示默认选中状态，常用于单选按钮和复选按钮

Label标签（理解）

作用： 绑定一个表单元素，当点击label标签的时候，被绑定的元素会获得焦点

<h4>label第一种用法，label直接包含表单</h4>
	<label>
		用户名：<input type="text" name="username" />
	</label>
	
<h4>label第二种用法，通过for和id来控制的</h4>
	<label for="a">昵称：</label>
	<input id="a" type="text" name="ch" />

文本域标签： <textarea></textarea>

下拉列表: <select><option></option></select>

Form表单域（重点）

• 语法：
  action=”url地址” method=”提交方式” name=”表单名称”

• 常用属性：

  属性 属性值 作用
  Action Url地址 用于指定接收文件处理表单的服务器的url地址
  Method Get/post 用于设置表单数据的提交方式，
  Name 名称 用于指定表单的名称，以区分同一个页面中的多个表格