1.认识前端
1.1前端就是将效果图生成网页，利用HTML+css+js等技术。
1.2Pc端 移动端
1.3用户体验
2.认识网页
2.1网页由文字、图片、输入框、视频、音频超链接等组成。
2.2Web标准
W3c组织（万维网联盟）
HTML 结构标准
3.浏览器
4.浏览器内核
渲染引擎是兼容性问题出现的根本原因。
5.浏览器和服务器的那点事
6、Url地址
Url地址就是我们说的网址
7、认识html
7.1 Hyper text markup language
超文本标记语言
超文本：超链接（实现页面跳转）
7.2Html结构标准
<!doctype html> 声明文档类型
<html> 根标签
<head> 头标签
<title></title> 标题标签
</head>
<body> 主体标签
</body>
</html>
Html与htm是一样的
后缀名不能决定文件格式，只能决定打开文件打开的方式
7.3Html标签分类
单标签 <!Doctype html>
双标签 <html></html> <head></head> <title></title>
7.4Html标签关系分类
包含（嵌套关系）<head><title></tilte></head> 父子
并列关系 <head></head><body></body> 兄弟姐妹关系
7.5开发工具
DW 历史悠久，设计师使用
Sublime 轻量级 有很多好用的插件
Webstrom 重量级 太过智能
7.6标签
1、注释标签 Ctrl+/
2、换行标签 <br/>
3、水平线标签 <hr/>
4、双标签<p>文本内容</p>
特点：上下自动生成空白行。
换行不会生成空白行。
8、标题标签
8.1h1-h6取值到h6
h1在一个页面里只能出现一次
8.2文本标签
<font>文本内容</font>
8.4文本加粗标签
<strong></strong>
<b></b>
工作中尽量使用strong
8.5文本切斜标签
<em></em>
<i></i>
工作中尽量使用<em></em>
8.6删除线标签
<del></del>
<s></s>
工作中尽量使用<del></del>
8.7下划线标签
<ins></ins>
<u></u>
工作中尽量用<ins></ins>
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<h1> 40.6摄氏度：上海创出140年气象史上高温新纪录</h1>
<!-- 注释标签 -->
2013年07月27日 <br>
<!-- 加粗标签 -->
10:58:26 来源： <strong>新华网</strong>
<hr>
<p> <em>新华网上海７月２６日电（记者李荣）２６日１３时３６分至４７分这一时间段，上海徐家汇气象观测站测得当日最高温达４０．６摄氏度。这是上海有气象记录以来１４０年的高温新纪录，打破了此前１９３４年创下的４０．２摄氏度的历史极值。</em></p>
<p><ins>上海已经连续２天发出了最高等级的红色高温警报。</ins>上海中心气象台首席服务官满莉萍说，今年副热带高压强度特别强，对上海及江南地区的控制“实在太稳定了”，整个７月份基本上都处在它的势力范围之内。２５日上海已出现了气象史上７月份“第四高”的高温值，这使得２６日的“基础”气温就很高，超过了３０摄氏度，然后不断地升温。此外，２６日白天风小，又吹的是西南风，特别是在中午之后这一个最易出现高温的时段，光照又比较强，所以气温“直线飙升”，一举冲破历史极值，出现了“创纪录”的极端酷暑天。</p>
<p>在上海历史上，出现４０摄氏度以上极端高温的几率并不大。根据相关资料，中心城区徐家汇观测站
<font color="red" size="5">１４０年来仅出现了５次记录</font>，除了这一次的新纪录，还有就是１９３４年７月１２日的４０．２摄氏度；１９３４年８月２５日、２００９年７月２０日、２０１０年８月１３日的４０摄氏度。</p>
<p> <del>由于气温实在太高，上 海２６日下午不少地区出现了热对流天气。气象台说，首先是浦东地区，下起了热雷雨。到１５时０５分，全市大部分地区出现了分散性的雷电活动和热雷雨，中心城区徐家汇等地都响起了隆隆的雷声。</del></p>
</body>
</html
注意：之所以工作里使用<strong></strong> <em></em> <del></del>
<ins></ins>是因为更有语义化。
8.8图片标签
Src 图片的来源 必写属性
Alt 替换文本 图片不显示的时候显示的文字
Title 提示文本 鼠标放到图片上显示的文字
Width 图片宽度
Height 图片高度
注意：图片没有定义宽高的时候，图片按百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。
9、路径
####9.1相对路径
相对于文件自身出发，就是相对路径
文件和图片（html文档）在同一个目录（文件夹），直接写文件名。
图片（html文档）在文件在下一级目录里，文件夹名称+/+图片（HTML）名称
图片（HTML）在文件的上一级目录里，..+/+图片（HTML）名称
图片在文件的上一级的其他目录里，../文件夹名称/图片名称
总结：找到下一级目录（文件夹）的图片（文件）用 /
跳出当前目录使用../
9.2绝对路径
10、超链接
href 去往的路径（跳转的页面） 必写属性
title 提示文本 鼠标放到链接上显示的文字
target=”_self” 默认值 在自身页面打开（关闭自身页面，打开链接页面）
Target=”_blank” 打开新页面 （自身页面不关闭，打开一个新的链接页面）
11、锚链接
11.1先定义一个锚点
```
<p id="sd">
```
11.2超链接到锚点
```
<a href="#sd">返回</a>
```
11.3空链 不知道链接那个页面的时候用空链
```
<a href ="#">空链</a>
```
11.4压缩文件下载 不推荐使用
<a href="../../01-ppt.rar">压缩包</a>
11.5超链接优化写法
<base target="_blank"> 让所有的超链接都在新窗口打开
12另存为 Ctrl+shift+s
13特殊字符
14列表
14.1无序列表
<ul>
<li></li> 列表项
<li></li>
</ul>
type=”square” 小方块
Type=”disc” 实心小圆圈
Type=”circle” 空心小圆圈
14.2有序列表
<ol>
<li></li> 列表项
<li></li>
</ol>
type=”1,a,A,i,I” type的值可以为1,a,A,i,I
start=”3” 决定了开始的位置。
14.3自定义列表
<dl>
<dt></dt> 小标题
<dd></dd> 解释标题
<dd></dd>
</dl>
15、音乐标签
<embed src="1.mp3" hidden="true">
16、滚动
17、滚动和音乐标签的案例
<!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="true" autostart="true" loop="true">
<marquee behavior="alternate" direction="left" loop="-1"
scrolldelay="100">
背景音乐不错
</marquee>
<marquee behavior="alternate" direction="left">
</marquee>
<marquee behavior="scroll" direction="right" >
</marquee>
</body>
</html>
网友评论