前端整体阶段个人总结

最新推荐文章于 2023-08-28 23:40:05 发布

m0_68481241

最新推荐文章于 2023-08-28 23:40:05 发布

阅读量700

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_68481241/article/details/128401699

版权

前端整体阶段个人总结

HTML

Hyper Text Markup Language 超文本标记语言

超文本：超级文本/超链接文本，超越了文本的限制，如多媒体文件、超链接等。

标记：也可以称为标签，用<>括起来的一个特定单词，整体称为标记或标签，分为单标签和双标签。

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

标签的类型

块级元素，占页面中的一整行。block
行内元素，占一行中的一部分。inline

标签的属性

标签第一个中括号中，使用 属性=“值” ，让某个标签拥有特定属性。

如<meta charset="utf-8">中，charset="utf-8"就是meta标签的属性

chartset称为属性名，utf-8称为属性值。

如果有多个属性，使用空格隔开。

如<div id="xxx" class="xxx"></div>。

网页基本结构

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        网页主体
    </body>
</html>

创建一个文本文档，将以上内容进行保存，文档的后缀名改为.html，用浏览器就能解释运行。

HTML注释

<!-- HTML中的注释 -->

页面种显示颜色的方式

颜色单词，如red、blue、green等
颜色RGB。R-RED,G-GREEN,B-BLUE。rgb(255,0,0)表示红色，数字范围[0,255]，值越大，对应的颜色越深
颜色的十六进制RGB。#FF0000表示红色，相当于RGB(255,0,0)

资源的路径

绝对路径：资源的完整地址。如在线图片地址或带有盘符的地址
相对路径：从当前页面出发，找到图片所在位置
- 使用“…/”跳出当前目录
- 使用"xxx/"进入xxx目录

常用标签

文字

标签名	作用
h1~h6	块级元素。标题。文字加粗，1最大，6最小。通常用h1~h3
p	块级元素。段落。
span	行内元素。
pre	块级元素。预处理标签。
i	行内元素。倾斜。
u	行内元素。下划线。
b	行内元素。加粗。
sub	行内元素。文字下标。
sup	行内元素。文字上标。
	以上标签都是双标签

Emojo表情

用法：复制表情对应的十进制或十六进制的代码，最好使用span显示

<!--十进制 &#特定值;-->
<span>&#11088;</span>
<!--十六进制 &#x特定值; -->
<span>&#x231B;</span>

图片img

单标签，行内元素

<img src="图片路径" alt="无法显示图片时显示的文字" title="鼠标悬停时的提示文字" width="宽度" height="高度">

列表ul/ol/li

双标签，块级元素，li是ul或ol的子标签

无序列表ul

默认每一项前用实心圆符号修饰

通过type属性修改符号

disc 默认，实心圆
circle 空心圆
square 正方形
none 去掉修饰符号

<ul>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
</ul>

有序列表ol

默认每一项前用自增数字修饰

通过type属性修改符号

a/A 英文字母
i/I 罗马符号
1 默认数字
none 去掉修饰符号

<ol>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
</ol>

表格table

表格中的标签	作用
tr	表格中的行
td	每行中的单元格
th	特殊的单元格，表头，文字加粗居中

td可以通过

colspan=“3”属性实现跨3列

rowspan=“2”属性实现跨2行

<table border="1" >
    <tr>
        <th></th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr>
        <td rowspan="2">上午</td>
        <td>语文</td>
        <td>数学</td>
        <td>语文</td>
        <td>数学</td>
        <td>语文</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>语文</td>
        <td>数学</td>
        <td>语文</td>
        <td>数学</td>
    </tr>
    <tr>
        <td colspan="6" align="center">午休</td>
    </tr>
    <tr>
        <td rowspan="2">下午</td>
        <td>体育</td>
        <td>音乐</td>
        <td>自然</td>
        <td>科技</td>
        <td>美术</td>
    </tr>
    <tr>
        <td>音乐</td>
        <td>体育</td>
        <td>科技</td>
        <td>美术</td>
        <td>自然</td>
    </tr>
</table>

多媒体

音频audio

<audio controls autoplay loop muted >
    <source src="xxx.mp3" type="audio/mpeg">
</audio>

视频video

<video width="320" height="240" controls autoplay loop muted >
    <source src="xxx.mp4" type="video/mp4">
</video>

controls开启控制器

autoplay自动播放

loop循环

muted静音

谷歌浏览器，默认不允许自动播放非静音视频

水平线hr

<hr color="颜色" size="粗细" width="宽度">

换行br

<br>

a标签

行内元素，双标签。

超链接

可以通过a标签访问任何一个地址

<a href="资源路径" target="">点击跳转</a>

target可以控制要访问的资源在哪里打开

_self 默认。在当前页面打开
_blank 在新页面打开
_parent 在父页面打开
指定的name名
- 如果是锚点的name，通过“#name“访问
- 如果是iframe的name，通过"name"访问

锚点

可以通过a标签定义锚点和访问锚点，实现当前页面的快速定位

1.设置锚点

<a name="锚点名"></a>

2.访问锚点

<a href="#指定的锚点名">点击访问锚点</a>

浮动框架iframe

<a href="xx" target="main">xx</a>
<a href="yy" target="main">yy</a>

<iframe name="main" src="页面的路径" width="宽度" height="高度">

</iframe>

表单和表单元素

表单form

双标签，用于接收用户输入的数据

<form action="表单提交的最终目的路径" method="表单提交方式">

</form>

form表单有两个重要的属性

action:设置提交路径
- 可以是一个页面，也可以是后台请求映射
method:设置提交方式
- 默认值为get，表示使用get方式提交，提交的数据会暴露在浏览器地址栏中
- 设置为post方式，提交的数据不会暴露在浏览器地址栏中

表单元素

定义在表单form标签中的标签

常用表单元素	作用
input	单标签，行内元素。通过修改关键属性type，变化为不同的组件
select	双标签，行内元素。下拉菜单
textarea	双标签，行内元素。文本域

input标签type属性的值	作用
text	文本框
password	密码框
radio	单选按钮
checkbox	复选框
date	日历组件
number	数字组件
hidden	隐藏域
file	上传文件
image	图片提交按钮
submit	提交按钮
reset	重置按钮

表单元素中的属性	作用
name	用于提交数据时设置提交的参数名
value	用于设置组件的默认值
checked	用于设置单选按钮和复选框的默认选中
placeholder	用于设置输入框的提示文字
required	用于设置输入框为必填项
selected	用于设置下拉菜单默认选中
disabled	用于设置某个组件为不可用状态
readonly	用于设置某个组件为只读状态
max/min/step	number独有，用于设置最大值、最小值和步长
rows/cols/	textarea独有，用于设置文本域的行数和列数

div标签

块级元素，双标签，没有任何特点。

页面布局时采用div布局。

CSS

Cascading Style Sheets 层叠样式表

用于控制HTML中标签样式的语言。可以精确到像素，美化修饰HTML标签

CSS语法

样式名:样式值；

color:red;

font-size:20px;

选择器

用于选择页面中的元素

id选择器
- 1.给变迁添加id属性，对其命名
- 2.在style标签中通过#id名获取
- 3.通常用于选择某一个元素
  </

最低0.47元/天解锁文章

m0_68481241

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端整体阶段个人总结

var / let 变量名;var name;var age;let sex;var 数组名 = new Array();var 数组名 = [ ];函数的定义function 函数名(参数 1 ，参数 2 ，参数 3. . .) {//代码 }函数调用对象.函数名(参数);//函数调用 function fun1() {console . log("fun1 被调用");} //有参数。无返回值 function fun2(name) {
复制链接

扫一扫