html_01
1.认识前端和网页
2.认识html
3.标签
4.图片表签
5.相对路径和绝对路径
6.超链接
7.锚点(锚链接)
8.html的特殊字符
9.列表
10.多媒体标签
11.滚动标签
12.案例1---多媒体和滚动标签的使用
html_02
1.<meta>标签
2.<link>标签 链接外部样式表文件
3.表格
4.练习--课程表(练习跨行跨列,细线表格)
5.表单
6.表单信息分组
7.一些html5定义的表单控件
8.标签语义化
html_01
1.认识前端和网页 <--返回目录
* 前端就是将效果图生成网页,利用html+css+js等技术。
* 网页由文字、图片、输入框、视频、音频、超链接等组成。
* web标准
- w3c组织(万维网联盟)
- html 结构标准 相当人的身体
- css 表现标准 相当与给人化妆 变的更漂亮
- js 行为标准 想当与人在唱歌,页面更灵动。
* 浏览器内核
- 浏览器内核:也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容及页面的格式
- 渲染引擎:是兼容性问题出现的根本原因
* url地址:就是咱们说的网址
2.认识html <--返回目录
* html:超文本标记语言Hyper text markup language
* Html结构标准
<!doctype html> 声明文档类型
<html> 根标签
<head> 头标签
<title></title> 标题标签
</head>
<body> 主体标签
</body>
</html>
* Html 与htm是一样的
- 后缀名不能决定文件格式,只能决定打开文件打开的方式。
* 开发工具
- Dw 历史悠久,设计师使用。
- Sublime 轻量级 有很多好用的插件。
- Webstorm 重量级 太过智能。
* sublime快捷键
Html:xt+tab Html结构代码
tab 补全标签代码
Ctrl+shift+d 快速复制一行
Ctrl+shiif+k 快速删除一行
Ctrl+鼠标左键单击 集体输入
Ctrl+h 查找替换
Ctrl+f 查找
Ctrl+/ 注释
Ctrl+L 快速选择一行
Ctrl+shift+↑(↓) 快速上移(下移)一行
F11 全屏 火狐也可以用
* 查看--布局 同时打开多个窗口
3.标签 <--返回目录
* <!-- 注释 -->
- 快捷键ctrl+/
- 页面不可见,但是打开源码可见
* 换行 <br/>
* 水平线标签 <hr />
* 上标下标:2<sup>3</sup> h<sub>2</sub>0
* 段落标签 <p>文本内容</p>
- 特点:上下自动生成空白行。<br>换行不会生成空白行。
* 标题标签
- h1-h6 取值到h6
- h1:字号最大,在一个页面里只能出现一次。
* 文本标签 <font size="6" color="red">文本内容</font>
- 早期会用,以后不用
* 文本格式化标签
- 文本加粗标签 <strong></strong> <b></b> 工作里尽量使用strong word中快捷键ctrl+b
- 文本倾斜标签 <em></em> <i></i> 工作里尽量使用em word中快捷键ctrl+i
- 删除线标签 <del></del> <s></s> 工作里尽量使用del
- 下划线标签 <ins></ins> <u></u> 工作里尽量ins word中快捷键ctrl+u
- 注意:之所以工作里使用<strong></strong> <em></em>
<del></del> <ins></ins> 是因为更有语义化。
4.图片表签 <--返回目录
* 图片表签 <img src="" alt="" title="" width="300" height="500"/>
- src:图片的路径
- alt:图片链接失效后显示的文本,SEO有用
- title:鼠标悬停显示的文本,也叫候补文本
- width:宽
- height:高
- 图片没有定义宽高的时候,图片按照百分之百比例显示,如果只更改图片的宽度或者高度,图片等比例缩放。
5.相对路径和绝对路径 <--返回目录
* 相对路径:相对于文件自身出发,就是相对路径。
- 文件和图片(html文档)在同一个目录(文件夹),直接写文件名。
<img src="lzl.jpg"/>
- 图片(html文档)在文件在下一级目录里。文件夹名称+/+图片(html)名称
<img src="志玲/lzl.jpg"/>
- 图片(html)在文件的上一级目录里,../图片(html)名称
<img src="../lzl.jpg"/>
- 图片在文件的上一级的其他目录里,../文件夹名称/图片名称
<img src="../志玲/lzl.jpg"/>
* 绝对路径
- 电脑上的绝对路径,一般不用 <img src="d:\lzl.jpg"/>
- 互联网上的绝对路径 <img src="http://"/>
6.超链接 <--返回目录
* <a href="" target="" title=""/>
- href:跳转的路径
<a href="a/a.jpg">链接</a> 默认在当前页面打开
- target="_self" 在当前页面打开,默认
- target="_blank" 在新窗口打开,自身页面不关闭
- title 提示文本 鼠标放到链接上显示的文字
7.锚点(锚链接) <--返回目录
* 先定义一个锚点<p id="sd">
* 超链接到锚点 <a href="#sd">回到顶部</a>
* 空链:不知道链接到那个页面的时候,用空链
<a href="#"/>
* 压缩文件下载 不推荐使用
<a href="a.rar">文本</a>
* 超链接优化写法
<base target="_blank">让所有的超链接都在新窗口打开
8.html的特殊字符 <--返回目录
< <
> >
空格
& &
9.列表 <--返回目录
* 无序列表
<ul type="">
<li></li>
<li></li>
</ul>
- type="disc" 默认实心圆
- type="circle" 空心圆
- type="square" 实心方块
* 有序列表
<ol type="1" start="3">
<li></li>
<li></li>
</ol>
- type="1或a(A)或i(I)" 默认是1
- <ol type="1" start="3">从3开始
- <ol type="a" start="3">从c开始
* 自定义列表
<dl>
<dt>小标题</dt>
<dd>解释标题</dd>
<dd>解释标题</dd>
</dl>
10.多媒体标签 <--返回目录
* embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等
* <embed src="" hidden="true" autostart="true" loop="true"/>
- src:相关声音文件的URL,该属性是<embed>标签必须的
- hidden:属性值true表示隐藏构造器,no表示显示,默认为no
- loop:loop属性的属性值是音频文件重复播放的整数次数,设置为"-1"或true则无限次循环播放,false不循环播放
- autostart:该属性用来控制多媒体内容是否自动播放。(属性值:true,false),默认true自动播放
- palette=color|color:该属性表示嵌入的音频或视频文件的前景色和背景色,第一个值为前景色,第二个值为背景色,中间用 | 隔开。
color可以是RGB色(RRGGBB)也可以是颜色名,还可以是transparent (透明)。
- 更多详细属性见"http://www.maiziedu.com/article/28525/"
例子:
<span style="font-family:SimHei;font-size:18px;">
<embed src="Faded123.mp3" loop="-1" hidden="no" autostart="false" width="" height="">
</embed>
</span>
11.滚动标签 <--返回目录
12.案例1---多媒体和滚动标签的使用 <--返回目录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="1.css">
<link rel="icon" href="1.icon">
<link rel="dns-prefetch" href="http://www.itcast.cn">
</head>
<body background="cun.jpg">
<embed src="1.mp3" hidden="false" autostart="true" loop="true">
<marquee behavior="alternate" direction="left" loop="-1" scrolldelay="100">
背景音乐不错
</marquee>
<marquee behavior="alternate" direction="left">
<img src="1.png">
</marquee>
<marquee behavior="scroll" direction="right" >
<img src="2.png">
</marquee>
</body>
</html>
html_02
1.<meta>标签 <--返回目录
<meta charset="utf-8"> 或 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="xxx,xxx" />
<meta name="description" content="xxx" />
<meta http-equiv="refresh" content="5;http://www.baidu.com"/> 定时跳转(重定向)
2.<link>标签 链接外部样式表文件 <--返回目录
<link rel="stylesheet" type="text/css" href="css/a.css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> 相对路径
或
<link rel="shortcut icon" type="image/x-icon" href="https://www.baidu.com/favicon.ico"> 网络URL,绝对路径
3.表格 <--返回目录
* 表格的标准结构
<table>
<caption></caption> 表标题
<thead>
<tr>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
* 常用属性
border="1" 边框宽度
bordercolor="red" 边框颜色
width="500" 宽度
height="300" 高度
cellspacing="0" 单元格与单元格的距离
cellpadding="2" 内容距边框的距离
valign="top | middle | bottom" 垂直对齐方式
align ="left | right | center" 水平对齐方式
- 如果直接给表格用align="center" 表格居中
- 如果给tr或者td使用,tr或者td内容居中
bgcolor="red" 背景颜色
* colspan=”2” 合并同一行上的单元格
* rowspan=”2” 合并同一列上的单元格
* 表格第一行 <th></th>用法和td一样,效果:加粗居中
* 细线表格
<table width="800" height="400" border="0" bgcolor="green" cellspacing="1">
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
4.练习--课程表(练习跨行跨列,细线表格) <--返回目录
<table width="300" height="200" bgcolor="green" cellspacing="1" align="center">
<caption>课程表</caption>
<tr bgcolor="white">
<th colspan="2" width="60"></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr bgcolor="white">
<td rowspan="2" width="50">上午</td>
<td width="30">1</td>
<td>语文</td>
<td>数学</td>
<td>物理</td>
<td>化学</td>
<td>生物</td>
</tr>
<tr bgcolor="white">
<td>2</td>
<td>体育</td>
<td>音乐</td>
<td>几何</td>
<td>画画</td>
<td>舞蹈</td>
</tr>
<tr bgcolor="white">
<td rowspan="2">下午</td>
<td>1</td>
<td>体育</td>
<td>画画</td>
<td>音乐</td>
<td>语文</td>
<td>音乐</td>
</tr>
<tr bgcolor="white">
<td>2</td>
<td>英语</td>
<td>舞蹈</td>
<td>体育</td>
<td>唱歌</td>
<td>体育</td>
</tr>
</table>
5.表单 <--返回目录
* 表单的作用是收集信息
* <form action="" method="get|post"></form>
属性:action:处理信息
Method=”get | post”
* 文本输入框<input type="text" maxlength="6" readonly="readonly" disabled="disabled" name="username" value="前端"/>
maxlength="6" 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态(不能编辑)
disabled="disabled" 输入框未激活状态
name="username" 输入框的名称
value="大前端" 将输入框的内容传给处理文件
* 密码输入框<input type="password" name="pwd"/>
- 文本输入框的所有属性对密码输入框都有效。
* 单选框<input type="radio" name="gender" value="male" checked="checked"/>男
<input type="radio" name="gender" value="female"/>女
- 只有将name的值设置相同的时候,才能实现单选效果
- checked="checked" 设置默认选择项
* 下拉列表
<select name="" multiple="multiple" size="2">
<option>河北</option>
<option>江西</option>
<option selected="selected">北京</option>
</select>
- multiple="multiple":可以多选,并且默认就显示了size=""设置的个数
** 不设置multiple,默认只显示第一个选项,或有selected="selected"属性的选项
- selected="selected":默认选中的
- size="2":显示2个,多余的选项通过滚动条查看
- 分组:将选项进行分组
<select id="selectid" name="select">
<optgroup label="北京市">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</optgroup>
<optgroup label="深圳市">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</optgroup>
</select>
- 多选框<input type="checkbox" name="" value="" checked="checked"></input>
- 多行文本框<textarea cols="130" rows="10"></textarea>
cols 控制输入字符的长度。
rows 控制输入的行数
- 文件上传<input type="file"/>
- 提交控件
<input type="button" value=""/>普通按钮,配合js使用
<input type="submit" value=""/>提交按钮
<input type="reset" value=""/>重置按钮
<input type="image" src="a.jpg"/>图片按钮
6.表单信息分组 <--返回目录
* <fieldset></fieldset> 对表单信息分组
<legend></legend> 表单信息分组名称
用法:
<form>
<fieldset>
<legend>表单信息分组名称</legend>
<input >各种表单控件
</fieldset>
</form>
7.一些html5定义的表单控件 <--返回目录
* 网址控件<input type="url">
- 空也能提交,输入必须是网址,必须包含htt://否则提示
* 日期控件<input type="date" name="date">
- 在火狐浏览器下,默认会有一个日期插件进行选择,最后get提交后在url后添加date=2018-05-22
* 时间控件<input type="time" name="time">
- 在火狐浏览器下,格式:上午 05:10,最后get提交后在url后添加time=05%3A10
* 邮件控件<input type="email">
* 数字控件<input type="number" step="5">
* 滑块控件<input type="range" step="10">
8.标签语义化 <--返回目录
* 标签语义化概念:根据内容的结构化,选择合适的标签。
* 标签语义化意义:
- 网页结构合理
- 有利于seo:和搜索引擎建立良好沟通,有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取;
- 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)
- 便于团队开发和维护
* 好的语义化的网站标准就是去掉样式表后,网页依然结构清晰,比如w3school
* 标签语义化的注意事项
1:尽可能少的使用无语义的标签div和span;
2:在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
3:不要使用纯样式标签,如:b、font、u等,改用css设置。
4:需要强调的文本,可以包含在strong或者em标签中strong默认样式是加粗(不要用b),em是斜体(不用i);
-----------------------------------------------------------------------
1.标签可以使用属性align="left/center/right",左右对齐方式
<p align="center">文本</p> 等价于<===> <center><p>文本</p></center>
<center>在html5中被废弃。可以用,但不推荐使用
2.标签可以使用属性bgcolor="red"来设置背景色
<p bgcolor="red">文本<p/>
3.frameset替换了body,iframe不替换body
- iframe是在一个html页面中嵌套一个html
- 可以使用frameset进行网页布局
- 也可以使用table+iframe进行网页布局
---