前端基础知识

Posted 2023-03-09 爱敲代码的三毛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端基础知识相关的知识，希望对你有一定的参考价值。

文章目录

前端基础知识

前端基础知识

html

1. html基本结构

html代码是由一个个标签构成的

标签一般成对出现<h1></h1>
少数标签只有开始标签，称为单标签
开始标签和结束标签之间写的是标签的内容
开始标签中可能会写有属性

<!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>
    <input class="content" type="text">
</body>
</html>

html标签是整个html文件的根标签
head标签中写的是页面属性
body标签中写的是页面上显示的内容
title标签中写的是页面的标题

2.常见的html标签

注释标签

<!-- 这是注释 -->

标题标签(h1~h6)

从1级标题到6级标题，数字越大字体越小

<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>

段落标签p

把一段长文本放到html中并不会分成段落，此时就要用到<p></p>标签

<p>
    前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及javascript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互
</p>

注意：

p标签和p标签之间存在着一个空隙
当前的p标签，文章的开头前面试没有缩进的，需要通过CSS实现
p标签会自动根据浏览器宽度来决定排版
html中内容首尾处的换行和空格都无效
在p标签文字中输入多个空格只是相当于一个空格
html中输入换行不会真的换行，而是相当于一个空格

换行标签 br

br是一个单标签
建议写成<br/>

<p>
        前端开发是创建WEB页面或APP等前端界面呈现给用 户的过程，<br/>
        通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互
    </p>

格式化标签

加粗: strong 标签和 b 标签
倾斜: em 标签和 i 标签
删除线: del 标签和 s 标签
下划线: ins 标签和 u 标签

<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

图片标签：img

img标签必须带有src属性，表示图片的路径

<img src="img/test.jpg">

img 标签的其他属性

alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
title: 提示文本. 鼠标放到图片上, 就会有提示.
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片
失衡.
border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定

注意：

属性可以有多个, 不能写到标签之前
属性之间用空格分割, 可以是多个空格, 也可以是换行
属性之间不分先后顺序
路径可以是相对路径、绝对路径、网络路径

超链接标签

href: 必须具备, 表示点击后会跳转到哪个页面.
target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开

<a href="https://www.baidu.com" target="_blank">点击跳转百度</a>

链接的几种形式

跳转内部页面

<a href="index.html">点我跳转到 login.html</a>
<a href="login.html">点我跳转到 index.html</a>

空链接: 使用 # 在 href 中占位

<a href="#">空链接</a>

下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)

<a href="java.zip">下载文件</a>

网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中 )

<a href="https://www.baidu.com" target="_blank">
    <img src="img/sexm.png" alt="">
</a>

表格标签

table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域

table 包含 tr , tr 包含 td 或者 th

表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置.
这些属性都要放到 table 标签中.
align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)
border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.
cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素
width / height: 设置尺寸.
注意, 这几个属性, vscode 都提示不出来.

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
height="500">
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>10</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>11</td>
    </tr>
</table>

合并单元格

跨行合并: rowspan=“n”
跨列合并: colspan=“n”

步骤

先确定跨行还是跨列
找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格)
删除的多余的单元格

列表标签

主要使用来布局的. 整齐好看.

无序列表 <ul><li>
有序列表[用的不多] <ol><li>
自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕
着标题来展开的

<h3>无序列表</h3>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<h3>有序列表</h3>
<ol>
    <li>one</li>
    <li>tow</li>
    <li>three</li>
</ol>
<h3>自定义列表</h3>
<dl>
    <dt>第一级</dt>
    <dd>test</dd>
    <dd>test</dd>
    <dd>test</dd>
</dl>

表单标签

表单是提交用户输入信息的关键

表单分成两个部分

表单域：包含表单元素的区域<form>标签
表单控件：输入框，提交按钮<input>标签

form标签

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

点击提交按钮后就会尝试给服务器发送

input标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框.

type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选一.
value: input 中的默认值.

1.文本框

<input type="text">

2.密码框

<input type="password">

3.单选框

**单选框之间必须具备相同的 name 属性, 才能实现多选一效果 **

<input type="radio" name="sex">男
<input type="radio" name="sex">女

4.复选框

<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">
打游戏

5.普通按钮

<input type="button" value="按钮">

6.提交按钮

<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
</form>

7.清空按钮

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
    <input type="reset" value="清空">
</form>

label标签

搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验

<input type="radio" name="sex" id="sexm"><label for="sexm"><img src="img/sexm.png" width="15" height="15">男</label>
               <input type="radio" name="sex" id="sexw"><label for="sexw"><img src="img/sexw.png" width="15" height="15">女</label>

select标签

下拉菜单

option 中定义 selected=“selected” 表示默认选中

<select name="" id="">
                    <option value="">--请选择出生年份--</option>
                    <option value="">1995</option>
                    <option value="">1996</option>
                    <option value="">1997</option>
                    <option value="">1998</option>
                    <option value="">1999</option>
                    <option value="">2000</option>
                    <option value="">2001</option>
                    <option value="">2002</option>
                    <option value="">2003</opt1ion>
                </select>

textarea 标签

<textarea rows="3" cols="50">
</textarea>

文本域中的内容, 就是默认内容, 注意, 空格也会有影响
rows 和 cols 也都不会直接使用, 都是用 css 来改的.

盒子标签div&span

div 标签, division 的缩写, 含义是分割
span 标签, 含义是跨度
就是两个盒子. 用于网页布局

div 是独占一行的, 是一个大盒子.
span 不独占一行, 是一个小盒子

<div>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
</div>
<div>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
</div>

3. html特殊字符

空格:  
小于号: <;
大于号: >;
按位与: &;

CSS

1. 基本语法

选择器+多条样式声明

选择器决定针对谁修改 (找谁)
声明决定修改啥. (干啥)
声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值
CSS中不区分字母大小写

/*清楚默认样式*/
* 
    margin: 0;
    padding: 0;
    box-sizing: border-box;

2. 引入方式

行内样式

通过 style 属性, 来指定某个标签的样式.
只适合于写简单样式. 只针对某个标签生效

缺点: 不能写太复杂的样式.
这种写法优先级较高, 会覆盖其他的样式

<div style="color: red">
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
</div>

内部样式

写在 style 标签中. 嵌入到 html 内部.
理论上来说 style 放到 html 的哪里都行. 但是一般都是放到 head 标签中

优点: 这样做能够让样式和页面结构分离.
缺点: 分离的还不够彻底. 尤其是 css 内容多的时候

<style>
    * 
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    
    #nav 
        background-color: red;
        color: white;  
        text-align: center;
        height: 50px;
        line-height: 50px;
        font-size: 25px;
    

</style>

外部样式

最常用的

以上是关于前端基础知识的主要内容，如果未能解决你的问题，请参考以下文章

Python之路--前端知识--JavaScript

前端基础之JavaScript

前端JAVASCRIPT和HTML总结

Python之路--前端知识--jQuery

前端基础进阶（三十一）：JavaScript 执行上下文和执行栈

web前端基础知识-JavaScript基本操作