0基础HTML教程进阶版含css和js美化

最新推荐文章于 2024-05-05 13:21:53 发布

leaf5049

最新推荐文章于 2024-05-05 13:21:53 发布

阅读量1k

点赞数 26

分类专栏： HTML 文章标签： css html 前端 js 开发语言

本文链接：https://blog.csdn.net/leaf5049/article/details/136136548

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、<html>标签

作用：表示当前文件是html文件：<html>

格式：

<html>

描述网页内容

</html>

注意：

html标签成对出现，中间添加网页内容。

结束标签中需要添加"/"

二、<head>标签

添加头部标签 <head>

<html>
<head>
</head>
</html>

中文乱码解决方法：

在head标签内加meta标签

<html>
<head>
    <meta charset="utf-8">
</head>
</html>

三、<body>标签

添加主体内容：<body>

<html>

<body>
网页主体内容
</body>
</html>

注意：

body标签成对出现，中间添加网页主体内容。

body闭合标签需要添加"/"

代码示例：

<html>

<body>
Hello,Python!
</body>
</html>

运行效果：

四、<p>标签

添加文字段落：<p>

<p>
正文内容
</p>

注意：

p标签成对出现，中间添加文字段落。

p闭合标签需要添加"/"

p标签需要在body标签中使用

代码示例：

<html>

<body>
<p>Hello,Python!</p>
<p>Hello,World!</p>
</body>
</html>

运行效果：

五、标题标签

添加各级标题：<h1>,<h2>,<h3>,<h4>,<h5>,<h6>

以一级标题为例：

<h1>
标题内容
</h1>

注意：

标题标签成对出现，中间添加文字段落。

h1到h6从大到小，从粗到细对应6级标题

代码示例：

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>

运行效果：

六、换行标签<br/>

在文本中换行：<br/>

<br/>标签单独出现在文本标签中。

<br/>标签是一种自闭合标签，在br后加"/"。

<br>是老版本的换行标签，也可以用来换行。

<p>段落1<br/>段落2</p>

运行效果：

七、style属性

给网页可见内容设置样式：style属性

<标签名 style="属性名:属性值;">主体内容</标签名>

代码：

<html>
<head>
    <meta charset="utf-8">
</head>
#将网址背景设置成红色
<body style="background-color:red;">
<p>段落1<br/>段落2</p>
</body>
</html>

运行效果：

八、style添加多个属性值

style属性可以同时设置背景颜色、字体大小、字体颜色等多个属性值，不同属性间用分号隔开。

style="属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;"

代码：

<html>
<head>
    <meta charset="utf-8">
</head>
<body >
<!--将"这是段落"这句话设置成：宋体、蓝色、20像素大小-->
<p style="font-family:Simson;color:blue;font-size:20px;">这是段落</p>
</body>
</html>

运行效果：

九、绝对路径

完整描述文件所在位置的路径叫做绝对路径。

1. 绝对路径-- windows

从磁盘出发，用'\'连接每一级路径名。

例如：

D:\图片\1.jpg

注意：

所在磁盘后要加：

使用绝对路径要完整描述各级文件夹

2. 绝对路径-- mac

从"/"出发，用"/"连接每一级路径名。

例如：

/图片/1.jpg

十、相对路径

根据和目标的相对位置来查找目标，这样的路径叫做相对路径。规则如下：

	作用	举例
./	当前和平级目录	./可多.png
../	上一级目录	../可多.png
../../	上上一级目录，以此类推	../../可多.png

注意：

相对路径中出现的连接符是"/",mac和windows都一样。

十一、给网页添加图片（路径）

在网页中添加图片用到单闭合标签<img/>,使用绝对路径时语法如下：

<img src="磁盘:\路径\图片名.图片格式" width="宽度" height="高度"/>

width和height参数可省略

代码示例：

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>添加图片示例：</h1>
        <img src="./img1.png" width="500" height="500">
    </body>
</html>

img1.png和html文件处于同一目录下，使用相对路径 ./img1.png

十二、给网页添加图片（链接）

在网页中添加图片用到单闭合标签<img/>,使用网页链接时语法如下：src是来源：source的意思

<img src="图片网页链接" width="宽度" height="高度"/>

width和height参数可省略

十三、通过作品网页链接添加作品

链接又叫超级链接、超链接，在网页内添加链接，用到<a>标签：

<a href="目标网页网址">链接名称</a>
#为了增加文字说明，可以增加p标签
<p><a href="目标网页网址">链接名称</a>文字说明（可省略）</p>

十四、通过作品本地位置添加作品

链接到本地网页用到<a>标签（一般使用相对路径）：

<p><a href="相对路径/页面名称.html">链接名称</a>文字说明（可省略）</p>

十五、div标签分块管理

利用一对div标签可以统一设置其中所有内容的格式，包括位置的居中、靠左或靠右显示

<div style="text-align:center">分块内容</div>

对齐位置可选择：left、right、center

十六、网页内播放音乐

利用audio标签可以添加音乐，并手动控制播放

<audio controls="controls"><source src="相对路径/song.mp3"></audio>

controls属性控制手动播放

source标签帮助audio标签链接到相关的音乐位置

十七、CSS

CSS是一种用于修改网页外观样式的语言，语法中包含属性和值。

格式：属性1:值1;属性2:值2;...

注意：属性和值之间使用冒号连接，多组之间使用分号连接。

十八、CSS中的属性和值

十九、CSS的使用

方式	语法
作为标签的style属性值	<p style="color:red;font-size:20px;">
嵌套在<style></style>标签里面	<style>选择器{ color:red; font-size:20px; }</style>
打包成css文件，在HTML中使用<link>标签导入	<link href="相对路径/文件名.css">

二十、标签选择器

嵌套在<style></style>标签里面。语法：

<style>
    选择器{...}
</style>

选择器类别	说明	语法
标签选择器	根据标签名称来命名	标签名{ ... }

二十一、类选择器

嵌套在<style></style>标签里面。语法：

<style>
    选择器{...}
</style>

选择器类别	说明	语法
类选择器	根据标签的class属性值来命名	.类名{ ... }

第一步：设置类选择器：例子：.setblue{color:blue;}

第二步：在标签上添加class="类名" 属性：例子：<p class = "setblue"> 内容 </p>

二十二、id选择器

嵌套在<style></style>标签里面。语法：

<style>
    选择器{...}
</style>

选择器类别	说明	语法
id选择器	根据标签的id属性值来命名	#id属性名{ ... }

第一步：设置id选择器的样式：例子：#setred{ color:red; }

第二步，在标签中添加id="id名"属性：例子：<h1 id = "setred"> 标题1 </h1>

二十三、BootStrap库

Bootstrap是一个封装了很多类选择器的css库。(本质上就是一个css文件)

/*黑色背景类选择器*/
.bg-dark{
    ...
}
/*白色文字类选择器*/
.text-white{
    ...
}

Bootstrap官网：简介 · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网Bootstrap 是全球最受欢迎的前端框架，用于构建响应式、移动设备优先的网站。利用 jsDelivr 和我们提供的入门模板帮助你快速掌握 Bootstrap。https://v4.bootcss.com/docs/getting-started/introduction/

导入核心css文件和轮播类需要的js文件：

CSS文件

复制以下 <link> 标签并粘贴到 <head> 标签内，注意，务必放到其它所有 CSS 样式前面。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-olOxEXxDwd20BlATUibkEnjPN3sVq2YWmYOnsMYutq7X8YcUdD6y/1I+f+ZOq/47" crossorigin="anonymous">

JS文件

复制下面的 <script> 标签粘贴到页面底部，并且是在 </body> 标签之前，就能起作用了。注意，顺序很重要，不能错，首先是 jQuery，然后是 Popper，最后是我们自己的 JavaScript 插件。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-NU/T4JKmgovMiPaK2GP9Y+TVBQxiaiYFJB6igFtfExinKlzVruIK6XtKqxCGXwCG" crossorigin="anonymous"></script>

二十四、Bootstrap库-栅格系统

Bootstrap采用栅格系统，既通过一系列的行和列来设置页面布局，一行最多分为12列。

行类：.row

列类：.col-列数

<div class="row">
     <div class="col-列数">内容1</div>
     <div class="col-列数">内容2</div>
        ……
</div>

注意：

1、col-列数之间的符号是英文状态下的连接符

2、多个.col-列数类分割.row类时，之和是12

二十五、Bootstrap库-导航类

Bootstrap是使用两个类选择器来实现的：

<div class="nav">    #设置导航的整体样式
    <a class="nav-link" href="#锚点名">导航</a>  #设置每一个导航的样式
</div>

二十六、Bootstrap库-轮播类

将下面的代码粘贴到编辑器的HTML文件中，将<img />标签换成自己想要展示的照片

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

二十七、Bootstrap库-卡片类

将下面的代码粘贴到编辑器的HTML文件中，将<img>和<p>标签换成自己要展示的图片和文字

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

二十八、卡列

多个卡片嵌套在卡列中，一行最多呈现三个卡片，其余自动换行。

<div class="card-columns">
     卡片1的代码
     卡片2的代码
        …….
</div>

效果：

以上就是HTML的进阶版了，有什么疑问欢迎留言！

leaf5049

关注

26
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
0基础HTML教程进阶版含css和js美化

html标签成对出现，中间添加网页内容。结束标签中需要添加"/"
复制链接

扫一扫

专栏目录

0基础HTML教程 进阶版 含css和js美化

一、<html>标签

二、<head>标签

三、<body>标签

四、<p>标签

五、标题标签

六、换行标签<br/>

七、style属性

八、style添加多个属性值

九、绝对路径

1. 绝对路径-- windows

2. 绝对路径-- mac

十、相对路径

十一、给网页添加图片（路径）

十二、给网页添加图片（链接）

十三、通过作品网页链接添加作品

十四、通过作品本地位置添加作品

十五、div标签分块管理

十六、网页内播放音乐

十七、CSS

十八、CSS中的属性和值

十九、CSS的使用

二十、标签选择器

二十一、类选择器

二十二、id选择器

二十三、BootStrap库

二十四、Bootstrap库-栅格系统

二十五、Bootstrap库-导航类

二十六、Bootstrap库-轮播类

二十七、Bootstrap库-卡片类

二十八、卡列

“相关推荐”对你有帮助么？

0基础HTML教程进阶版含css和js美化