前端基础网页开发学习——HTML和CSS

小咪咪 2023-01-07 12:21 125阅读 0赞

## HTML入门知识汇总 ##

在学习HTML和CSS之前，咱们先来聊一聊网页Web。众所周知，Web一般是由HTML、CSS和JS组成的。其实早有网友一图以蔽之了。（看下图）![Web基本组成][Web]  
正如上图所言，HTML就好比是一个毛坯房，CSS就是房间装修，网页美不美观这就取决于你的装修水平了（CSS技术过不过硬）。  
下面咱们回归正题了哈。  
1、**常见的浏览器及其内核**  
(1)常用的六大浏览器:谷歌的Chrome、微软的IE和Edge、火狐firefox、Safari和Opera。近年来，后起之秀——谷歌的Chrome迅速占据市场，一跃成为最受欢迎的浏览器，所以其市场份额也是最大的。[查看浏览器市场份额][Link 1]  
![常见的六大浏览器][20210117203120778.png_pic_center](2)Chrome的内核是Chromium/Blink、IE的内核是Trident、firefox的内核是Gecko、Safar的内核是webkit、Opera的内核是blink。  
![浏览器内核][20210117205829207.png_pic_center]总而言之，浏览器内核的作用其实就是显示网页。  
2、**常见的html标签及其使用**  
咱们先来通过一个简单的实例代码认识一下HTML的基本框架（也称为是骨架）：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset ="utf-8">
    <title>崇志广勤</title>
    </head>
    <body>
    崇志广勤网，欢迎您！
    </body>
    </html>

然后大家看看最后生成的效果图：  
![崇志广勤网，欢迎您！][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzA2MjkwNw_size_16_color_FFFFFF_t_70_pic_center]  
其实，HTML的基本框架有很多标签，常见的有骨架标签（如根标签< html >、< head >、< title >、< body >）、空标签< br / >、单标签和双标签等。这里的单标签和双标签的区别是否成对出现，例如常见的单标签有空标签< br / >、水平线< hr />;常见的双标签有骨架标签、< strong >字体加粗< /strong >、< em >斜字体< /em >、< del >加删除线< /del >、< ins >加下划线< /ins >、< span>相当于一个盒子，呈现在一行显示的，用于分区, 可一行多个元素< /span>、< div>相当于一个盒子，上下显示，双标签、一行一个、用于布局< /div>等。

**下面咱们来看看html标签关系。**

常见的html标签关系有两种分别是:嵌套(注意下一行要tab缩进)和并列。  
标签属性:<电脑 颜色=“红” 大小=“8寸”></电脑>  
图像标签img:![Image 1][]

1.图像标签：①打开图片：![Image 1][]②图片标签的属性：src（指出图片路径）、alt（替换文本，图像不能显示的文字）、title（提示文本，鼠标放在图片上会显示文字）、width（图片宽度）、height（图片高度）、border(边框粗细)  
2.链接标签：① 文本或图像 ②分类：外部链接 < a href=“http:// www.baidu.com “> 百度、内部链接（当前网页） < a href=“index.html”> 首页 、空连接< a href=”\#”> 首页 、下载链接、网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接、锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置

###    3.路径：①作用：通过新建一个文件夹来存放图片方便查找②分类：相对路径（分为同级、上级、下级，相对于html页面的位置，![Image 1][]）和绝对路径(图片在电脑磁盘里的位置，从盘符开始的路径，“D:\\web\\img\\logo.gif”)   4.注释： （Ctrl+/快捷键将当前一行进行注释） ###

1、学会了创建表格：①定义：

（行）

<table> 
 <tbody> 
  <tr> 
   <th>第一行表头元素</th> 
  </tr> 
 </tbody> 
</table>

②表格属性：align（left、center、right，表格相对周围元素的对齐方式）、border（单元有无边框，默认“”，表示无边框）、cellpadding（单元边与内容的空白，默认1）、width(表格宽度)、cellspacing(单元格间的空白，默认2).  
2、学会了表格结构标签：①标签 （表格的头部区域，用于定义表格的头部， 内部必须拥有 标签，一般是位于第一行）、（标签 表格的主体区域，用于定义表格的主体，主要用于放数据本体）②和 都是放在

标签中。  
3、学会了表格标签：①合并单元格： 跨行合并：rowspan=“合并单元格的个数”，跨列合并：colspan=“合并单元格的个数”。②合并单元格的步骤：先确定是跨行还是跨列合并； 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：；删除多余的单元格。

1.学会了列表标签：①用途：页面布局。②分类:无序列表(

*  列表项1
 *  ，其中
    
    中只能嵌套
 *  
 *  。)、有序列表（
    
    1.  列表项1
    
    ，
    
    1.  标签用于定义有序列表，列表排序以数字来显示，并且使用
    2.  标签来定义列表项）和自定义列表(
        
        标签用于定义描述列表/定义列表，该标签会与 （定义项目/名字）和
        
        （描述每一个项目/名字）一起使用)③无序标签只包含li，使用相对较多，li里面可以包含任何标签；有序标签只包含li，使用相对较少，li里面可以包含任何标签；自定义列表里只包含dt和dd，dt和dd里可以放任何标签。  
        2.学会了制作小型表单网页。  
        3.学会了制作小型注册页面。
    
    1.学会了CSS的基本知识：①定义：层叠样式表。 ②CSS 是一种标记语言。③CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。④CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即 结构 ( HTML ) 与样式( CSS ) 相分离。  
    2.学会了 CSS 语法规范：①CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式。②。  
    3.学会了CSS的样式：（1）CSS 样式格式书写两种：①紧凑h3 \{ color: deeppink;font-size: 20px;\}②展开h3 \{ color: pink;font-size: 20px;\}。（2）样式大小写：h3 \{color: pink;\}/H3 \{COLOR: PINK;\}③空格规范：h3 \{color: pink;\}。【①属性值前面，冒号后面，保留一个空格② 选择器（标签）和大括号中间保留空格】  
    4.标签选择器：①标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。②标签名\{属性1: 属性值1;属性2: 属性值2 属性3: 属性值3;…\}③类选择器用于差异化选择不同的标签，单独选一个或者某几个标签。.类名 \{属性1: 属性值1; …\}。结构需要用class属性来调用 class 类的意思
    
    变红色
    
    1.学习了CSS选择器的基本知识和使用方法：①选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式。②格式：h3 \{color: pink;\}或者H3 \{COLOR: PINK;\}③注意空格规范的格式是：h3 \{color: pink;\}。  
    2.在CSS选择器需要注意：①属性值前面，冒号后面，保留一个空格② 选择器（标签）和大括号中间保留空格。  
    3.div 就是一个盒子,用来装网页内容的。  
    4.利用HTML和CSS的基本知识制作了疫情新闻页面。
    
    **接下来，我们开始聊聊“页面布局”。**  
    首先，页面布局就是将用 CSS 来摆放盒子并把盒子摆放到相应位置，以此完成页面布局。实际开发中，一个页面基本都包含了这三种布局方式： 普通流、浮动、定位。  
      
    **网页布局二大准侧：**  
    （1）网页布局第一准侧：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。  
    （2）网页布局第二准侧：先设置盒子的大小, 之后设置盒子的位置。  
      
    **1.CSS 提供了三种传统布局方式(也就是盒子如何进行排列顺序)：**  
    (1) 普通流（标准流）  
    ①本质上是标签按照规定好默认方式排列。  
    ②块级元素会独占一行，从上向下顺序排列。像这些常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table。  
    ③行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。 像这些常用元素：span、a、i、em 等。  
      
    (2) 浮动（float）  
    ①本质上通过改变元素标签默认的排列方式来多个块级元素一行内排列显示（也是浮动最常用的应用）。  
    ②浮动布局的第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。  
    ③float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。  
    形式：选择器 \{ float: 属性值; \}  
    属性值有三个：none（不浮动）、left（向左）和right（向右）。  
    ④浮动的重难点：脱标和不保留。  
    脱标：脱离标准普通流的控制移动到指定位置。  
    不保留：浮动的盒子不再保留原先的位置  
    ⑤注意：浮动元素经常和标准流父级搭配使用。为了约束浮动元素位置, 我们网页布局一般采取的策略是:  
    先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置，符合网页布局第一准侧。  
      
    (3) 定位  
    定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子。  
    定位 = 定位模式 + 边偏移(边偏移就是定位的盒子移动到最终位置,有 top、bottom、left 和 right 4 个属性) 。  
    定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。  
    定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：static、relative、absolute和fixed。
    
    **案例模仿项目——品优购网购商城：**  
    首先我们先来看看项目的效果图：  
    1.首页：

[Web]: /images/20221119/d196c2f20eaa4eb98648e8e2d6a2e698.png
[Link 1]: http://tongji.baidu.com/data/browser
[20210117203120778.png_pic_center]: /images/20221119/deb2278925e041dfb8d6bf0821dd515e.png
[20210117205829207.png_pic_center]: https://img-blog.csdnimg.cn/20210117205829207.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzA2MjkwNw_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20210117222810333.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzA2MjkwNw==,size_16,color_FFFFFF,t_70#pic_center
[Image 1]: