亿企邦
  • 首页
    •
  • 解决方案&服务
    •
  • 客户&案例
    •
  • 营销资讯
    •
  • 关于我们
    •
    15158846557 或 在线咨询 在线咨询
    亿企邦
    15158846557 或 在线咨询
    亿企邦

    快捷入口

    所在位置： 首页 > 营销资讯 > 网站运营 > Part1 HTML网页开发 模块1-HTML&CSS基础

    Part1 HTML网页开发 模块1-HTML&CSS基础

    时间：2023-10-05 21:18:01 | 来源：网站运营

    时间：2023-10-05 21:18:01 来源：网站运营

    Part1 HTML网页开发 模块1-HTML&CSS基础：
    文章内容输出来源：拉勾教育大前端就业集训营

    【前言】

    报名参加这个训练营的初衷，一是兴趣，感觉做开发很有意思，程序员，充满改变世界的天真；二是，转行需求。我是2020毕业的，听家里安排，报考了当年的特岗老师，被分配到自己家乡比较偏僻的地方九年一贯制学校教书，本来考的物理，因为地方缺老师，又被校长安排到带小学，真的很无聊，而且一学期工资就同学一个月的，自己也一直想出去闯闯，这真的不是我要的生活。几经抉择过后，决定报名培训班，趁早转行。

    在拉勾之前，我还咨询了解过诸如慕课网、网易、腾讯等平台的就业急训营，最终选择拉勾的原因，主要是考虑到拉勾有行业招聘背景，网易、腾讯固然技术实力及人才可能比拉勾稍强，但谈到对于企业市场招聘需求的把我了解，应该稍逊拉勾，我需要的是能够准备把握市场招聘需求，技术课程内容设计紧贴企业需求，更加强力的保障，能够让我100%入行（在我的自身努力学习的前提下），同时拿到一个不错的薪水。所以就决定报拉勾的就业营。

    模块一的内容学下来，基本上，是些基础知识，认知上没有什么难度，但还是要多敲，实际写起来，却经常有点问题。这里拉勾的助教老师，也比较耐心，回复及时，耐心讲解，暂时学习状态还好。

    【前导篇】

    一、为什么学前端，前端有多厉害？

    百闻不如一见，与其听官方学术高深莫测的专业解释，我们不如先膜拜下大佬，过过眼瘾，看看自己想不想学前端。

    二、见识了大神们的技术，谈谈自己对前端开发的理解

    前端总的来说，是做数据内容的客户端呈现和帮助用户通过可视化客户端界面解决相应的业务处理。根据用户使用的客户端设备的不同，可以分为不同终端的前端开发，目前主流客户端设备有移动端（以手机，平板为主），PC端，所以目前前端开发主要工作，集中于这两个终端的业务应用的开发，也就是业务数据内容主要做这两大终端的可视化呈现和用户交互。手机端，主要是web应用，App（Android和IOS），PC端主要网页。所以市场上，前端开发的工种又被细分为了web前端工程师，移动开发工程师，Android开发工程师，IOS开发工程师等。

    三、前端三层技术

    四、拉勾总结的前端应用场景：

    五、就业进阶方向：

    六、拉勾推荐•前端学习路线：

    （一）知识基础——学前端前，要掌握的

    1. 计算机基本认识
    2. 应用概念
    3. 前端和后端认识

    （二）入门阶段

    （三）JavaScript进阶

    1. JavaScript语法
    2. 基本数据结构
    3. WebAPIs
    4. ES6+
    5. 模块化
    6. TypeScript
    7. 包管理工具（npm，yarn）

    （四）CSS进阶

    （五）构建工具

    （六）主流框架

    （七）持续学习

    【模块一】HTML网页开发和CSS语法基础

    一、HTML基础（结构层）——构建语义化网页结构

    （一）网页的组成

    1. HTML（结构层）
    2. CSS（样式层）
    3. JavaScript（行为层）
    4. 其他多媒体内容（如图片、视频、音频等）

    （二）互联网工作原理

    网页文件云端部署——>客户端发起http请求——>服务器接受并响应请求——>将云端网页文件通过http相应回传给客户端——>客户端浏览器渲染网页文件——>用户看到网页内容

    （三）互联网运行过程主体内容

    （四）五大主流浏览器

    我们在浏览器中最终能看到的网页页面，正是浏览器内核对接受的网页文件解析渲染的结果。不同浏览器，对网页的解析渲染，有差别。以下是五大主流浏览器及其内核说明：

    Tips：如何查询任意浏览器网页的使用的解析渲染内核？F12，控制台，输入“navigator.userAgent”，回车。

    （五）HTTP协议

    hypertext transfer protocol，超文本传输协议，用于浏览器或其他应用程序与Web服务器应用层通信。网页中的每一个资源，都需要发送请求加载。

    （六）HTML基本结构（必写）

    1.基本结构

    <html> <head> <title>网页标题</title> </head> <body> 网页主体 </body></html>2.DTD 文档类型声明

    全称，DocType Definition，文档类型声明。告诉浏览器按声明的HTML版本文档规范中的语法解析网页文件的界面结构。

    <!-- 语法：使用HTML5的文档规范解析网页文件 --><!DOCTYPE html> 3.xmlns与命名空间

    告诉浏览器，当前html中的某个标签及其全部子元素命名使用的是哪个命名规范，以便浏览器准确解读标签的语义，避免命名相同造成浏览器标签解析的语义冲突。

    为什么存在命名语义冲突？请观察下列代码思考

    <!-- html 产生于xml,xml是可以程序员自定义的标记语言，以下就是两种不同的标记命名 --><!-- 表格 --><table> <tr> <td>Apples</td> <td>Bananas</td> </tr></table><!-- 家具 --><table> <name>African Coffee Table</name> <width>80</width> <length>120</length></table>这个“空间”，其实就是规范约束下的范围，本质上是对应的一台服务器上编写好的规范文件，所以属性值通常是一个URL。所有标签都有这个属性，浏览器会将此命名空间用于该属性所在元素内的所有内容。

    常见的应用语法：

    <!-- 全文应用：符合XML规范的XHTML文档 --><html xmlns="http://www.w3.org/1999/xhtml"><!-- 局部应用：数学命名空间 --><div xmlns="http://www.w3.org/1999/Math/MathMl">x3/x</div><!-- 前缀应用 --><html xmlns="http://www.w3.org/1999/xhtml"> xmlns:math="http://www.w3.org/1999/Math/MathMl"><math:div>x3/X<div>4.文档语言声明

    <!-- 英文文档声明：提高英文网站搜索排名 --><html lang="en" xml:lang="en"><!-- 中文文档声明：提高中文网站搜索排名 --><html lang="zh-cn" xml:lang="zh-cn">5.文档字符声明

    字符集 各种文字和符号的集合。常用的字符编码有：

    XHTML1.0版本

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">HTML5

    <meta charset='utf-8' />tips：meta标签声明字库，与编辑器编译字库必须一致，不然会出现乱码。

    （七）HTML基本语法

    1.规范版本

    W3C万维网联盟，发布和维护互联网规范和标准的组织。

    2.HTML标签

    标记html文件的内容，使之语义化

    语法：

    <!-- 单标签 --><labelName /><!-- 双标签 --><labelName></labelName> 3.HTML元素

    html元素≠html标签

    html元素=开始标签+元素内容+结束标签

    元素内容（双标签内部包含的内容）=①文本②元素

    Tips：

    -标签级别（根据元素内容的不同）

    -HTML元素特性：

    4.HTML标签属性

    html标签属性，用以描述标签的更多信息。

    语法：属性名和属性值采用键值对写法（key:val;）

    <!-- 一个属性，多个属性值 --><labelName key="val1 val2 ... valN"></labelName> <!-- 一个标签，多个属性 --><labelName key1="val1" key2="val2" ... keyN="valN"></labelName>

    （八）HTML代码注释

    语法：

    <!-- 注释内容 -->作用：

    ①提示内容，便于阅读

    ②注释代码，排查错误

    ③注释代码，备用恢复

    （九）HTML标签篇（常用）

    1.（段落）标题 h1~h6

    ①容器级标签，不能相互嵌套，自带大小样式，但本质功能是标记和提示对应级别标题语义

    ②H$6，在vscode中可以快速生成一组h1~h6连续标题标签

    ③文档权重：h1>…>h6(反应标记内容在文档中的重要性)

    ④h1文档权重大，要放最重要内容，如logo导航栏

    ⑤约定俗成，一个h1标记重要内容，有利于提高浏览器权重




    2.（段落）主体标签 <p></p>

    ①文本类标签：只能放文本或类文本标签（图，表单元素）；

    ②作用：标记具有同一主题的段落内容。




    3.换行标签 <br />

    作用：同一主题段落（即p标签内）强制换行，无固定语义




    4.文本格式化标签

    ①类型：双标签，文本类标签；

    ②作用：控制段落文本样式的标签

    ③常见的文本格式标签：




    5.图像标签 <img />

    ①类别：单标签，类文本标签

    ②作用：指定位置插入图片

    ③支持图片格式：jpg，png，gif

    ④常用属性：

    Tips：资源路径类别




    6.音频标签 <audio></audio>

    ①类型：双标签

    ②支持音频格式：mp3，ogg，wav

    ③常用属性：

    ④语法实例：

    <audio src="../media/comet.mp3" controls="controls"></audio>


    7.视频标签<video></video>

    ①类型：双标签

    ②支持视频格式：mp4，ogg，webm

    ③常用属性：

    ④语法实例：




    8.超链接标签<a></a>

    ①类别：容器级标签，双标签；

    ②作用：定义超链接，用于从一张页面链接到另一张页面；

    ③常用属性：

    Tips：_parent 和 _top，目前已经不会使用了，最多也就是个_blank。详细内容后续完善。

    ④跳转类型：

    Tips：锚点设置方式

    <!-- id属性标记锚点 --><div id="idVal"></div><!-- a标签嵌套，name属性标记锚点 --><a name="nameVal">元素内容</a>


    9.列表标签（ol，ul，dl）

    用于标记内容相关、结构相似和样式相近的系列内容

    ①ol有序列表

    标记有顺序要求的系列内容，有重要程度和优先级之分

    构成标签，ol，li；

    ol表示有序列表域，li列表项，是容器级标签；

    嵌套关系，ol>li；

    li不能脱离ol独立存在；

    语法实例：

    <!-- 有序列表 --> <ol> <li>列表项1</li> <li>列表项2</li> ...... <li>列表项N</li> </ol>


    ②ul无序列表

    标记没有明确顺序要求的系列内容，无重要程度和优先级之分。




    语法实例：

    <!-- 无序列表 --> <ul> <li>列表项1</li> <li>列表项2</li> ...... <li>列表项N</li> </ul>


    ③定义列表

    标记有标题和解释项的系列内容

    构成标签：

    语法实例：

    <!-- 定义列表 --> <!-- dl定义列表域 --> <dl> <!-- 术语块1 --> <dt>术语1</dt> <dd>描述项1</dd> <dd>描述项2</dd> …… <dd>描述项N</dd> <!-- 术语块2 --> <dt>术语2</dt> <dd>描述项1</dd> <dd>描述项2</dd> …… <dd>描述项N</dd> …… <!-- 术语块N --> <dt>术语N</dt> <dd>描述项1</dd> <dd>描述项2</dd> …… <dd>描述项N</dd> </dl> <!-- 实际开发中，最好一组一组分开写，便于调试（dl dt dd） -->


    10.（常用）布局标签

    没有明确语义，仅用于布局的标签

    ①div(division)划分，区隔

    类别：双标签，容器级；

    常规用途：网页不同内容区块划分

    ②span 区段

    类别：双标签，容器级

    常规用途：不改变整体效果的局部内容微调




    11.表格制作标签

    ①制作标签一览

    Tips：分区标签，书写顺序颠倒没事，浏览器会自动按以上顺序加载。

    ②表格操作：单元格边距消除

    -border-collapse 边框塌陷（样式），语法：border-collapse:collapse

    -cellspacing = "0"（属性）

    ③表格操作：合并单元格

    -确定行数

    -确定每行单元格数

    -设置跨行跨列属性（rowspan，colspan）

    ④制作技巧：分区先，行列定，合并再。

    代码示例：

    <!-- 定义表格域 --> <table border="1" colspacing="0"> <!-- 表格标题 --> <caption>表格标题</caption> <!-- 表头区块 --> <thead> <!-- row 1 --> <tr> <th>单元格1</th> <th>单元格2</th> ... <th>单元格N</th> </tr> </thead> <!-- 表格主体 --> <tbody> <!-- row 1 --> <tr> <td>单元格1</td> <td>单元格2</td> ... <td>单元格N</td> </tr> <!-- row 2 --> <tr> <td>单元格1</td> <td>单元格2</td> ... <td>单元格N</td> </tr> ... <!-- row N --> <tr> <td>单元格1</td> <td>单元格2</td> ... <td>单元格N</td> </tr> </tbody> <!-- 表格页脚 --> <tfoot> <!-- row --> <tr> <td>单元格1</td> <td>单元格2</td> ... <td>单元格N</td> </tr> </tfoot> </table>


    12.表单标签

    ①作用：供用户操作交互，获取用户信息

    ②表单构成

    ③表单构成指示图

    （十）字符实体

    1.作用

    解决特殊字符的输入问题：①连续空格输入（空白折叠现象）；②与html标记语法相冲突的符号。

    字符实体书写手册：点击查阅

    2.语法规律

    ①&字符实体名称

    ②&字符实体编号

    3.常用字符实体：




    二、CSS基础（样式层）——美化网页结构

    （一）CSS概述

    CSS，全称“Cascading Style Sheets“，层叠样式表，用来美化修饰网页界面的技术，用以解决HTML文本格式化标签带来的代码臃肿，实现了结构与样式的分离。

    有CSS的拉勾网
    没有CSS的拉勾网

    （二）发展过程（了解即可）

    （三）CSS组成

    1.加载特性

    ①层叠性

    多个选择器同时选中一个标签并为其设置了样式，浏览器只会加载一个，层层叠加覆盖掉其他的样式，CSS在浏览器中的这种加载渲染特性，被称为“层叠性”。

    ②继承性

    子代或后代标签，本身没有添加某些样式，却具备父级或祖先级标签某些样式效果，CSS样式在浏览器中的这种加载渲染特性，被称为“继承性”。

    -可继承的样式类型：文本相关样式（点击链接，上方可见，文本属性；字体属性）

    -应用：合并同样式，减少代码量，加快渲染和浏览器响应。




    2.样式

    ①语法规范

    selector｛styleAttributeName：val；……｝


    ②书写位置

    主要解决这么一个问题，如何html文件中引入css样式？美化我们的html界面。根据书写位置的不同，共分为以下四种：

    -内联式（也叫“行内样式”）

    写在标签上的style属性中，适用于个别标签局部样式调整。

    语法：

    <tagName style="styleAttributeName: val;"></tagName>缺点：

    让标签结构繁重，不利解读

    不同元素，相同样式，增加代码量，加载慢

    没有实现结构样式脱离

    代码实例：

    <div style="color: black;"></div>-内嵌式

    写在html文件中，使用style标签，嵌套在head标签内部的文件内文本样式。适用于给某个HTML文件对应的网页界面设置少量独有样式。

    语法：

    <head> ...... <style> selector{ styleAttributeName: Val; ...... } </style> ......</head>优点：

    实现了文件内结构与样式的分离

    多标签同代码设置，代码量减少

    缺点：

    没有实现结构与样式文件分离

    html内样式没法共享给其他html

    代码太多，影响html结构阅读

    代码实例：

    <head> ...... <style> .style{ width: 1000px; height: 1000px; } </style> ......</head>-外联式

    样式书写在单独的. css文件中，通过link标签链接到需要的html文件中的独立文件样式。适用于给多个HTML文件对应的网页界面设置公共样式。

    语法：css文件 to HTML文件

    <head> ...... <link rel="stylesheet" href="url" type="text/css" /> ......</head>rel即relationship，表示与HTML文件关系

    href指定css文件路径

    type指明文件类型，告诉浏览器，用css标准解析（可省略）

    优点：

    结构与样式以文件形式的完全分离

    设置公共样式，减少代码量

    一个样式表，控制多张页面，减少工作量

    公共样式，独立样式分层

    代码实例：

    <head> <link rel="stylesheet" type="text/css" href="/c5.css"></head>-导入式

    在css文件中导入其他css文件

    语法：css文件 to css文件

    @import url(路径)代码实例：

    @import url("test.css")


    ③CSS注释

    -单行注释：

    //注释内容-多行注释 ：

    /*注释内容row1注释内容row2...注释内容rowN*/


    ④样式版本

    -开发版本

    有利于开发者阅读和调试

    // 展开式selector｛styleAttributeName：Val；……｝-发布版本

    有利于减少代码体积，提高加载渲染速率

    //压缩式selector｛styleAttributeName：Val；……｝


    ⑤常用样式属性

    Tips：

    -浏览器默认字号：谷歌16px

    -浏览器最小加载字号：谷歌8px，IE1px

    -实际开发推荐字号：12px（使用偶数，奇数老版本IE有bug，实际开发看设计图）

    -多字体同时设置：

    font-family: PingFangSC-Regular, Verdana, Arial, '微软雅黑','宋体';-多字体渲染机制：根据书写先后顺序渲染，优先渲染第一个字体支持的字符，渲染不了，交给第二个。

    -实际开发建议：浏览器加载的是客户端字体，如果客户端没有，该字体将加载失败，所以。开发人员必须设置一个通用字体，作为保险。建议将英文字体写在最前，避免被中文字体渲染。如英文字体A，英文备用字体，中文字体A，中文备用字体。




    ⑥CSS选择器

    -作用：选定元素，添加样式

    -类型：




    未完待续......

    关键词：基础

    推荐文章

    新闻资讯

    整合营销 网络营销 网络推广 信息时代 建站知识 网站运营 电子商务 营销百科 公司新闻 行业动态 品牌营销

    推荐资讯

    74
    73
    25
    news

    微信公众号

    版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

    为了最佳展示效果，本站不支持IE9及以下版本的浏览器，建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
    关闭