HTML5+CSS3学习（一）

Wzr-赟空

已于 2022-08-31 14:41:35 修改

阅读量107

点赞数

分类专栏：笔记文章标签： html5 css3 vscode

于 2022-02-08 14:07:03 首次发布

本文链接：https://blog.csdn.net/wzr728/article/details/122729401

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML标签上

什么是HTML？

HTML指的是超文本标记语言（Hyper Text Markup Language）

HTML并不是编程语言，它的作用是描述网页

标记语言是一套标记标签（Markup tag）

常用浏览器的内核

常用浏览器的内核
*国内一般浏览器都会采用Webkit/Blink内核，如360、UC、QQ、搜狗等

Web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。
W3C（万维网联盟）是国际最著名的标准化组织。

为什么需要Web标准

优点：

让Web的发展前景更广阔
内容能被更广泛的设备访问
更容易被搜索引擎搜索
降低网站流量费用
使网站更易于维护
提高页面浏览速度

Web标准的构成（常作为面试题的）重点

Web标准的构成（常作为面试题的）重点
Web标准的最佳体验方案：

结构、样式、行为相分离

（简单来说就是把结构、样式、行为分别写入HTML文件、CSS文件、JavaScript文件中）

HTML基本结构标签

开发工具（VSCode）

VSCode使用快捷键：

插件安装

自动生成代码
快捷键：！+ Tab键

必须有的代码
必要代码

常用标签

1.标题标签

标题标签

<!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>用VScode创建的第一个网页</title>
</head>

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

</html>

展示效果： 请添加图片描述

2.段落标签

段落标签
特点：
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落和段落之间保有空隙

<!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>用VScode创建的第一个网页</title>
</head>

<body>
    <p>1.文本在一个段落中会根据浏览器窗口的大小自动换行。</p>
    <p>2.段落和段落之间保有空隙</p>
</body>

</html>

展示效果
请添加图片描述

3.换行标签

请添加图片描述
特点：
1.
是个单标签
2.
标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

4.文本格式化标签、文字标签和注释标签

文本格式化标签 请添加图片描述

<!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>用VScode创建的第一个网页</title>
</head>

<body>
    <strong>我是加粗标签</strong>   <b>我也是加粗标签</b>
    <em>我是斜体标签</em>    <i>我也是斜体标签</i>
    <del>我是删除线标签</del>  <s>我也是删除线标签</s>
    <ins>我是下划线标签</ins>   <u>我也是下划线标签</u>
</body>

</html>

展示效果
请添加图片描述
文字标签 （修改文字的样式）
<font> </font>

属性:
size：文字的大小取值范围：1-7；
(若超出7，还是默认7)
color：文字颜色
- 两种表示方式
  1. 英文单词：red green blue black white yellow gray..
  2. 使用十六进制数表示，通过工具实现不同的颜色

注释标签
html的注释：<!–html注释内容–>

5.div和span标签

<div> 和<span>是没有语义的，它们就是一个盒子，用来装内容的。

特点：

<div>标签用来布局，但是现在一行只能放一个<div>
和它相似的有h4标题（它们都是独占一行）
（大盒子）
<span>标签用来布局，一行上可以多个<span>
（小盒子）

这里有一个小插曲，在CSDN写博客的时候发现标签在这也能识别，然后上网查了一下怎么来写<>符号：

 &lt;div&gt;   //这个就等于一个<div>

6.图像标签

在HTML标签中，<img>标签用于定义HTML页面中的图像。
表示方法：

<img src = “图像 URL”>
其中src是<img>标签的必须属性（特性），用来指定图像文件的路径和文件名。

图像标签的其他属性：
图像标签的属性

案例：

<!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>用VScode创建的第一个网页</title>
</head>

<body>
    <h4>我是一张图片</h4>
    <img src="002.jpg" />
    <h4>alt 替换文本 当图片显示不出来时用文字来替换图片</h4>
    <img src="003.jpg" alt="我显示不出来了，我变成了文字" />
    <h4>title 提示文本 当鼠标放在图片上时显示的文字</h4>
    <img src="002.jpg" title="搞笑图片" />
    <h4>width 给图像设置宽度：</h4>
    <img src="002.jpg" width="200" />
    <h4>height 给图像设置高度：</h4>
    <img src="002.jpg" height="200" />
    <h4>border 给图像设置边框：</h4>
    <img src="002.jpg" border="10" />
</body>

</html>

演示效果：
请添加图片描述

图像标签属性注意点:
在这里插入图片描述

路径

1.相对路径
请添加图片描述
这里的相对指的就是图片相对HTML页面的位置

2.绝对路径
请添加图片描述

7.超链接标签

7.1链接的语法格式 请添加图片描述
属性：

7.2链接的分类

1.外部链接
2.内部链接
3.空链接
4.下载链接
5.超链接
6.锚点链接

实例：

<!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>用VScode创建的第一个网页</title>
</head>

<body>

    <h4>1.外部链接</h4>
    <a href="https://www.baidu.com/" target="blank">百度</a>
    <h4>2.内部链接</h4>
    <a href="003.html" target="blank">我的第二个网页页面</a>
</body>

</html>

<!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>我的VScode的第二个网页页面</title>
</head>

<body>
    <h1>我的VScode的第二个网页页面</h1>
</body>

</html>

展示效果：
请添加图片描述

<h4>3.空链接</h4>
<a href="#">空链接</a>
<h4>4.下载链接 可以是.exe 或者是zip的形式</h4>
<a href="素材.zip">下载文件</a>
<h4>5.超链接 形式可以是文本、图像、表格、音频、视频等形式</h4>
<a href=""><img src="002.jpg" /></a>
<a href="004.mp4"><img src="002.jpg" /></a>
<h4>6.锚点链接 定位到页面的位置</h4>
<h4><a href="#p">    1.图片显示</a></h4>
<h4><a href="#photo">2.图片简介</a></h4>
<h4><a href="#font"> 3.图片样式</a></h4>
<br/><br/><br/><br/><br/>
<h3>图片显示</h3>
<img src="002.jpg" id="p" />
<p><a href="#head">返回顶部</a></p>
<br/>
<h3 id="photo">图片简介</h3> 这是我QQ表情包里的一张图片，被用来写我的第一个网页
<p><a href="#head">返回顶部</a></p>
<br/>
<h3 id="font">图片样式</h3>
图片样式是采用黑白的搞笑图片
<p><a href="#head">返回顶部</a></p>

效果：
请添加图片描述

HTML <base> 元素

<base>标签描述了基本的链接地址/连接目标，该标签作为HTML文档中所有的链接标签的默认链接；

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

HTML <link> 元素

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Wzr-赟空

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5+CSS3学习（一）

什么是HTML？HTML指的是超文本标记语言（Hyper Text Markup Language）HTML并不是编程语言，它的作用是描述网页标记语言是一套标记标签（Markup tag）常用浏览器的内核*国内一般浏览器都会采用Webkit/Blink内核，如360、UC、QQ、搜狗等Web标准Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。为什么需要Web标准优点：让Web的发展前景更广阔内容能被更广泛的设备访问更
复制链接

扫一扫