Web前段学习

BBsix666

已于 2022-10-28 15:57:35 修改

阅读量752

点赞数

文章标签：学习

于 2022-10-20 12:58:03 首次发布

本文链接：https://blog.csdn.net/BBsix666/article/details/127356580

版权

千锋教育Web前端教程

一、课程导学
二、什么是HTML和CSS
三、编辑器 VS Code
- 编辑器基本使用
四、chrome浏览器
五、深入了解网站开发
六、Web前端的三大核心技术
七、HTML基本结构与属性
八、HTML初始代码
九、HTML中的注释
十、HTML语义化
十一、标题与段落
十二、文本修饰标签
十三、图片标签与图片属性
十四、引入文件的地址路径
十五、跳转链接
十六、跳转锚点
十七、特殊符号
十八、无序列表
十九、有序列表
二十、定义列表
二十一、嵌套列表
二十二、表格标签
二十三、表格属性
二十四、表单标签
二十五、表单相关标签
二十六、表格表单组合使用
二十七、div与span
二十八、CSS语法格式
二十九、内联样式与内部样式
三十、外部样式及两种写法
三十一、CSS颜色表示法
三十二、背景样式
三十三、背景实现视觉差效果
三十四、边框样式
三十五、边框实现三角形
三十六、family字体类型
三十七、字体大小粗细样式

哔哩哔哩教程视频

一、课程导学

从2022年10月15日开始学习

记录成长

哔哩哔哩教程视频

二、什么是HTML和CSS

是做网站的编程语言。
一个网站由很多网页组成。网页 .html

三、编辑器 VS Code

VS Code，全称Visual Studio Code，来自微软，是一个开源的、基于Electron的轻量代码编辑器。
下载地址

安装语言包
open in browser、view in browser（方便打开网页）

编辑器基本使用

设置：文件—首选项—设置（文字大小、是否换行）
创建文件、创建文件夹、重命名和删除

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

四、chrome浏览器

谷歌浏览器（Google Chrome）
下载地址

五、深入了解网站开发

UI设计师：设计稿
web前端开发工程师（H5开发）

设计稿→代码
数据库里的数据→显示到页面
HTML +CSS
HTML : 结构
CSS : 样式

web后端开发工程师

六、Web前端的三大核心技术

HTML ：结构
CSS ：样式
JavaScript ：行为

七、HTML基本结构与属性

HTML ：超文本、标记、语言
超文本：文本内容、非文本内容（图片、视频、音频）
标记：<单词>
语言：编程语言
标记也叫作标签：

<header>
<footer>
写法分成两种：

单标签：<header>
双标签：<header></header>

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

HTML5标签元素周期表
在这里插入图片描述
标签的属性：来修饰标签的，设置当前标签的一些功能。

<标签属性=“值” 属性2=“值”>

八、HTML初始代码

每个HTML文件都有的代码，要符合HTML文件的规范写法。

！ + tab键：快速创建HTML初始代码

<!DOCTYPE html> → 文档声明 ： 告诉浏览器这是一个HTML文件
<html lang="en"> → HTML文件的最外层标签 ： 包裹着所有HTML标签代码 
<head>
<meta charset="UTF-8"> → 元信息 ： 编写网页中的一些赋值信息
<title>Document</title> → 设置网页的标题
>
></head>
><body>
> 显示网页内容的区域
> </body>
> </html>

<html lang=“en”> ：英文网站
<html lang=“zh-CN”> : 中文网站
charset=“UTF-8” : 国际编码，让网页不出现乱码情况

九、HTML中的注释

写法： <!-- 注释的内容 - ->
在浏览器中看不到，只能在代码中看到注释的内容。
意义：

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

快捷添加注释与删除注释：

ctrl + /
shift + alt + a

十、HTML语义化

所谓HTML语义化是指，根据网页中内容的结构，选择适合的HTML标签进行编辑。
好处：

在没有CSS的情况下，页面也能呈现出很好的内容结构。
有利于SEO，让搜索引擎爬虫更好的理解网页。
方便其他设备解析（如屏幕阅读器，盲人阅读器等）。
便于团队开发与维护。

十一、标题与段落

标题 → 双标签：<h1> </h1> … <h6> </h6>
在一个网页中，h1标题最重要，并且一个.html文件只能有一个h1标签。
段落 → 双标签：<p></p>

十二、文本修饰标签

强调 → 双标签：

<strong></strong> 加粗
<em></em> 斜体
<sub></sub> 下标
<sup></sup> 上标

H<sub>2</sub>O 水分子

<del></del> 删除文本（删除线）
<ins></ins> 添加文本（下划线）

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

img → 单标签

src : 引入图片的地址。
alt : 当图片出现问题时，可以显示一段友好的提示文字。
title : 提示信息。
width 、height : 图片的大小。

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

相对路径：

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

在这里插入图片描述
绝对路径:

十五、跳转链接

a → 双标签 : <a></a>

href属性 : 链接的地址。
target属性 : 可以改变链接打开的方式，默认情况下，在当前页面打开_self，新窗口打开_blank。

base → 单标签

打开列表页呈现一张图片

十六、跳转锚点

方法一：#号 + id属性
方法二：#号 + name属性

十七、特殊符号

在这里插入图片描述
网页呈现效果：<html>

十八、无序列表

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

（错误）

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

十九、有序列表

<ol> 、<li> ：列表的最外层容器、列表项。
注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。

二十、定义列表

<dl> ：定义列表
<dt> ：定义专业术语过名词
<dd> ：对名词进行解释和描述

（网页效果）

二十一、嵌套列表

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

<ul>
    <li>辽宁省
        <ul>
            <li>沈阳</li>
            <li>大连</li>
            <li>丹东</li>
        </ul>
    </li>
    <li>
        山东省
        <ul>
            <li>济南</li>
            <li>青岛</li>
            <li>烟台</li>
        </ul>
    </li>
</ul>

<dl>
    <dt>中国</dt>
    <dd>
        <dl>
            <dt>辽宁省</dt>
            <dd>沈阳</dd>
            <dd>大连</dd>
            <dd>丹东</dd>
        </dl>
        <dl>
            <dt>山东省</dt>
            <dd>济南</dd>
            <dd>青岛</dd>
            <dd>烟台</dd>
        </dl>
    </dd>
</dl>

二十二、表格标签

table、tr、th、td、caption等
注：之间是有嵌套关系的，要符合嵌套规范。
在这里插入图片描述

二十三、表格属性

在这里插入图片描述

align : left 、center 、right
valign : top 、middle 、bottom

二十四、表单标签

在这里插入图片描述
注：input 是单标签

二十五、表单相关标签

<textarea> : 多行文本框
<select> 、<option> :下拉菜单
<label> :辅助表单

常见属性 : checked、disabled、name、for …

在这里插入图片描述

二十六、表格表单组合使用

<body>
    <form action="">
        <table border="1" cellpadding="30">
            <tbody>
                <tr align="center">
                    <td rowspan="4"总体信息></td>
                    <td colspan="2">用户注册</td>
                </tr>
                <tr align="right">
                    <td>用户名：</td>
                    <td><input type="text" placeholder="请输入用户名"></td>
                </tr>
                <tr align="right">
                    <td>密码：</td>
                    <td><input type="password" placeholder="请输入密码"</td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="reset">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</body>

二十七、div与span

在这里插入图片描述

 <div>
        <h2><a href="https://www.4399.com/">小游戏,4399小游戏,小游戏大全,双人小游戏大全- www.4399.com </a></h2>
        <p>4399小游戏大全包含连连看 ,连连看小游戏大全,双人小游戏大全,H5在线小游戏,4399洛克王国,4399赛尔号,4399奥拉星,4399奥比岛,4399弹弹堂,4399单人小游戏,奥比岛小...</p>
        <a href="https://www.4399.com/">www.4399.com 4399小游戏<title>水滴信用为您检测该网站主体信息
            主体：四三九九网络股份有限公司
            详情 >水滴信用®️ 实名企业</title></a>
    </div>
    <div>
        <h2><a href="https://ssjj.4399.com/">生死狙击,生死狙击官网,生死狙击微端下载,4399生死狙击游戏</a></h2>
        <a href="a"><img src="https://so.360tres.com/dmsmfl/120_80_/t01f5f278e82879a833.webp?size=456x290"></a>
        <p>4399生死狙击是一款3D第一人称射击网页游戏,打开网页在线玩,即可感受枪林弹雨的枪战乐趣。4399生死狙击官网提供生死狙击微端下载...</p>
        <p><a href="http://v.4399pk.com/ssjj/">视频攻略</a></p>
        <p><a href="https://ssjj.4399.com/">ssjj.4399.com</a></p>
 </div>

二十八、CSS语法格式

格式：选择器{属性1：值1；属性2：值2}

width : 宽
height : 高
background-color : 背景色

长度单位：
px : 像素
% : 百分比

在这里插入图片描述

二十九、内联样式与内部样式

在这里插入图片描述

三十、外部样式及两种写法

引入单独的CSS文件 name.css
通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性指定资源的地址。

HTML<link>标签的rel属性

三十一、CSS颜色表示法

1.单词表示法：red , blue , green…
2.十六进制表示法：0 1 2 3 4 5 6 7 8 9 a b c d e f

<style>
div{ background-color:#000000;} → 黑色
</style>

3.rgb三原色表示法：rgb(255,255,255);
提取颜色的工具：下载地址
photoshop工具

三十二、背景样式

在这里插入图片描述

background-color 背景色
background-image 背景图

url（背景地址）
默认：会水平垂直都铺满背景图

background-repeat 平铺方式

repeat-x
repeat-y
repeat（x，y 都进行平铺，默认值）
no-repeat 都不平铺

background-position 背景位置
x y : number (px、%) 单词

x : left、center、right
y : top、center、bottom

background-attachment :背景图随滚动条移动的方式

scroll : 默认值（背景位置是按照当前元素进行偏移的）
fixed（背景位置是按照浏览器进行偏移的）

三十三、背景实现视觉差效果

<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>
    <style>
        #div1{width: 1400px ; height: 800px ; background-image: url(3-1F923144206.jpg); background-attachment: fixed;}
        #div2{width: 1400px ; height: 800px ; background-image: url(QQ图片20221011231256.png); background-attachment: fixed;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

三十四、边框样式

border-style : 边框样式
单独一条边设置：border-left-style

solid : 实线
dashed : 虚线
dotted : 点线

border-width : 边框大小
px …
border-color : 边框颜色
red #f00 …

<style>
        div{width: 300px ; height: 300px ; border-style: dashed ; border-color: brown ; border-width: 1px ;}
    </style>
</head>
<body>
    <div></div>
</body>

三十五、边框实现三角形

<style>
        div{width: 0px ; height: 0px ; 
            border-top-style: solid ; border-top-color: rgb(255, 255, 255) ; border-top-width: 40px ;
            border-left-style: solid ; border-left-color: rgb(255, 255, 255) ; border-left-width: 40px ;
            border-right-style: solid ; border-right-color: rgb(75, 21, 4) ; border-right-width: 40px ;
            border-bottom-style: solid ; border-bottom-color: rgb(255, 255, 255) ; border-bottom-width: 40px ;}
    </style>

三十六、family字体类型

font-family : 字体类型

英文字体：Arial,‘Times New Roman’
中文字体：微软雅黑，宋体

中文字体的英文名称

微软雅黑：‘Microsoft YaHei’
宋体：SimSun

注：当字体名称中出现空格时，字体用"引号框住。

<style>
        div{ font-family: 华文彩云 , 'Times New Roman' , SimSun ,微软雅黑;}
    </style>
</head>
<body>
    <div>啊啊啊啊啊啊啊啊</div>
    <p>啊啊啊啊啊啊啊啊</o>
    <div>啊啊啊啊啊啊啊啊</div>
    <div>啊啊啊啊啊啊啊啊</div>
    <div>啊啊啊啊啊啊啊啊</div>
</body>