前段开发笔记

Kaisa7

已于 2023-02-25 19:25:26 修改

阅读量52

点赞数

文章标签： html 前端 javascript

于 2022-12-30 17:31:51 首次发布

本文链接：https://blog.csdn.net/weixin_45765617/article/details/128496999

版权

本文详细介绍了前端开发的基础知识，包括HTML的结构标签、列表标签、表格标签和表单标签的使用，强调了语义化标签的重要性和字符实体的作用。此外，还深入探讨了CSS的引入方式、基础选择器、字体与文本样式，以及背景相关属性。对于初学者来说，是一份全面的前端入门教程。

摘要由CSDN通过智能技术生成

基础认知

1.1Web标准中分成三个构成：

构成	语言	说明
结构	HTML	网页元素和内容
表现	CSS	网页元素的外观和位置等页面样式
行为	JavaScript	网页模型的定义与页面交互（动态）

HTML

html网页固定结构：

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

快速注释：Ctrl+/

标题标签：<h1></h1>

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

换行:<br>

水平线标签：<hr>

相对路径：直接写目标文件的名字

方法一：<img src="上级目录/目标图片.gif">

方法二：<img src="./目标图片.gif">

音乐标签：<audio src="./music.mp3" controls loop></audio>

视频标签：<video src="./video.mp4" controls></video>

链接标签：<a href="./目标网页.html">超链接</a>

------href表示跳转地址

一.列表标签

无序列表：在网页表示中无顺序之分

标签名	说明
ul	表示无序列表的整体，用于包裹li
li	表示无序列表的每一项，用于包含每一行的内容

ul中只能包含li标签，li中可以是任意标签

有序列表：在网页表示中有顺序之分

标签名	说明
ol	表示有序列表的整体，用于包裹li
li	表示无序列表的每一项，用于包含每一行的内容

ol中只能包含li标签，li中可以是任意标签

自定义列表：

标签名	说明
dl	表示自定义列表的整体，用于包裹dt/dd
dt	表示自定义列表的主题
dd(默认缩进）	表示自定义列表中针对主体每一项的内容

dl中只能包含dt/dd标

二.表格标签

标签名	说明
table	表格整体,可包含多个tr
tr（行）	表格每行，可用于包裹td
td(单元格)	表格单元格，可用于包裹内容

结构标签：让表格内容分组（可以省略）

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

合并单元格：左上原则进行保留

属性名	属性值	说明
rowspan(跨行合并)	合并单元格个数	将多行垂直合并
colspan(跨列合并)	合并单元格个数	将多列垂直合并

三.表单标签

1、input标签：在网页中显示收集用户信息的表单效果

标签名	type属性值	说明
input	text	文本框，用于输入但行文本
input	password	密码框
input	radio	单选框，用于多选一
input	checkbox	多选框，用于多选多
input	file	文件选择，用于之后上传文件
input	submit	提交按钮
input	reset	重置按钮
input	button	普通按钮，默认无功能，配合js添加功能

一.input系列标签：文本框（text）

属性名	说明
placeholder	占位符。提示用户输入文本内容

二.input系列标签：单选框（radio）

属性名	说明
name	分组。相同name属性值单选框为一组，一组只能有一个选中
checked	默认选中

三.input系列标签：文件选择（file）

属性名	说明
multiple	多文件选择

四.input系列标签：按钮（submit，reset，button）

可以使用value给按钮添加属性（名称）

*需配合form标签使用

form（表单域）使用方法：用form把表单标签包裹起来

2、button标签

与type区别（type同input使用）

标签名	type属性值	说明
button	submit	提交按钮，点击后提交给后端服务器
button	reset	重置按钮，点击后恢复表单默认值
button	button	普通按钮，配合js使用

3、select下拉菜单标签

select标签：下拉菜单的整体。（selected：下拉菜单中默认选中）

option标签：下拉菜单的每一项

4.textarea文本域标签（在网页中多行文本输入表单控制）