第一周前端web学习记录

小杰子咔咔咔

已于 2022-10-28 19:08:56 修改

阅读量1.1k

点赞数

文章标签：前端学习 javascript

于 2022-10-20 20:30:14 首次发布

本文链接：https://blog.csdn.net/m0_63696408/article/details/127433040

版权

第一周前端web学习记录

#什么是HTML、CSS？

#什么是HTML、CSS？

两种编程语言
做网站的基础语言
一般情况下配套使用

一个网站是由多个.html文件组成

如何写代码以及在哪里写

使用文本文档直接写代码注意格式为.html
vs code (宇宙第一编译器）

vs code 的基本使用方法

下载插件用来拓展适用范围以及便捷性
快捷操作
设置以及搜索

浏览器

我们目前主要使用Chrome

目前市场上的主流浏览器有
1.IE
2.Edge
3.火狐
4.Safari
5.Chrome

网站开发

一个网站的开发需要多个部门以及职位之间的相互配合
主要岗位有：UI设计师 web前端、后端开发工程师

使用HTML编写结构
使用CSS编写样式
使用JAVAScript编写行为
以上称之为web开发的三大核心技术

HTML 的结构基础和属性

HTML是一种超文本编辑语言，是网页制作必备的编程语言。
超文本：文字内容+非文字内容
标记：<单词>（单标签<>双标签<></>）
语言：编程语言

创建标签

1|<header> hello world</header>

嵌套

标签可以组合嵌套

<header>
hello world 
<div>
    1
    <div>1</div>
    <div>1</div>
    <div>1
        <div>1</div>
        <div>1</div>
        <div>1</div>
    </div>
</div>

HTML标签

标签的属性：勇于修饰标签，设置其功能。
设置属性<标签属性=“值” 属性2=“值2”>

设置属性

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

HTML的初始代码

每个.html文件按照规范都需要有初始代码
初始代码无论哪个网站都是必备的

<!DOCTYPE html>   <!-- 文档声明：这是一个html文件 -->
<html lang="en">  <!-- lang="en"表示初始为英文网站 -->
    <!-- html文件的最外层标签：包裹着所有html标签代码 -->
<head>
    <meta charset="UTF-8">
    <!-- 元信息：是编写网页中的一些赋值信息 -->
    <!-- UTF-8表示使用国际编码 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页的标题</title> <!-- 设置网页标题 -->
</head>
<body>
    <!-- 显示网页内容的区域 -->
</body>
</html>

HTML注释

1.可以使用注释功能注释以后所需要的代码
2.可以编辑注释增强代码的可行性，便于相关人员理解。

HTML语义化

HTML语义化是指，根据网页中内容的结构，选择合适的HTML标签进行编写。
优点：
1.在没有CSS的情况下，页面也能呈现出很好的内容结构。
2.有利于SEO，让搜索引擎更好的理解网页
3.方便其他设备解析
4.便于团队开发与维护

HTML标题与段落

h标签：标题

每个网页中h1标题只能出现一次，h5、h6标题不经常使用

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>
    <p>段落1</p>
    <h2>二级标题</h2>
    <p>段落2</p>
    <h3>三级标题</h3>
    <p>段落3</p>
</body>
</html>

HTML文本修饰标签

加粗
斜体
上标/下标文本
删除文本
插入文本

<p> a<sub>2</sub> </p>
<p> 原价<del>300</del>，现价<ins>100</ins>。</p>
一些标签自带样式可以手动去除

图片标签和属性

src:引入图片地址
alt:替代方案，图片出问题后显示文字
tittle:提示信息
width、height:图片的大小像素（CSS）

编写

<body>
    <img src="图片地址" alt="替代文字" title="提示信息" width="宽" height="高">
</body>

引入文件的地址路径

相对路径

<body>
    <img src="./文件夹或文件名/文件夹或文件名" alt="" >
    <!-- .表示向内寻找 ..表示向外寻找 -->
</body>

绝对路径

路径对于路径引用的内容是相通的

跳转链接

标签：
属性：

href:链接地址
target:可以改变打开链接的方式

跳转链接可以应用于图片和文字等

编写

<base target="打开方式">
<a href="网址" target="打开方式">文字</a>
<a href="网址" target="打开方式"><img src="图片路径" alt=""></a>

跳转锚点

页面内快速移动
两种代码实现方式：
1.#+id属性
2.#+name属性

编写

1.#+id

<a href="#id名1">目录内容1</a>
<a href="#id名2">目录内容2</a>

<h2 id="id名1">标题1</h2>
<p>段落1</p>
<h2 id="id名2">标题2</h2>
<p>段落2</p>

2.#+name

<a href="#name名1">目录内容1</a>
<a href="#name名2">目录内容2</a>

<a name="name名1"></a>
<h2>标题1</h2>
<p>段落1</p>
<a name="name名2"></a>
<h2>标题2</h2>
<p>段落2</p>

特殊符号

通过专用代码输入特殊字符
1.空格符：&nbsp
2.版权：&copy
3.注册商标：&reg
4.小于号：&lt<
5.大于号：&gt>
6.和号：&amp&
7.人民币：&yen¥
8.摄氏度：&deg °

无序列表

列表的最外层容器、列表项
ul和li 必须组合出现，中间不能有其他标签
type属性：更改项目前标记样式

编写

普通无序列表

<ul>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ul>

内容可以是文字也可以是链接

复杂无序列表

<ul>
    <li><a href="#"><strong>内容1</strong></a></li>
    <li><a href="#">内容2</li>
    <li><a href="#">内容3</li>
</ul>

有序列表

列表的最外层容器、列表项

运用很少可以通过无序列表代替

type属性：更改项目前标记样式

样式：1(默认数字),a(小写字母),A(大写字母),i(小写罗马字母),I(大写罗马字母)

编写

普通有序列表

<ol>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ol>

复杂有序列表

<ol>
    <li><a href="#"><strong>内容1</strong></a></li>
    <li><a href="#">内容2</li>
    <li><a href="#">内容3</li>
</ol>

定义列表

定义列表
定义专业术语或名词
对名词进行解释和阐述

编写

<dl>
    <dt>内容1</dt>
    <dd>描述内容1</dd>
    <dt>内容2</dt>
    <dd>描述内容2</dd>
    <dt>内容2</dt>
    <dd>描述内容2</dd>
</dl>

浏览器调试

待拓展

第二周学习记录

嵌套列表

1.列表之间可以相互嵌套实现多级列表

编写

1.无序有序列表

<ul>
    <li>
        一级内容1
        <ul>
            <li>
                二级内容1
                <ul>
                    <li>三级内容</li>
                </ul>
            </li>
            <li>二级内容2</li>
        </ul>
    </li>
    <li>
        一级内容2
        <ul>
            <li>二级内容3</li>
            <li>二级内容4</li>
        </ul>
    </li>

</ul>

样式会随着层级的改变而改变

2.定义列表

<dl>
    <dt>一级内容</dt>
    <dd>
        <dl>
            <dt>二级内容1</dt>
            <dd>三级内容1</dd>
            <dd>三级内容2</dd>
        </dl>
        <dl>
            <dt>二级内容2</dt>
            <dd>
                <dl>
                    <dt>三级内容1</dt>
                    <dd>四级内容</dd>
                </dl>
            <dd>三级内容2</dd>
            <dd>三级内容3</dd>
        </dl>
    </dd>
</dl>

表格

表格标签

$< t ab l e >$ ：表格的最外层容器
$< t r >$ ：定义表格行
$< t h >$ ：定义表头
$< t d >$ ：定义表格单元
$< c a pt i o n >$ ：定义表格标题

有嵌套关系规范

 三个语义化标签：<thead> <tbody> <tfoot>

$< t b o d y >$ 可以出现多次，其余两个只能出现一次
三个标签不发挥作用，但是会使得书写规范。

编写

<table>
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>第一行表头1</th>
            <th>第一行表头2</th>
            <th>第一行表头3</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>第二行表头1内容</td>
        <td>第二行表头2内容</td>
        <td>第二行表头3内容</td>
    </tr>
        <tr>
            <td>第三行表头1内容</td>
            <td>第三行表头2内容</td>
            <td>第三行表头3内容</td>
        </tr>
    </tbody>
    <!-- <tfoot>表尾</tfoot>在这里写 -->
</table>

表格属性

boder：表格边框<默认没有边框>

$< t ab l e b o d er : "1" >$ 表示1像素的边框

cellpadding:单元格内空间

$< t ab l ece llp a dd in g = "1" >$ 空间+1个像素

cellspacing:单元格之间的空间

$< t ab l ece ll s p a c in g = "1" >$ 单元格之间+1个像素

colspan:合并列

$< t h co l s p a ce = "2" >$ 合并两列

rowspan:合并行

$< t h ro w s p an = "2" >$ 合并两行

align:左右对齐方式

$< t r a l i g n = " 对齐方式 " >$

表单

表单标签

1. $< f or m >$ :表单的最外层容器
2.> $< in p u tt y p e = “ 样式 ” >$ ：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框，密码框，复选框等。
type属性：text（普通文本输入框），password（密码输入框），checkbox（复选框），radio（单选框），file（上传文件），submit（提交按钮），reset（重置按钮）

编写

<form action="提交文件的地址">
    <h2>输入框</h2>
    <input type="text">
    <h2>密码框</h2>
    <input type="password">
    <h2>复选框</h2>
    <input type="checkbox">选项1
    <input type="checkbox">选项2
    <input type="checkbox">选项3
    <h2>单选框</h2>
    <input type="radio" name="自定义内容">选项1
    <input type="radio" name="自定义内容">选项2
    <!-- 自定义内容相同时将两个选项归为一类，选择时只能选择一个 -->
    <h2>上传文件</h2>
    <input type="file">
    <h2>提交和重置</h2>
    <input type="submit">
    <input type="reset">
    <h2>框名</h2>
    <input type="样式">
</form>

收集提交的文件和信息还未学习　待拓展
checkbox指选择框，若想默认选中只需在checkbox后加checked
添加disabled属性即可禁用
想在输入框内添加文字提示则需添加placeholder=“提示内容”

表单标签

$< t e x t a re a >$ ：多行文本框
$< se l ec t >$ , $< o pt i o n >$ ：下拉菜单
$< l ab e l >$ ：辅助表单

编写

<form action="">
    <h2>可输入文本框</h2>
    <textarea cols="列数" rows="行数"></textarea>
    <h2>下拉菜单</h2>
    <select size="显示的项的数目" multiple>
        <!-- multiple表示多选 -->
        <option selected disabled>请选择</option>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        <h2>单选框</h2>
        <input type="radio" name="自定义内容1"><label for="自定义内容2">选项1</label>
        <input type="radio" name="自定义内容1"><label for="自定义内容2">选项2</label>
        <!-- label标签使表单可选择范围变大，从而提升用户体验 -->
    </select>
</form>

表格表单的组合

编写

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

$< d i v >$ & $< s p an >$

$< d i v >$ ：、用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。故大部分标签可以嵌套在
标签中，
标签本身也可以嵌套多层
，用来将网页分割成独立的不同的部分，实现网页的规划和布局。
$< s p an >$ ：用于修饰文字，内联（看不出独立）

编写

<div>
    内容分块
    <span>内联文字，文本修饰</span>
</div>
<!-- 如下 -->
<div>
    <h2>12<span>3</span>45</h2>
</div>
<!-- 在span标签中添加样式即可单独修饰3 -->

CSS

CSS的基础语法

格式：

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

长度单位：

px(像素)、%(百分比)

基本样式：

width（宽）、height（高）、backgroound-color（背景颜色）

注释：

/* */
　　快捷键：Shift + alt+A

编写

<style>
        div{ width: 100px; height: 100px;background-color: red;}
    </style>

以上编写存在于head标签内
会自动查找body标签内的div标签

内联样式与内部样式

内联(行内、行间)样式

在html标签上添加style属性实现

内部样式

在style标签内添加的样式

编写

内联样式：

 <div style="width: 100px; height: 100px;background-color: red">内容</div>

内部样式：

<style>
       div{ width: 100px; height: 100px;background-color: red;}
   </style>

颜色表示

1.单词表示法

div{ background-color:颜色}

2.十六进制表示法（形如#000000）

div{ background-color:#000000;}

3.rgb三原色表示法(颜色的混合，0~255）

div{ background-color：rgb(255,255)

背景样式

1.background-color：背景颜色
2.background-image：背景图片
3.background-repeat：背景图片的平铺方式
4.background-position：背景图片的位置
5.background-attachment：背景图随滚动条的移动方式

背景视觉差的实现

编写

<head>
    <style>
        #div1{ 容器1样式,长宽高背景图等;background-attachment: fixed;}
        #div2{ 容器1样式,长宽高背景图等;background-attachment: fixed;}
        #div3{ 容器1样式,长宽高背景图等;background-attachment: fixed;}
         /* table{ 可添加表格样式} */
    </style>
</head>
<body>
    <div id="div1">内容1</div>
    <div id="div2">内容2</div>
    <div id="div3">内容3</div>
</body>

边框样式

1.border-style：样式
2.solid：实线
3.dashed：虚线
4.dotted：点线
5.border-width：大小
6.border-color：颜色
div{ border-style:样式;bordrt-color;颜色；border-weight:边框宽度)

编写

<style>
        div{ width: 0px ;height: 0px;
             border-top-color:transparent ;
             border-top-style: solid;
             border-top-width: 10px;
             border-right-color:black ;
             border-right-style: solid;
             border-right-width: 10px;
             border-left-color:transparent ;
             border-left-style: solid;
             border-left-width: 10px;
             border-bottom-color:transparent ;
             border-bottom-style: solid;
             border-bottom-width: 10px;    
            }
    </style>

文字样式

1.font-family ：字体类型（默认微软雅黑）
　　　　　　英文、中文（可自行上网寻找）
div{ font-family:字体类型}
衬线体与非衬线体
2.设置字体备选方案
div{ font-family: SimSum,微软雅黑; }
3.引号的使用
4.font-size：字体大小（默认16px）
　写法：
　　　　单词（xx-small，x-small，small，medium，
　　　　large，x-large，xx-large）
　　　　数字（一般为偶数）
div{ font-size:字体大小}

5.font-weight：字体粗细
　　normal（正常），hold（加粗），100~900（整百，100-500为正常，600-900为加粗）

6.font-style：字体样式
　　normal（正常），italic、oblique（斜体）

color
颜色使用方法同上

段落样式

text-decoration：文本修饰
　　　　下划线：underline
　　　　删除线：line-through
　　　　上划线：overline
　　　　不添加任何装饰：none
text-transform：文本大小写
　　　　小写：lowercase
　　　　大写：uppercase
　　　　首字母大写：capitalize（只针对首字母）
text-indent：文本缩进
　　　　首行缩进：数字表达（10px）
　　　　　　　　　em单位（1em永远和字体大小相同）
text-align：文本对齐方式
　　　　对齐方式：left、right、center、justify(两端点对齐)
line-height：行高
　　　　定义（上边距+下边距+文字高度）
　　　　默认（默认行高不是固定值，根据当前字体大小变化）
　　　　取值：number（px）
　　　　　　　scale（比例值，和文字大小成比例）
letter-spacing：定义字间距
如letter-spacing:10px
word-spacing：定义词间距（针对英文）
如word-spacing:10px

英文和数字不自动折行

word-break:break-all;（非常强烈的折行）
word-wrap:break-word;（不是那么强烈的折行,会产生空白）

复合样式

一个CSS属性只控制一种样式，叫做单一样式。

一个CSS属性控制多种样式，叫做复合样式。

如：background
　　border
　　font
复合的写法是通过空格的方式实现的。
如div{background:red url(图片路径) no-repeat center center}
实现了背景变为红色和引入图片居中，可以节省很多代码
复合样式
一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。
如：background
　　border
　　font

选择器

ID选择器

css：#elem{}
　　html：id=“elem”

CLASS选择器

css：#elem{}
　　html：class=“elem”

编写

ID尝试器

<head>
    <style>
        #div1{ background-color: red;}
        #div2{ background-color: red;}
    </style>
</head>
<body>
    <div id="div1">内容1</div>
    <div id="div2">内容2</div> 
</body>

CLASS选择器

<head>
    <style>
        .box{ background-color: red;}
        .box1{ background-color: red;}
        .div{ font-size:30px;}
        p.div{ font-size:30px;}
        /* 该条只针对p标签 */
    </style>
</head>
<body>
    <div class="box">内容1</div>
    <div class="box1 div">内容2</div> 
    <p class="div">内容3</p>
</body>