第一部分 web前端课程

超级闪电侠fff

已于 2023-09-18 22:25:21 修改

阅读量1.6k

点赞数 1

文章标签：前端开发语言

于 2022-10-20 17:13:16 首次发布

本文链接：https://blog.csdn.net/S788977SS/article/details/127416169

版权

一.HTML+css导学部分

课程顺序

共四部分

什么是HTML和css

两种编程语言，通常配合使用，是网站开发的基础语言

VS Code编译器

下载地址：https://code.visualstudio.com/
安装插件：扩展里搜索中文语言包，open in browser ,view in borwser下载
编辑器的基本使用：文件—首选项—设置（字体大小，换行）
快捷方式：
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浏览器

下载地址：https://www.google.cn/intl/zh-CN/chrome/

了解网站开发

需团队配合，有各种岗位

ui设计师:设计稿
Web前端开发工程师（H5开发）：设计稿—代码，数据库里的数据—显示到页面（HTML+CSS:HTML:结构，CSS:样式)
web后端开发工程师

Web前端的三大技术

HTML
CSS
Javascript

二.HTML基础学习

HTML基本结构和属性

HTML:超文本标记语言

超文本：文本类容+非文本类容（图片，视屏，音频等）
标记（也称标签，写法分两种）：<单词> ，快捷创造方式：单词+tab键
标签的属性：修饰，设置一些功能,<标签属性:“值” 属性2:“值2”>
语言：编辑语言

HTML初始代码

每个html文件都需添加

快速创建方式：！+tab键

HTML注释

只在文件中看得到 
在这里插入图片描述
快捷添加注释与删除：ctrl+/,shift+alt+a

HTML语义化

即根据网页中内容结构选择合适HTML标签编写

标题与段落

标题—双标签:<h1></h1>....<h6></h6>

一个网页中，h1最重要且只能出现一次

段落—双标签：<p></p>

文本修饰标签

<strong>:表强调，会对文本尽行加粗
<em>:表强调，会对文本进行斜体
都是双标签（<strong></strong>,<em></em>），区别strong的强调性更强
<sub>.<sup>:下标文本，上标文本
<del>,<ins>:删除文本，插入文本
都是双标签,格式同上。一般情况删除文本和插入文本配合使用

图片标签与图片属性

<img>:图片，单标签
src:引入链接
alt：添加图片信息（在图片链接有误显示不出来时显示）
title;添加图片主题（鼠标移到图片上将会显示）
width:设置图片宽度
height：设置图片高度
具体用法：<img src-"图片链接"alt-"图片信息"title="图片主题"width="宽度”height=“高度”>

<img src="https://msn-img-nos.yiyouliao.com/inforec-20221111-1cdc33dc08b713354c8768c3fea668d5.jpg?time=1668175322&signature=45992EE40245F059D0E8857C79F5A36D"alt="风景" title="知道的" width="100px";height="100px">

引入文件的地址路径

相对路径

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

绝对路径
如

  <img src="F:/学习/新建文件夹/good.jpg.jpg">
  <img src="https://msn-img-nos.yiyouliao.com/inforec-20221111-1cdc33dc08b713354c8768c3fea668d5.jpg?time=1668175322&signature=45992EE40245F059D0E8857C79F5A36D"alt="">

跳转链接

<a>双标签
href属性：链接的地址
target属性：改变链接打开的方式，默认情况下：在当前页面打开_self 在新窗口打开_blank
base(单标签）：改变链接的默认行为

跳转锚点

两种做法：

1.#+id属性
用这个方法时，要求将id加在要跳转内容的那一段的第一行，

 <a href="#html">html</a>
   <a href="#css">css</a>
   <a href="#sfjq">sfjq</a>
   <h2 id="html">知识库</h2>

2.#+name属性（name属性加给a标签)
用这个方法时单独写一行 <a name="html"></a>代码在要跳转内容的上面，上面的href后面还是用#+属性值的方法。

<a href="#html">html</a>
   <a href="#css">css</a>
   <a href="#sfjq">sfjq</a>
   <a name="html"></a>
   <h2>知识库</h2>

特殊符号

编写文本时遇到无法输入的字符，或往一段文字中加入多个空格时页面不会解析出多个空格时，HTML中为其准备了专门的代码
如在这里插入图片描述

用法：&+字符

无序列表

<ul>,<li>:（都是双标签）列表的最外层容器，列表项（ul和li必须组合出现，之间不能有其他的标签）
type属性：改变前面标签的样式(一般都用css去控制）

<ul type="circle">
        <li>
            <a href="http://www.baidu.com"><em>第一</em></a>
        </li>
        <li>
            <a href="http://www.baidu.com"><em>第二</em></a>
        </li>
    </ul>