---恢复内容开始---
Day1 认识标签
1.web标准
结构标准：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。
样式标准：表现用于设置网页元素的版式，颜色，大小等外观样式，主要指CSS。
行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分。
2.HTML
英文 Hyper Text Markup Language 超文本标签语言
3.html骨架
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
4.html 标签关系
嵌套关系： <head> <title> </title> </head>
并列关系： <head> </head> <body> </body>
5.在sublime页面输入以下两个单词html: 5 或者 ！ ，然后按下tab键即可生成HTML骨架。
6.字符集 UTF-8
7.HTML标签的语义化 即标签的含义
8.HTML标签
（1）排版标签
<hn> 文本内容 </hn>
(2)段落标签
<p> 文本内容 </p>
(3)水平线标签
<hr /> 是单标记
(4)换行标签
<br /> 是单标记
(5) div span标签 (没有语义，用来布局)
<div> 这是头部 </div>
<span> 文本内容 </span>
9.文本格式化标签
|
标签 |
显示效果 |
|
<b></b> <strong> </strong> |
粗体(推荐使用strong) |
|
<i></i> <em></em> |
斜体 (推荐使用em ) |
|
<s></s> <del></del> |
加删除线(推荐使用del) |
|
<u></u> <ins></ins> |
加下划线(推荐使用u) |
10.标签属性
<标签名 属性1 =“属性1” 属性2 =“属性2”> 文本内容 </标签名>
注意：（1）标签可以拥有多个属性，必须写在开始标签中，位于标签名之后
（2）属性之间部分先后顺序，之间都用空格隔开
（3）任何标签的属性都有默认值，省略改属性则取默认值。
11.图像标签img
<img src=”图像URL” / >
<img />标记属性
|
属性 |
属性值 |
描述 |
|
src |
URL |
图像的路径 |
|
alt |
文本 |
图像不能显示时的替换文本 |
|
title |
文本 |
鼠标悬停时的显示内容 |
|
width |
像素 |
设置图像的宽度 |
|
height |
像素 |
设置图像的高度 |
|
border |
数字 |
设置图像边框的宽度 |
12.链接标签
<a href=”跳转目标” target=”目标窗口的弹出方式”> 文本或图像 </a>
Target打开方式 _blank新窗口打开，_self自己窗口打开
13.锚点定位
创建锚点链接分为两步：
（1） 使用“a href=”#id名”链接文本/a”创建链接成本
（2） 使用相应的id名标注跳转目标的位置。
14.base标签
一般情况下<base target=”_blank” />
15．特殊字符标签
|
特殊字符 |
描述 |
字符的代码 |
|
|
空格符 |
|
|
< |
小于号 |
< |
|
> |
大于号 |
> |
|
& |
和号 |
& |
16.注释标签
<!— 注释语句 -->
17．路径
相对路径
（1）图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可。如<img src=”logo.gif”/>
（2）图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开,如<img src=”img/img01/logo.gif” />
（3）图像文件位于HTML文件的上一级文件夹：在文件名之前加入”../”, 如果是上两级，则需要使用“../../”,以此类推，如<img src=”../logo.gif”/>
绝对路径
“D:\web\img\logo.gif”(一般使用较少)，或完整的网络地址，例如
“http://www.itcast.cn/images/logo.gif”
18.列表标签
（1）无序列表ul（重点）
无序列表的各个列表之间没有顺序级别之分，是并列的
<ul>
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
……
</ul>
注意：
<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字是不被允许的，<li></li>之间相当于一个容器，可以容纳所有元素。
(2)有序列表ol（了解）
<ol>
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
……
</ol>
(3)自定义列表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>
DAY2
- 表格table（会使用）
(1)<table>
<tr>
<td>文字内容</td>
</tr>
</table>
注意：<tr></tr>中只能嵌套<td></td>; <td></td>标签，他就像一个容器，可以容纳所有元素。
(2)表格属性
|
属性名 |
含义 |
常用属性值 |
|
border |
设置表格的边框（默认border=”0”无边框） |
像素值 |
|
cellspacing |
设置单元格与单元格边框之间的空白间距 |
像素值(默认2) |
|
cellpadding |
设置单元格内容与单元格边框之间的空白间距 |
像素值(默认1) |
|
width |
设置表格的宽度 |
像素值 |
|
height |
设置表格的高度 |
像素值 |
|
align |
设置表格在网页中的水平对齐方式 |
left, center, right |
（3）表格结构
<thead></thead>:用于定义表格的头部
<tbody></tbody>:用于定义表格主体。
都要放在<table></table>里面
(4)表格标题
<table>
<caption>我是表格标题<caption>
</table>
Caption标签必须紧随table标签之后，只能对每个表格定义一个标题，会居中于表格之上。
(5)合并单元格
跨行合并：rowspan 跨列合并：colspan
跨行合并是从上往下，跨列合并是从左往右。删除的个数=合并的个数-1。
- 表单标签（掌握）
(1)input控件 （注释快捷键：crtl+/）
<input />单标签
|
属性 |
属性值 |
描述 |
|
type |
text |
单行文本输入框 |
|
password |
密码输入框 |
|
|
radio |
单选按钮 |
|
|
checkbox |
复选框 |
|
|
button |
普通按钮 |
|
|
submit |
提交按钮 |
|
|
reset |
重置按钮 |
|
|
image |
图像形式的提交按钮 |
|
|
file |
文件域 |
|
|
name |
由用户自定义 |
控件的名称 |
|
value |
由用户自定义 |
input控件中的默认文本值 |
|
size |
正整数 |
input控件在页面中的显示 |
|
checked |
checked |
定义选择控件默认被选中的项 |
|
maxlength |
正整数 |
控件允许输入的最多字符数 |
(2)label标签
label标签为input元素定义标注。
(3)textarea控件(文本域)
<textarea> 文本内容 </textarea>
(4)下拉菜单
<select>
<option> 选项1 </option>
<option> 选项2 </option>
<option> 选项3 </option>
…
</select>
注意：<select></select>中至少包含一对<option></option>。在option中定义selected=”selected”时，当前项即为默认选中项。
(5)表单域
<form action=”url地址” method=”提交方式” name=”表单名称”>
各种表单控件
</form>
- HTML5新标签与特性
(1)常用新标签
header:定义文档的页眉 头部
nav:定义导航链接的部分
footer:定义文档或节的页脚 底部
article:定义文章
section:定义文档中的节
aside:定义其所处内容之外的内容，侧边
datalist:标签定义选项列表。与input元素配合使用。Datalist里面用id来实现和input的链接。
fieldset:元素可将表单内的相关元素分组，打包，与legend搭配使用。
(2)新增的input type属性值
|
类型**** |
使用示例**** |
含义**** |
|
|
<input type=”email” > |
输入邮箱格式 |
|
tel |
<input type=”tel” > |
输入手机号码格式 |
|
url |
<input type=”url” > |
输入url格式 |
|
number |
<input type=” number” > |
输入数字格式 |
|
search |
<input type=” search” > |
搜索框（体现语义化） |
|
range |
<input type=” range” > |
自由拖动滑块 |
|
time |
<input type=” time” > |
小时分钟 |
|
date |
<input type=” date l” > |
年月日 |
|
datetime |
<input type=” datetime” > |
时间 |
|
month |
<input type=” month” > |
月年 |
|
week |
<input type=” week” > |
星期 年 |
(3)常用新属性
|
属性 |
用法 |
含义 |
|
placeholder |
<input type=”text” placeholder=”请输入用户名”> |
占位符 当用户输入的时候，里面的文字消失，删除所有文字，自动返回 |
|
autofocus |
<input type=”text” autofocus> |
规定页面加载时，input元素应该自动获得焦点 |
|
multiple |
<input type=”file” multiple > |
多文件上传 |
|
autocomplete |
<input type=”text” autocomplete=”off”> |
规定表单是否应该启用自动完成功能，有2个值，一个on一个off，on代表记录已经输入的值 |
|
required |
<input type=”text” required > |
必填项 |
|
accesskey |
<input type=”text” accesskey=”s”> |
规定激活（使元素获得焦点）元素的快捷键，采用Alt+字母的形式 |
(4)多媒体标签
embed:标签定义嵌入的内容
autio:播放音频
autoplay 自动播 controls是否显示默认播放控件 loop 循环播放
video：播放视频
---恢复内容结束---
