前言

根据我在上一个课程《大前端学习(HTML+CSS)的学习体会,这次的课程是极具框架化的课程,非常适合学习。

新知

  • HTML:Hyper text Markup language
  • CSS:Cascade Style Sheet
  • 元素(element)——标签(label)——属性(attribute)——值(value)
  • hover 悬停状态选择器
  • HTML 的重点在各种语义;CSS 的重点在于选择器(只要能选到就好了)和样式设计(会修改成品就好了)

01-学习Web开发有前途吗?

  • 薪资不低
  • 海量成熟框架等你来战
  • 全栈工程师,前端没有秘密

02-万维网的发展历史

  • 1989年,WWW (万维网、World Wide Web)诞生。蒂姆.博纳斯.李(Tim Bernes Lee) 发明了HTML,发明了万维网,创立了W3C(W3 consortium)
  • 1993年,图片浏览器诞生。马克.安德森(Marc Andreessen)发明了 Mosaic ,它是第一个可以在文字中嵌入图片的浏览器。不止图片,超文字形式的"链接"能够链接到其它文件,音频、视频等等。
  • 1994年,网景浏览器发布。网景(Netspace)公司成立,第一家尝试利用万维网的公司,由吉姆·克拉克邀请马克·安德森共同创立。第一个产品是网页浏览器 —— Netscape Navigator(Mosaic Killer),发行于1994年10月13日。
  • 1994年,万维网联盟(W3C)成立,制定新标准来促进业界成员间的兼容性和协议。
  • 1995年,第一次浏览器大战,网景浏览器与IE。
  • 1998年,网景在浏览器大战中失败,选择开源,创造了 Mozilla Application Suite,派生出 Phoenix.
  • 2003年,Safari 诞生。
  • 2004年,Firefox 诞生。它的前身是Phoenix.
  • 2008年,Chrome 浏览器诞生,时间证明,它是绝对的王者,2020年 Edge 使用了 chromium 内核。

03-这个系列我们打算怎么玩?

  • 网页源码:demo.fishc.com
  • 参考文档:HTML5速查宝典

    • 服务器错误:5XX
    • 客户端错误:4XX
    • 重定向:3XX
    • 成功:2XX
    • 信息:1XX
  • 参考文档很重要,可以利用碎片化时间把网站的基础标签全看一遍!!

    • 元素;元素的名称;元素的标签;元素的内容。例如:HTML元素<html></html>标签<html><head></head><body></body></html>
    • head 元素可包含标签:<base>, <title>,<meta>,<link>, <script>, <style>,
    • img 标签可包含属性(attribute):src and alt
    • a 标签可包含属性:href target
  • 扩展阅读:不太重要但需要看一看【看完了】
  • 课后作业:要做配套练习,学了不练等于不学【重要,需要好好做做】

04-从一段鬼畜的密文说起(head 内的各种标签)

  • 标题:<title>这就是一个标题</title>
  • 编码:<meta charset="UTF-8">
  • 自适应:<meta name="viewport" content="width=device-width,initial-scale=1.0">
  • 关键词:<meta name="key" content="keys,就是关键词了,方便爬虫索引">
  • 描述:<meta name="description" content="关于meta元素的各种说明">
  • 作者:<meta name="aothor" content="vchv">
  • 自动跳转页面:<meta http-equiv="refresh" content="5;https://vchv.ltd">
  • 虚元素(void element):指的是那些只能使用一个标签表示的元素,比如 img 元素就是一个例子(img 元素只有开始标签,但并没有结束标签)。除了 img 元素,还有 meta 和 base 也属于虚元素。
  • 空元素:元素并非一定要有内容,当元素没有内容的时候,它就叫空元素(一个名词而已,大家不必记怀)。比如下面代码中的 <p></p> 就是空元素。由于空元素中并无内容,所以其可以更简洁地使用自闭合标签表示 <p/>。

05-一只特立独行的猪(style 标签)

  • style 元素:<style> </style>标签用于为 HTML 文档定义样式信息。
  • style 元素可以出现在 HTML 文档中的各个部分,一个文档可以包含多个 style 元素。

06-相濡以沫不如相“见”于江湖(链接外部 CSS)

  • 将写在HTML文件里的 style 语句抽取出来,独立写成一个文件,即 css 样式表。
  • link 标签: <link rel="stylesheet" type="text/css" href="css/styleSample.css" >

    • 关联样式表
    • 关联网站icon
    • 指定相对URL的解析基准
  • link 元素中,rel 属性是必不可少的,它说明了当前文档与被链接资源的关系。如果没有 rel 属性,浏览器就不知道如何处理此 link 元素。
  • base 元素会影响当前文档中的所有相对路径。

07-为网页注入灵魂(Script 标签)

  • JavaScript 和 Java 的关系:就像印度和印度尼西亚;雷锋和雷峰塔;周杰和周杰伦;张三和张三丰……
  • JavaScript 是 C 和 Self language 混合的产物
  • <script></script> 标签用于在 HTML 文档中加入脚本(例如 JavaScript)
  • 引用标签和内嵌标签要注意,<>="" 这些写法
  • HTML 解析(HTML parsing);defer 延迟执行脚本;async 异步执行脚本;
  • <noscript> 标签用来向不支持 JavaScript 的浏览器显示一些替代内容。

08-前端工程师的自我修养(注释)

  • 注释的作用:注释或者注释掉不想被执行的代码
  • 对代码注释的理解
  • HTML 注释:<!-- 此处写注释 -->
  • CSS 注释:/* 此处写注释 */
  • JavaScript 注释:// 单行的注释 /* 多行的注释 */

09-相拥与独行(块级元素和行内元素)

  • 块级元素:讲究排场;行内元素:勤俭节约。
  • 一般情况下,行内元素只能包含数据和其他行内元素;而块级元素可以包含行内元素和其他块级元素。
  • 这种结构上的包含继承区别可以使块级元素创建比行内元素更“大型”的结构。
  • 为什么要有块级元素和行内元素之分呢?

    • HTML 要求浏览器将连续的空白字符合并为一个空格。
    • 这样可以将 HTML 文档的布局 和 文档自身内容的布局区分开来。

10-所见即所得

  • <pre></pre> 标签 用于定义预格式化的文本

    • 预格式化:保留文本在源代码中的格式,使得页面中显示的和源代码中的效果完全一致。
    • 呈现为 等宽字体(Monospaced Font),对于代码来说,等宽字体要好一点,比例字体就是 w 要比 l 胖很多。
    • 好看的字体推荐
  • HTML 字符实体 (character entities):类似 <> 一些特殊含义的符号,不可以直接显示,如果要显示,就需要使用“字符实体”。Entities 大全
  • 语义化:要求你使用恰当语义的 HTML 元素,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容。

    • code 元素 专门用来显示代码的
    • var :定义程序的变量
    • kbd:keyboard 定义用户的输入
    • samp:定义程序的输出

11-引用大作战(格式化标签)

  • q 元素 简单的行内引用:q <q>这是一个引用</q>
  • blockquote 元素 块状引用:<blockquote>这是一个

    块状引用。</blockquote>
  • cite 元素:书籍、歌曲、电视等作品的标题<cite>《简爱》</cite>是一本很好的书
  • abbr 元素:abbreviation <abbr title="这就是我的全称">缩写</abbr>
  • dfn 元素:define 表现定义中的术语。<dfn>HTML</dfn>就是一个术语。

    • 术语又称技术名词,是在特定专业领域中一般概念的词语指称,一个术语表示一个概念。
  • address 元素:定义文档或文章的作者/拥有者的联系信息。
  • ruby rt rp 元素:<ruby>注<rp>(</rp><rt>zhù</rt><rp>)</rp></ruby><ruby>音<rt>yīn</rt></ruby>。

    • rt 元素用来标记注音符号,rp 元素用来标记当浏览器不支持时所显示的内容。
  • bdo 元素:ltr left to right ;rtl right to left

12-格式化大比拼(格式化标签)

  • strong 元素:<strong>表示强调</strong>, 语义:表强调,eg:加粗

    • b 元素(bolder):只是变粗了而已,无语义,建议使用 CSS 样式来实现效果而非b。
  • em(emphasize) 元素:<em>表示强调</em>,语义:表强调,eg:斜体

    • i 元素(italic):只是变斜了而已,无语义,建议使用 CSS 样式来实现效果而非i。
  • del 元素(delete):删除线 eg:就是这个样子啦
  • ins 元素(insert):下横线 eg:<ins>就是这个样子啦</ins>
  • s 元素:样式为删除线,<s>语义:表示那些不正确的内容</s> eg:<s>这就是不正确的内容</s>
  • u 元素:样式为下横线,<u>语义:表示拼写错误的单词或者汉语中的专有名词</u>eg:<u>helol 你拼错了</u>
  • mark 元素:<mark>样式为荧光笔画起来那个样子</mark> eg:<mark>我被划出来了-_-||</mark>
  • sup 元素:上标<sup>1</sup> eg:请看右上角1
  • sub 元素:下标<sub>2</sub>eg:H2O
  • small 元素:让内容变小<small>本活动最终解释权归XXX所有</small>eg:本活动最终解释权归XXX所有

13-被安排的明明白白(列表)

  • 无序列表(Unordered List):<ul><li>1</li><li>2</li></ul>
  • 有序列表(Ordered List):<ol><li>1</li><li>2</li></ol>
  • 列表嵌套:列表中嵌套列表
  • 定义列表:
  • 两个常用的 CSS 属性

    • list-style-type
    • list-style-image

14、15-数据就应该整整齐齐(表格)

  • table element:按行来进行编排表格
  • tr element(table row):一行
  • th element(table header cell):标题,默认加粗、居中
  • td element(table data cell):内容

    • colspan attribute :横跨几列(column)
    • rowspan attribute:竖跨几行(row)
  • thead element:定义表头
  • tbody element:定义主体
  • tfoot element:定义表尾(tips:现在的英文字体叫做等比字体,因为 f b 的宽度不同,所以没有对齐)
  • colgroup element:
  • 常用的 CSS 属性(style 标签中属性的值):

    • border:边框
    • padding:内边距
    • background:背景`
<!DOCTYPE html>

<html>

    <head>

        <title>一个表格元素的练习</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width,initial-scale=1.0">

        <meta name="author" content="vchv">

        <style>

            table {

                border: 1px solid red;

                border-collapse: collapse;

            }

            <!-->表头中的标题元素样式<-->

            thead th {

                background:grey;

                color:white;

            }

 

            tbody th {

                background: lightgrey;

                color:white;

            }

 

            th {

                border: 1px solid blue;

                padding: 10px;

                background: grey;

                color: purple;

            }

 

            td {

                border: 1px solid yellow;

                padding: 5px;

            }

 

            caption {

                padding: 15px;

            }

 

        </style>

    </head>

    <body>

        <table>

        <!-->将第一列的背景颜色设置为红色<-->

        <!-->将第2,3,4列的背景颜色设置为绿色<-->

        <!-->内联样式<-->

 

        <colgroup>

            <col style="background:red">

            <col span="3" style="background:green">

        </colgroup>

 

            <caption>不同人类的不同尺寸</caption>

 

            <thead>

                <tr>

                    <th>称号</th>

                    <th>姓名</th>

                    <th>年龄</th>

                    <th>长度</th>

                </tr>

            </thead>

 

            <tbody>

                <tr>

                    <th>天选之人</th>

                    <td>vchv</td>

                    <td>18</td>

                    <td>18</td>

                </tr>

 

                <tr>

                    <th>真龙之神</th>

                    <td>zhahu</td>

                    <td>28</td>

                    <td>30</td>

                </tr>

 

                <tr>

                    <th>元始天尊</th>

                    <td>不可思议之人</td>

                    <td>38</td>

                    <td>600000000</td>

                </tr>

            </tbody>

 

            <tfoot>

                <tr>

                    <td colspan="4">以上纯属个人的一点不成熟的小想法,仅供娱乐。</td><!-->横跨4列<-->

                </tr>

            </tfoot>

        </table>

    </body>

 

</html>

16-你说hello 我说hei(表单)

17-一二三木头人(表单)

31-鸟枪换大炮(VScode)

  • Vscode 的下载安装,设置中文语言:ctrl + shift + P 输入 config
  • 安装 live server 插件,实时显示网页
  • emmet,ul>li*5 批量生成标签 Emmet 语法规则

32-男人的加油站女人的美容院(CSS)

  • CSS 语法:P {color:red; font-size:14px}
  • CSS 语法
  • 如何在网页中插入 CSS 样式表?

    1. 内联样式(Inline Style):灵活性强,但是很麻烦,每个位置都要写。
    2. 内部样式表(Internal Style Sheet):还是麻烦,如果一个网站有1000个页面,还是要写很多遍。
    3. 外部样式表(External Style Sheet):link 外部样式表
  • CSS 没有限制空格的使用;CSS对字母大小写是不敏感的,但对特定选择器例外。
  • 样式的优先级:内联样式 > 内部样式表 > 外部样式表

33-朋友,你会 Ollie 吗?(选择器)

  • HTML 是骨架;CSS 是血肉;选择器 连接 HTML 和 CSS !
  • 选择器 —> 精准选定元素。
  • CSS 选择器:

    1. 基本选择器
    2. 复合选择器
    3. 伪类选择器
    4. 伪元素选择器(Pseudo-elements Selector)
    5. 属性选择器

基本选择器:

  • 通用选择器(Universal Selector):* 选择所有元素
  • 元素选择器:就是标题 H ,段落 P , span 等等
  • 类选择器:基本选择器的一个元素 class="slogn" .slogn {}
  • id 选择器(ID Selector):值是唯一的,指向单个元素 ID="ol" #ol

复合选择器(还能这么玩)

  • HTML 元素结构图
  • 交集选择器(Intersection Selector):元素选择器.类选择器 元素选择器#ID选择器
  • 并集选择器(Union Selector):选择器1, selector2, selector3
  • 后代(包含)选择器(Descendant Selector):Selector1 selector2 selector3
  • 子元素选择器(Child Selector):直接子元素 Selector1 > Selector2
  • 相邻兄弟选择器(Adjacent Sibling Selector):.slogan + p {}
  • 通用兄弟选择器(General Sibling Selector):同一个层级就好 .slogan~p

伪元素选择器(初学CSS的噩梦1)

  • 伪元素选择器 相当于 在不创建元素的情况下实现了选择元素的功能。
  • ::first-line 只影响块级元素
  • ::first-letter
  • ::before
  • ::after
  • ::selection

伪类选择器(初学CSS的噩梦2)

  • 伪类选择器 就相当于 在不创建 类 的情况下实现了类的功能。
  • Pseudo-classes Selector : 动态伪类选择器;UI伪类选择器;结构伪类选择器;其他伪类选择器

动态伪类选择器(Dynamic Pseudo-classes Selectors)—> 善变的 a 元素

1. `:link`  链接未被访问

2. `:visited`  链接被访问过之后

3. `:hover` 鼠标悬停在链接上方时

4. `:active` 鼠标按下链接的那一刻,判断的依据是 鼠标的点击。

5. `:focus` 当元素获得焦点时

6. 前四位 必须按顺序来,也就是 love & hate

ui伪类选择器(初学CSS的噩梦3)

结构伪类选择器(初学CSS的噩梦5)

  • 父与子讲的是绝对的,而不是相对的。

其他伪类选择器(初学CSS的噩梦6)

  • 页面内锚点:#ID

41-金木水火土(属性选择器)

  • $
  • ^
  • *
  • ~
  • |

42-翩若惊鸿,婉若游龙(CSS的颜色表达)

  • CSS Color Expression
  • RGB
  • RGBA(alpha
  • ffffff

43-道可道,非常道(背景色)

44-边框、内边距、外边距

  • 所有的HTML元素都可以看成是盒子的模样。

看完了,还有吗?该死的老甲鱼不更新呀[○・`Д´・ ○]
一年更新15节!!!!

如果觉得我的文章对你有用,请随意赞赏