Front-end day1
1.前端三把刀:
1.html(好比人的骨架)(各种各样标签)
(HyperText Markup Language:超文本标记语言,通过标记符号来显示网页中的各个部分。)
2.css (好比衣服) (各种显示效果)
(Cascading Style Sheets:层叠样式表,用于定义HTML元素的显示形式。)
3.java script(让人动起来)(页面动起来)
(直译式脚本语言,应用于web应用开发,为网页添加各式各样的动态功能。)
(jQuery 相当于javascript的一个类库)
2.HTML是什么?
服务端→返回到→浏览器→可识别的一种形式,这种方式叫做html。
3.HTML头部信息
1.文档树(后续附图片)
2.<!DOCTYPE html>
<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
3.<head>内容</head>
头部信息:定义内在的东西,网页是不显示的,除了title标签。
4.<body></body>
主题内容:定义用户看到的东西
5.头部事例:
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
6.头部标签
1.meta标签
<meta charset="UTF-8" />
1.自闭和标签,类似encoding,
2.为了区别自闭和标签和普通标签,在结尾加一个/ 。
3.页面编码:charset="UTF-8"
4.页面定时刷新:
例如:每2s刷新
<meta http-equiv="refresh" content="2" />
5.页面定时刷新跳转到某网页:
<meta http-equiv="refresh" content="2;Url=http://www.baidu.com" />
6.定义针对搜索引擎的关键词:
<meta name="keywords" content="html css xml" />
7.定义对页面的描述:
<meta name="description" content="免费的前端教程" />
8.定义页面的最新版本:
<meta name="revised" content="abc 2016/9/21">
9.X-UA-Compatible(兼容ie,专门为IE提供)
代表用IE最新内核处理网页:
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
注意:
1.<和字母之间不能有空格;
正确:<meta /> 错误:< meta />
2.<>里边的引号不能是中文的。
总结meta标签属性:
charset:定义文档的字符编码。
content:定义与 http-equiv 或 name 属性相关的元信息。
http-equiv:把 content 属性关联到 HTTP 头部。
name:把 content 属性关联到一个名称。
2.title标签
<title>Title</title>
网站的头部信息,用户可见。
一般不加属性
主动闭合标签,需要加</title>
注意:
如果不加</title>,浏览器会报错,但不显示报错信息,会一直卡在那里。
3.link标签
1.css 引入css样式
<link rel="stylesheet" type="text/css" href="/c5.css">
2.icon 引入icon图片:链接网页头部图标
<link rel="shortcut icon" href="favicon.ico">
4.style
在页面中写样式,例如:
<style>
.aa {
background-color: red;
color: white;
}
</style>
5.script
1.引入css文件
2.引入js文件
7.注释格式
<!--xxx-->
PyCharm 里边注释,在字体所在行,按Ctrl+? 自动添加注释。本文出自 “杨栋豪” 博客,请务必保留此出处http://506554897.blog.51cto.com/2823970/1855122
原文:http://506554897.blog.51cto.com/2823970/1855122