web 基础-CSDN博客

本文链接：https://blog.csdn.net/2301_77482582/article/details/139636639

一、认识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 段落标签

段落通常在文档中表示为文本块，会自动在其前后创建一些空白。

<p> 文本内容 </p>

1.3 水平线标签

hr是单标签

<hr>

1.4 换行标签

br是单标签

<br>

1.5 div标签

div标签是块级元素，竖排，独占一行，用来为HTML文档内大块的内容提供结构。

div包裹独立的块内容

<div> 这是块内容 </div>

<div> 这是块内容 </div>

<div> 这是块内容 </div>

<p>标记里不能嵌套<div>

div包裹盒子，包裹任何标签

1.6 span标签

span标签是行内元素，横排，跨度

span则是包裹文本文字

<span> 文本内容 </span>

<span> 文本内容 </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>

网络地址

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">

本地地址

<img src="img/a.png" alt="">

> 注意引入路径问题：

> 1. 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。

> 2. 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="images/img01/logo.gif" />。

> 3. 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。

4、链接标签<a>

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、有序列表

<ol>

<li>你</li>

<li>我</li>

<li>他</li>

</ol>

3、自定义列表

<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">





<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、内部样式表

<style>

div {

font-size: 30px;

color:blue;

font-weight: 700;

line-height: 50px;

font-style: italic;

}

</style>

> 内部样式需要写到 `<style>` 标签中。