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