1. 前端三种典型的核心技术:
(1) Html: 将元素进行定义
超文本标记语言,已经发展到5.0版了, 即HTML5。
2. html
(1) 定义: 用尖括号括起来的语言为 HTML,是一种用来制作网页的语言
(2) 特点: 由一个个的标签组成, 用这种语言制作的文件保存的是一个文本文件, 文件的扩展名为 .html 或者 .htm
3. html文档的基本结构
<html> <!--根标签: html开始标签 -->
</html> <!--根标签: html结束标签 -->
<head> <!--html标签中的第一个子标签: head开始标签-->
</head> <!--html标签中的第一个子标签: head结束标签-->
(2) head的主要作用
- 网页的设置
- 资源的引用
(3) 注意点1:
head标签中的内容一般不会显示在网页上.
<body> <!--html标签中的第二个子标签: body开始标签-->
</body> <!--html标签中的第二个子标签: body结束标签-->
注意点2:
body中的内容通常用于网页显示
注意点3:
html语言中注释的写法
<!-- 注释的内容 -->
快捷键: ctrl + / 取消注释: ctrl + /
4. 快速创建html文档
第一步
新建一个.html文件, 在文件中快速创建基本标签
第二步
快速创建: 文件中敲一个 " ! " 然后按 tab 键
如果是中文则为: lang="zh-CN"
5. 标签的分类
(1) 注意点
在前端中, 元素指的就是标签, 所以我们有时候说: xx元素, 即指的是 xx标签
(2) 分类
块元素 (行元素)
特点
- 单个块元素在浏览器中默认独占一行
- 两个块元素不能够在一行显示, 他们会自动换成两行显示
- 块元素可以设置宽高等属性.
常用的块元素标签
1>标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2>段落标签
表示文档中的一个文字段落, 除了具有块元素基本特征, 还含有默认的外边距
<p> </p>
强制换行
<br>标签
在html中, 如果想要写大于号, 小于号, 或者空格
代码实现大于号: > ;
代码实现小于号: < ;
代码实现空格:
3>通用块容器标签 div
表示文档中一块内容, 具 有块元素基本特性, 没有其他默认样式
内联元素 (行内元素)
(1) 特点
- 多个内联元素可以在一行显示
- 内联元素不能够设置宽高, 设置了也没有用, 不会显示出效果
- 内联元素的宽高由他们本身的内容多少来支撑, 内容多,宽高自动增加.
(2) 常用内联元素标签
超链接标签 a
链接到另外一个网页, 具有内联元素基本特征, 默认文字蓝色, 有下划线
2>格式
<a href="http://www.baidu.com">百度网站</a>
3>注意点
a 标签的 href 属性可以添加 # 号, 这个是缺省链接地址
例如
<a href="#">默认链接</a>
不确定地址时, 我们可以临时使用 # 来占位
如果想要跳转到当前页面的最上方时, 可以使用 #
a 标签有 target 属性
- - 如果不设置该属性, 在当前页面打开新页面
例如
<a href="http://www.itcast.cn">原来的窗口打开界面</a>
- 如果设置该属性, 则会在新窗口中打开新页面
例如
<a href="www.baidu.com" target="_blank">新窗口打开界面</a>
(3) 通用内联容器标签 span
具有内联元素基本特性, 没有其他默认样式,在文字段落的中间部分强调某一部分的时候调用span
(4) 图片标签 img
在网页中插入图片, 具有内联元素基本特性, 但是它支持宽高设置
<img src="images/pic.png" alt="图片">
特点说明
1>src属性主要是添加要展示的图片地址
2>alt属性的作用
- 图片加载失败时, 显示的提示信息
- 搜索引擎在收录图片时, 根据这个属性值来收录图片
- 制作无障碍网页, 方便盲人的读屏软件读取.
注意点: 特殊的一些标签
空格
换行
<br>
小于号
<
大于号
>
删除
del 或者 ( s )
倾斜
em 或者 ( i )
下划线
ins 或者 ( u )
6. css
(1) 基本格式:
选择器 {
属性 : 值;
属性 : 值;
...
}
(2) css样式导入html文件的三种方式:
内联式
通过标签的 style 属性, 在标签上直接写样式嵌入式
外联式
<link rel="stylesheet" type="text/css" href="css/样式文件名.css">
(3) css选择器:
基础选择器
- 通用选择器 ( * )
通用选择器, 匹配任何元素:
- 标签选择器 ( 标签名 )
一般用来做一些通用设置, 或用在层级选择器中
注意点
一旦使用标签选择器,则当前页面上的所有该标签全部都有该样式
- 类选择器 ( class )
通过 类名来选择元素, 一个类可应用于多个元素, 一个元素上也可以使用多个类
- id 选择器 ( id )
通过 id 名来选择元素,元素的 id 名称不能重复
特点
一个样式设置项只能对应于页面上一个元素,不能复用
组合选择器
- 多元素选择器
同时匹配所有 E元素 和 F元素, E和F之间用逗号分隔:
- 后代(层级)选择器
主要应用在标签嵌套的结构中
按照标签的层级来匹配对应的标签
- 子元素选择器
E > F 匹配所有 E元素的 子元素F
- 毗邻选择器
匹配所有紧随 E元素 之后的同级元素F (向下寻找)
属性选择器
1. [attr] { 属性名: 值;...}
2. E[attr=val] {属性名: 值; ...}
伪类选择器
常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态
(4) css进阶
浮动(float)