Web前端1~20

Quyllu

已于 2022-11-05 16:38:34 修改

阅读量357

点赞数 1

文章标签： html 前端 css

于 2022-10-21 21:36:07 首次发布

本文链接：https://blog.csdn.net/m0_74344806/article/details/127454387

版权

文章目录

一、HTML、CSS系列之导学
- 课程划分为四大部分及主要内容
二、什么是HTML、CSS？
三、宇宙第一编辑器VS Code
- - - 编辑器VS Code的基本使用
    - - 快捷键的使用
四、chrome浏览器
- - <市场上常见的浏览器>
  - <了解五大浏览器>
五、深入了解网站开发
- - - 各个岗位及职责
    - ***JavaScript与HTML、CSS之间的关系***
六、web前端三大核心技术
七、HTML基本结构与属性
- - HTML ：超文本标记语言
  - 练习
- HTML常见标签![在这里插入图片描述](https://img-blog.csdnimg.cn/88b5d670ae9145ebb23ac5c60c092836.png)
- - 练习
八、HTML初始代码
- - - 快捷键
九、HTML中的注释
- - 练习
十、HTML语义化
十一、标题与段落
- h标签：标题
- p标签：段落
- - 练习
十二、文本修饰标签
- - 练习
十三、图片标签与图片属性
- - 练习
十四、引入文件的地址路径
- 相对路径
- 绝对路径
十五、跳转链接
十六、跳转锚点
- - 练习1、#号 + id属性
  - 练习2、#号 + name属性
十七、特殊符号
十八、列表标签
- 无序列表
- - 练习
- 有序列表
- - 练习
- 定义列表
- - 练习
- 嵌套列表
- - 练习

一、HTML、CSS系列之导学

课程划分为四大部分及主要内容

1、HTML+CSS系列教程①之拨云见日

HTML CSS 切图流程 PC企业站布局 PC游戏站布局

2、HTML+CSS系列教程②之溯求本源

扩展HTML 扩展CSS HTML5新语法 CSS3新语法兼容与hack

3、HTML+CSS系列教程③之风生水起

弹性布局网格布局移动端布局响应式布局 Bootstrap

4、HTML+CSS系列教程④之巧夺天工

预编译CSS postcss CSS架构高级功能 CSS与JS交互

二、什么是HTML、CSS？

1、它们是两种编程语言，一般情况下需要配合使用，是作为网站开发的基础语言。
2、浏览器把代码解析后的样子就是我们看到的网站，通过鼠标右键选择查看网页源代码。
3、一个网站是由N多个网页组成的。

三、宇宙第一编辑器VS Code

编辑器VS Code的基本使用

设置：文件->首选项->设置（大小、是否换行我认得wrap）
创建文件、创建文件夹、重命名、删除、搜索

快捷键的使用

                ctrl + s :保存
                ctrl + a :全选
                ctrl + x、ctrl + c、ctrl + v ：剪贴、复制、粘贴
                ctrl + z、ctrl + y :撤销、前进
                shift + end ：从头选中一行
                shift + home :从尾部选中一行
                shift +alt +↓ ：快速复制一行
                alt + ↑或↓ ：快速移动一行
                tab :向后缩进
                tab + shift :向前缩进
                多光标 ： alt + 鼠标左键
                ctrl + d : 选择相同元素的下一个

四、chrome浏览器

谷歌浏览器（Google Chrome）是一款可让您更快速、轻松且安全地使用网络的浏览器。

<市场上常见的浏览器>

谷歌浏览器（chrome浏览器）、360安全浏览器、QQ浏览器、火狐浏览器（Firefox浏览器）、微软浏览器、搜狗高速浏览器、IE浏览器、360极速浏览器、世界之窗浏览器（Opera浏览器）、猎豹浏览器(Safari浏览器)

<了解五大浏览器>

1、IE浏览器：由微软公司推出。2015年3月微软确认将放弃IE品牌。2022年6月15日，微软停止支持Internet Explorer。浏览器的最新可用版本IE11。
2、Chrome浏览器：由美国Google公司开发。软件的beta测试版本在2008年9月2日发布，提供50种语言版本。受2020年新冠影响，谷歌于2020年3月暂停向Chrome浏览器系统增加新功能，以保证软件尽可能平稳运行。2022年2月7日讯，Google再次修改Chrome浏览器图标。
3、Firefox浏览器：由Mozilla开发的自由及开放源代码的网页浏览器。英国防病毒公司Sophos在2015年的调查数据显示，Firefox连续三年成为互联网用户最受信赖的浏览器。
4、Safari浏览器：由苹果公司开发。Safari浏览器在2003年1月7日首度发行测试版。Windows版本的首个测试版在2007年6月11日推出，支持Windows XP、Windows Vista和Windows7，并在2008年3月18日推出正式版，但苹果已于2012年7月25日停止开发Windows版的Safari浏览器。
5、Opera浏览器：是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器，是跨平台浏览器，可以在Windows、Mac、Linux三个操作系统平台上运行。Opera浏览器创始于1995年4月。

五、深入了解网站开发

一个大型网站的开发，需要团队的配合，各个岗位不可或缺。

各个岗位及职责

1、UI设计师 ：设计稿
2、web前端开发工程师（H5开发）
设计稿 -> 代码
数据库里的数据 -> 显示到页面
HTML +CSS
HTML ：结构
CSS : 样式
3、web后端开发工程师

JavaScript与HTML、CSS之间的关系

HTML——超文本标记语言，HTML是一门描述性语言。
CSS——层叠样式表，是用来控制网页外观的一种技术。
JavaStript——是一种嵌入到HTML页面中的语言，由浏览器一边解释一边执行。
我们用一种比喻来说明：把制作网页比作盖房子。HTML就相当于钢筋水泥做出来的结构。CSS比作粉刷、贴瓷砖等装修。JavaScript就好比给房子通电，你按一下灯泡的开关，灯就亮了。
所以说：HTML用于控制网页的结构，CSS用于控制网页的样式，而JavaScript控制着网页的行为。

六、web前端三大核心技术

HTML ：结构

CSS : 样式

JavaScript ：行为

七、HTML基本结构与属性

HTML ：超文本标记语言

1、超文本：文本内容 + 非文本语言（图片、视频、音频等）
2、标记：<单词>
3、语言：编程语言

标记也叫做标签：

<header></header>

   <footer></footer>

 写法分成两种：
        单标签   <header>
        双标签  <header></header>

创建标签的快捷键：单词 + tab -> <单词>
标签是可以上下排列，也可以组合嵌套。

练习

<header>
    hello world
    <div>
        aaa
        <div>bbb</div>
        <div>bbb</div>
        <div>bbb</div>
    </div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
</header>

<footer>hi HTML</footer>

HTML常见标签

标签的属性：修饰标签，设置当前标签的一些功能。
< 标签属性 = “ 值 ” 属性2 = “ 值2 ” >

练习

 <header title="hello">hello world</header>

<footer title="hi">hi HTML</footer>

八、HTML初始代码

每一个.html文件都需要添加的代码叫做初始代码，要符合html文件的规范写法。

快捷键

! + tab键：快速地创建html的初始代码
### 练习

 <!DOCTYPE html>     <!-- 文档声明 ：告诉浏览器这是一个html文件 -->
<html lang="en">    <!-- html文件的最外层标签：包裹着所有html标签代码 -->
       <!-- lang="en"表示是一个英文网站，lang="zh-CN"表示一个中文网站 -->
<head>
    <meta charset="UTF-8">    <!-- 元信息：是编写网页中的一些辅助信息-->
                <!-- charset="UTF-8"国际编码，让网页不出现乱码的情况 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>    <!-- 设置网页的标题 -->
</head>
<body>
    <!-- 显示网页内容的区域 -->
</body>
</html>

九、HTML中的注释

写法： 在浏览器中看不到，只能在代码中看到注释的内容。

意义：
1、把暂时不用的代码注释起来，方便以后使用。
2、对开发人员进行提示

快捷添加注释和删除注释：
1、ctrl + /
2、shift + alt + a

练习

<!-- hello world -->

<!-- 登录 -->
...
<!-- 列表 -->
...
<!-- 留言信息 -->
...

十、HTML语义化

所谓HTML语义化指的是根据网页中内容的结构，选择适合的HTML标签进行编写。
好处：
1、在没有CSS的情况下，页面也能呈现出很好的内容结构。
2、有利于SEO，让搜索引擎爬虫更好的理解网页。
3、方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
4、便于团队开发与维护。

十一、标题与段落

h标签：标题

<h1></h1> ... <h6></h6>
在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签。
h5、h6标签在网页中不经常使用。

p标签：段落

<p></p>

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <h1>标题</h1>
    <h2>标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <h5>标题</h5>
    <h6>标题</h6>
    <p>这是一个段落</p> -->
    <h1>个人简介</h1>
    <h2>基本信息</h2>
    <p>......</p>
    <p>......</p>
    <h2>工作经历</h2>
    <p>......</p>
    <p>......</p>
    <h2>个人技能</h2>
    <p>......</p>
    <p>......</p>
    <h2>自我评价</h2>
    <p>......</p>
</body>
</html>

十二、文本修饰标签

<strong></strong>：表示强调，会对文本进行加粗

<strong>这是一段需要强调的文本</strong>

<em></em>：表示强调，会对文本进行斜体

 <em>这是一段需要强调的文本</em>

（strong的强调性更强，em的强调性稍弱）

<sub></sub> : 下标

H <sub>2</sub>O

<sup></sup> : 上标

a <sup>2</sup> + b<sup>2</sup> = c <sup>2</sup>

<del></del>：删除文本
<ins></ins>：插入文本

促销 : 原价<del>300</del>,现价<ins>100</ins>

（一般情况下，删除文本都是和插入文本配合使用的）

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <strong>这是一段需要强调的文本</strong> 
        <em>这是一段需要强调的文本</em>
    </p>
    <p>
        a <sup>2</sup> + b<sup>2</sup> = c <sup>2</sup> H <sub>2</sub>O
    </p>
    <p>
        促销 : 原价<del>300</del>,现价<ins>100</ins>
    </p>
    <p>
        北京著名的高档百货店——<em>赛特购物中心</em>即将闭店。昨天,赛特购物中心总台服务人员表示<strong>“如果手里有购物卡请尽快到店里消费”</strong>。据这位服务人员介绍,目前赛特购物中心正在进行清仓大甩卖。<del>特价电视原价3600元</del>,<ins>现清仓价只需1300元</ins>。
    </p>
</body>
</html>

十三、图片标签与图片属性

<img>（单标签）：图片
src：引入图片的地址
alt：当图片出现问题的时候，可以显示一段友好的提示文字
title：提示信息
width、height：图片的大小

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>第一个段落</p>
    <img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fcms-bucket.ws.126.net%2F2022%2F1019%2F4aa8937fj00rjz62v002uc000rs00ijc.jpg&thumbnail=660x2147483647&quality=80&type=jpg" alt="10月16日,在江苏省连云港市灌云县开山岛,王仕花(前)、轮值民兵和江苏电力开山岛党员服务队队员在岛上巡逻。新华社记者 李博 摄"title="这是一张图片的提示信息"width="660"height="441">
    <p>第二个段落</p>
</body>
</html>

十四、引入文件的地址路径

相对路径

. 在路径中表示当前路径
. . 在路径中表示上一级路径

    <!-- <img src="./snow.jpeg"alt=""> -->
    <!-- <img src="./img/snow.jpeg" alt=""> -->
    <!-- <img src="./img/view/snow.jpeg" alt=""> -->
    <!-- <img src="../img/view/snow.jpeg" alt=""> -->

绝对路径

D:/img/view/snow.jpeg

<!-- <img src="D:/img/view/snow.jpeg" alt=""> -->
    <!-- <img src="/img/view/snow.jpeg" alt=""> -->

十五、跳转链接

<a></a>双标签
1、href属性：链接的地址

 <a href="http://www.baidu.com">访问百度</a>
    <a href="http://www.qfedu.com">
        <img src="./img/view/snow.jpeg" alt="">
    </a>

2、target属性：可以改变链接打开的方式，默认情况下：在当前页面打开 _self ，
新窗口打开 _blank

 <a href="http://www.baidu.com"target="_blank">访问百度</a>

<base>单标签：作用就是改变链接的默认行为

<base target="_blank">

十六、跳转锚点

两种做法
1、#号 + id属性
2、#号 + name属性（注意name属性加给的是a标签）

练习1、#号 + id属性

   <a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#javascript">Javascript</a>

    <h2 id="html">HTML超文本标记语言</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <h2 id="css">CSS层叠样式表</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <h2 id="javascript">JS脚本</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>

练习2、#号 + name属性

  <a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#javascript">Javascript</a>

    <a name="html"></a>
    <h2>HTML超文本标记语言</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <a name="css"></a>
    <h2>CSS层叠样式表</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <a name="javascript"></a>
    <h2>JS脚本</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>

十七、特殊符号

1、解决冲突（左右尖括号、添加多个空格）
2、
在这里插入图片描述

&lt;html&gt;

hello&nbsp;world

十八、列表标签

无序列表

<ul></ul>、<li></li>：列表的最外层容器、列表项
注：ul和li必须是组合出现的，他们之间是不能有其他标签的,符合嵌套的规范

 <ul>
        <li>第一项</li>
        <li>第二项</li>
 </ul>

type属性：改变前面标记的样式（一般都是用CSS去控制）

  <ul type="">
        <li>第一项</li>
        <li>第二项</li>
  </ul>

在这里插入图片描述

练习

 <ul>
        <li><a href="#">内容</a></li>
        <li><a href="#">内容</a></li>
        <li><a href="#">内容</a></li>
        <li><a href="#">内容</a></li>
        <li><a href="#">内容</a></li>
    </ul>

有序列表

<ol></ol>、<li></li>：列表的最外层容器、列表项
注：ol和li必须是组合出现的，他们之间是不能有其他标签的；
有序列表用的非常少，无序列表可以去代替有序列表。
type属性：改变前面标记的样式（一般都是用CSS去控制）

 <ol type="a">
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>

练习

<ol>
    <li><a href="#">都说</a></li>
    <li><a href="#">我的祖国</a></li>
    <li><a href="#">夜空中最亮的星</a></li>
    <li><a href="#">父亲</a></li>
    <li><a href="#">青花瓷</a></li>
</ol>

定义列表

<dl></dl>：定义列表
<dt></dt>：定义专业术语或名词
<dd></dd>：对名词进行解释和描述
列表项需要添加标题和对标题进行描述的内容

练习

<dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表</dd>
        <dt>Javascript</dt>
        <dd>网页脚本语言</dd>
    </dl>

嵌套列表

列表之间可以互相嵌套，形成多层级列表。

练习

 <h1>好美味小吃</h1>
    <ul>
        <li>小吃类
            <ul>
                <li>煮粉干</li>
                <li>拌青菜</li>
                <li>蛋炒饭</li>
                <li>煎蛋</li>
                <li>米饭</li>
            </ul>
        </li>
        <li>卤味类
            <ul>
               <li>面筋</li>
               <li>牛肚</li>
               <li>猪耳朵</li>
               <li>猪头肉</li>
               <li>大肠</li>
               <li>鱿鱼</li>
            </ul>
        </li>
        <li>套餐类
            <ul>
               <li>卤面筋饭</li>
               <li>猪肉肉饭</li>
               <li>猪耳朵饭</li>
               <li>卤猪脚饭</li>
               <li>卤猪舌头饭</li>
            </ul>
        </li>
        <li>炖罐类
            <ul>
               <li>猪蹄黄豆</li>
               <li>猪肚莲子</li>
               <li>猪心枸杞</li>
               <li>羊肉枸杞</li>
               <li>牛肉枸杞</li>
            </ul>
        </li>
    </ul>
    <em>亲,20元以上可送餐哦!!</em>