前端“三件套“——HTML,CSS,Javascript（一）

最新推荐文章于 2024-04-28 13:46:58 发布

不爱吃苹果’‘

最新推荐文章于 2024-04-28 13:46:58 发布

阅读量4.9k

点赞数 6

分类专栏： Java基础知识总结文章标签：前端 css html

本文链接：https://blog.csdn.net/qq_50692350/article/details/126979396

版权

Java基础知识总结同时被 2 个专栏收录

37 篇文章 10 订阅

订阅专栏

每日记录

3 篇文章 0 订阅

订阅专栏

一. HTML:

1.1 Web标准：

首先，我们为什么要有Web标准？对于不同的浏览器的渲染引擎不同，导致对于我们编写的相同代码在不同的浏览器显示效果不同，甚至出现排版问题。这时候我们使不同的浏览器按照相同的标准显示结果，让展示效果达到统一。这就是web标准。

Web标准的三个组成：

HTML(结构）
CSS（美化）
JavaScript（行动）

HTML是超链接语言，用来显示页面的元素和内容。

CSS控制页面元素的外观（颜色，大小）以及位置等页面样式。

Javascript控制了网页的行为。

1.2 HTML简介：

HTML是一种超文本标记语言，主要用来实现静态页面，我们在页面看到的文本，图片，视频，声音，表格，链接等都是通过HTML语言描述的，而超文本中的超就是超越‘文本’，可以设置样式，显示图片，播放视频。HTML的是由标签组成，给不同的标签不同的属性，可以实现网页的多彩效果。

1.3 HTML标签：

1.3 HTML基本结构标签：

网页类似于一篇文章：每一页文章内容是有固定的结构的，如：开头、正文、落款等 …… 网页中也是存在固定的结构的，如：整体、头部、标题、主体。网页中的固定结构是要通过特点的 HTML 标签进行描述的

代码：

<!-- 文档声明：使用的是HTML5 -->
<!DOCTYPE html>
<html lang="en">
    <!-- 页面头部区域 -->
<head>
    <!-- 字符集编码格式设置--uft-8（万国码）防止页面中文乱码 -->
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<!-- 页面显示区域 -->
<body>
     
</body>
</html>

1.3.1 HTML常用标签：

标签由 < 、 > 、 / 、英文单词或字母组成。并且把标签中 <> 包括起来的英文单词或字母称为 标签名常见标签由两部分组成，我们称之为：双标签 。前部分叫 开始标签 ，后部分叫 结束标签 ，两部分之间包裹内容。少数标签由一部分组成，我们称之为：单标签 。自成一体，无法包裹内容。

标题标签：

h系列标签

h1：1级标题

h2：2级标题

h3：3级标题

h4：4级标题

h5：5级标题

h6：6级标题

特点：

1、标签的文字都有加粗

2、标签的文字都有变大，从h1~h6文字逐渐减小

3、每一个标题独占一行

注意点;

一般我们一个页面只需要一个h1标签，因为有些搜索的关键字就是我们的h1标签。

段落标签：

段落标签：p标签双标签

特点：

1、段落之间存在间隙

2、每个段落是独占一行

换行标签：

换行标签：br 单标签

作用：强制换行

水平线标签：

水平线标签：hr标签单标签

作用：分割不同主题的水平线

文本格式化标签：

文本格式化标签：让文本有加粗、下划线、倾斜、删除线文本的格式效果

-->



 加粗 

 下划线 

 倾斜 

<s> 删除线 </s>

 



 加粗 

<ins> 下划线 </ins>

 倾斜 

<del> 删除线 </del>

图片标签

图片标签：img 单标签

作用：在网页中展示一张图片

属性：

1 、 src ：告诉浏览器要显示哪一张图片

属性值：路径（如果图片和当前页面在同级目录下，此时直接写图片的名字即可），在图片其他的目录里面，这个时候使用相对于文件的相对路径，而不是绝对路径

2 、 alt ：替换文本

当图片加载失败时（如：路径写错了），才显示的文字

3 、 title ：提示文本

当鼠标悬停在图片上时，才显示的文字

4 、 width ：图片的宽度

5 、 height ：图片的高度

注意点：

1、如果只设置图片的宽度或者高度，此时另一个会自动等比例缩放

2、如果同时设置了两个，若设置不当此时图片可能会变形

3.相对路径 从 当前文件开始 出发找目标文件的过程，目标文件和当前文件有不同的相对路径所以我们的编写方式也不同

同级目录：直接写：目标文件名字！
下级目录：直接写：文件夹名/目标文件名字！
上级目录：直接下：../目标文件名字！

多媒体标签：

音频标签：audio

属性：

1、src：路径

2、controls：播放的控件

3、autoplay：自动播放（部分浏览器不支持）

4、loop：循环播放

视频标签：video

属性：

1、src：路径

2、controls：播放的控件

3、autoplay：自动播放（部分浏览器不支持）——》在谷歌浏览器中写muted可以完成静

音的自动播放

4、loop：循环播放

代码：

<audio src="./music.mp3" controls autoplay loop></audio>

<video src="./video.mp4" controls autoplay muted loop></video>

链接标签：

超链接：a标签双标签

作用：点击之后跳转网页

属性：

1、href：告诉浏览器点击之后跳转去哪一个网页

取值：路径

1、外部链接：互联网上的绝对路径

2、内部链接：推荐使用相对路径

2、target：目标网页的打开方式

取值：

1、_self：(默认值) 在当前窗口中进行跳转，原网页会被覆盖

2、_blank：在新窗口中进行跳转，原网页保留

除了以上这些标签我们还有布局标签，用于整个网页的布局：

div 标签：一行只显示一个（独占一行，块级元素）

span 标签：一行可以显示多个

列表：

无序列表<ul>





有序列表<ol>

表格：

在网页中以行 + 列的单元格的方式整齐展示和数据，







其他标签：

代码：

<table>
 <tr>
<td>姓名</td> 
<td>成绩</td>
 <td>评语</td> 
</tr>

注意：

有时候我们创建的表格很不好看会有两横，可以使用

border="1" style="border-collapse: collapse;"

修饰

合并表格：

给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

关于合并表格具体练习代码可以见—个人简历的制作

表单：

网页中显示收集用户信息的表单效果，如：登录页、注册页

标签名： input

• input 标签可以通过 type 属性值的不同，展示不同效果

button 按钮标签：

网页中显示用户点击的按钮

input type属性值：

button type属性值：

注意：

1.表单中要提交的要写数据库的字段名，这样才能获取到数据库数据。

<!-- 2、密码框：password -->
 密码：<input type="password" placeholder="请输入您的密码">
<!-- 3、单选框：radio -->
 性别：
<input type="radio" name="sex" checked>男 
<input type="radio" name="sex">女

2.我们一般很少这样使用表单提交数据因为这样很不安全，用户数据容易获取。

select：