---恢复内容开始---
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:播放视频
---恢复内容结束---