一、认识web
(一)国际上常用的浏览器有:
1.IE浏览器 → Edge浏览器
2.谷歌(Chrome)浏览器
3.safari浏览器
4.火狐(Firfox)浏览器
5.Opera浏览器
被称为五大浏览器,其中谷歌浏览器在全球市场上占有率最高,开发人员一般使用的都是谷歌浏览器来进行测试。
(二)浏览器的组成部分
1. 用户界面
2. 浏览器引擎(渲染引擎)
3. JS 解释器
4. 网络功能模块
5. 数据持久化存储
(三)web标准:
HTML(行为) CSS(表现) JS(交互)
二、HTML
HTML全称超文本标记语言
文档中最大的标签,我们称为根标签。
元素提供了关于这篇文档的信息。
定义文档的主体,用户所看到的内容。
HTML5.5
(一)HTML元素
1、排版标签
1.1 标题标签
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
其中一个html中一级标题只能有一个
1.2 段落标签
段落通常在文档中表示为文本块,会自动在其前后创建一些空白。
文本内容
1.3 水平线标签
hr是单标签
1.4 换行标签
br是单标签
1.5 div标签
div标签是块级元素,竖排,独占一行,用来为HTML文档内大块的内容提供结构。
div包裹独立的块内容
这是块内容
这是块内容
这是块内容
标记里不能嵌套
div包裹盒子,包裹任何标签
1.6 span标签
span标签是行内元素,横排,跨度
span则是包裹文本文字
文本内容
文本内容
文本内容
2、文本格式化标签
粗体
也是粗体
斜体
也是斜体
删除
也是删除下划线
也是下划线
> 注意:
> strong、em 、del 、ins 标签(推荐使用)有语义,起到加重语气的效果;
> b、 i 、s、 u标签是没有的语气
3、图像标签
本地地址
> 注意引入路径问题:
> 1. 图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可,如。
> 2. 图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如。
> 3. 图像文件位于HTML文件的上一级文件夹:在文件名之前加入“../” ,如果是上两级,则需要使用 “../ ../”,以此类推,如。
4、链接标签
5、icon图标
元素包含了所有的头部标签元素,使用link标签添加icon图标,meta标签添加网站相关信息。
6、使用特殊字符
7、HTML标签的语义化
>1. 方便代码的阅读和维护
>2. 同时让浏览器可以很好地解析,从而更好分析其中的内容
>3. 使用语义化标签会具有更好地搜索引擎优化
(二)列表
1、无序列表
ul li 无序列表 ul里只能嵌套li ,li里可以包裹其他元素
- 妲己
- 貂蝉
- 瑶妹
2、有序列表
- 你
- 我
- 他
3、自定义列表
- 售后中心
- 手机售后
- 电视售后
- 电脑售后
> – 所有特性基本与ul 一致。
> – 但是实际工作中, 较少用 ol ,因此我们用一句话来总结下 ol:
> – 有序列表中默认的type类型是数字,而且是从1开始的。它有两个属性:type、start。
> – type:有五个属性值:1、a、A、i、I(罗马数字),表示列表前缀的格式;
> – start:属性值位数字, 表示从type类型的第几个数字开始,比如当你选的type=“a”,start=“3”。
(三)表单
1、input控件
2、label 标签和
label 标签为input 元素定义标注(标签)
作用: 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
在
密码:
三、CSS
1、CSS是层叠样式表, CSS3.0
2、 CSS使用方式
2.1 行内样式
<p style="font-size: 30px; color: red;font-weight: 700; line-height: 50px;
font-style: italic;”>
关于迷茫
当你不知如何抉择时
假象五年后回顾青春
你就知道如何抉择
> 行内样式需要写到标签的 style 属性值中。
2.2、内部样式表
div {
font-size: 30px;
color:blue;
font-weight: 700;
line-height: 50px;
font-style: italic;
}
> 内部样式需要写到 “ 标签中。
2.3、外部样式表
链接式:将样式写到单独的文件中,文件的扩展名为 `.css`
在里写
在里写
span元素
span元素
span元素
在另一个css里写
span{
color: green;
}
– 定义在外部文件(外链样式):开发中主要是通过这种形式定义样式。(推荐)
– 在页面的头部定义(内联样式):通过这种形式定义的样式只在本页面内生效。
– 定义在特定的元素身上(行内样式):这种形式多用于测试,可维护性较差。(不推荐)
3、基本选择器
3.1 标签选择器
> 选择页面中所有的 `
` 元素,给它们设置字体大小和颜色。
3.2 Class 选择器
> 选择页面中 class 属性值中包含 box 类名的所有元素,给它们设置字体大小和颜色。
3.3 ID 选择器
> 选择页面中 id 属性值是 nav 的元素,给它设置字体大小和颜色。
W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。
类选择器(class) 好比人的名字, 是可以多次重复使用的。
id选择器 好比人的身份证号码, 全中国是唯一的, 不得重复。 只能使用一次。
3.4 通配符选择器