初识前端HTML

最新推荐文章于 2024-09-21 15:02:10 发布

步步生花@苏殿主

最新推荐文章于 2024-09-21 15:02:10 发布

阅读量359

点赞数

分类专栏： HTML+CSS基础学习文章标签：前端 html5

本文链接：https://blog.csdn.net/sjp991012/article/details/123495100

版权

HTML+CSS基础学习专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、前端初了解

1、认识网页

网页由文字、图片、音频、视频、超链接组成
通过浏览器可以将代码转换成网页

2、浏览器

五大浏览器：IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）
不同浏览器渲染引擎不同，解析效果存在差异
前端工程师日常推荐使用谷歌浏览器

3、web标准

结构：HTML–>页面元素
表现：CSS–>页面样式
行为：JavaScript–>页面交互的动态效果

二、HTML初体验

1、HTML的感知

HTML (Hyper Text Markup Language) 超文本标记语言
文本变粗案例，详情如下：
a. 新建文本文档，命名为 "文本加粗.txt"；
b. 将后缀名 " .txt " 改为 " .html "；
c. 弹框询问是否更改，点击“确认”；
d. 将文件用记事本打开，输入“文本加粗”；
e. 保存之后用浏览器打开，将会看到页面有“文本加粗四个字”；

f. 再次用记事本打开，给 “文本加粗” 加上 strong标签并保存，如图所示：

g. 最后用浏览器打开，就会看到文本加粗后的效果啦！

2、HTML骨架结构

html标签：网页整体
head标签：网页头部
body标签：网页身体
title标签：网页标题

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

3、开发工具

文本编辑器也可以编写源代码，但效率低
开发工具有许多：Visual Studio Code、Webstorm、Sublime、Dreamweaver、Hbulider
VS Code 速度快、体积小、插件多
用VS Code打开前面建的【文本加粗.html】文件，清空内容，在里面输入英文 “!” 并回车，便出现下图中的内容。显而易见，VS Code已经帮你把骨架搭好了！

三、语法规范

1、HTML的注释

帮助开发人员理解代码
浏览器执行代码时会忽略所有注释
在VS Code中，快捷键为：ctrl + /

2、HTML标签的构成

由<、>、/、英文单词或字母组成，由<>括起来的英文单词或字母成为标签名
常见标签由两部分组成，称为双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
少数标签有一部分组成，称为 单标签。不包裹内容
标签结构如图所示：

3、HTML标签的关系

父子关系（嵌套关系）

<head>
    <title></title>
</head>

兄弟关系（并列关系）

<head>
</head>
<body> 
</body>

四、HTML标签学习

1、排版标签

（1）标题标签

1~6级，重要程度依次递减
文字都会加粗、变大，从h1–>h6文字逐渐减小
独占一行
拓展：在VS Code中，快捷键 ctrl + D（eg : 选择开始标签h1中的"1"，点击快捷键，1级标题中的“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>Document</title>
</head>
<body>
    <h1>1级标题</h1>  <!-- 一级标题 --> 
    <h2>2级标题</h2>  <!-- 二级标题 -->
    <h3>3级标题</h3>  <!-- 三级标题 -->
    <h4>4级标题</h4>  <!-- 四级标题 -->
    <h5>5级标题</h5>  <!-- 五级标题 -->
    <h6>6级标题</h6>  <!-- 六级标题 -->
</body>
</html>

代码运行效果图如下：
在这里插入图片描述

（2）段落标签

段落之间存在间隙
独占一行

    <p>我是一段文字</p>
    <p>段落之间存在间隙</p>
    <p>段落独占一行</p>

代码运行效果图如下：

在这里插入图片描述

（3）换行标签

单标签
使文字强制换行

 春眠不觉晓，<br>处处闻啼鸟。

代码运行效果图如下：
在这里插入图片描述

（4）水平线标签

单标签
页面中显示一条水平线

    下面是一条横线
    <hr>
    上面是一条横线

代码运行效果图如下：
在这里插入图片描述

2、文本格式化标签

strong、ins、em、del 比b、u、i、s 更突出重要性的强调语境

标签	说明
b、strong	加粗
u、 ins	下划线
i、em	倾斜
s、del	删除线

    <b>b标签加粗</b>
    <strong>strong标签加粗</strong><br>
    <u>u标签下划线</u>
    <ins>ins标签下划线</ins><br>
    <i>i标签倾斜</i>
    <em>em标签倾斜</em><br>
    <s>s标签删除线</s>
    <del>del标签删除线</del>

代码运行效果图如下：
在这里插入图片

3、媒体标签

（1）图片标签

<img src="" alt="">
单标签
img标签展示对应的效果，需要借助标签属性进行设置
标签属性写在开始标签内部，属性之间用空格隔开，没有顺序之分
src属性：目标图片的路径
alt属性：替换文本（当图片加载失败时，才显示 alt 的文本）
title属性：提示文本（当鼠标悬停在图片上时，才会显示文本；可用于其它标签）
width、height属性：宽度与高度（如果设置了其中一个，另一个会等比例缩放；如果同时设置且设置不当，可能会出现变形）

    <img src="./a.jpeg" ><!-- 横线上方第一个 -->
    <img src="../a.jpeg" alt="我是小刺猬"><hr><!-- 横线上方第二个 -->
    <img src="./a.jpeg" alt="我是小刺猬" title="title是提示文本" width="" height="200"> <!-- 横线下方第一个 -->
    <img src="./a.jpeg" alt="我是小刺猬" title="title是提示文本" width="230" height=""><!-- 横线下方第二个 -->
    <img src="./a.jpeg" alt="我是小刺猬" title="title是提示文本" width="300" height="100"><!-- 横线下方第三个 -->
    <img src="./a.jpeg" alt="我是小刺猬" title="title是提示文本" width="200" height="190"><!-- 横线下方第四个 -->

代码运行效果图如下：

在这里插入图片描述

（2）路径

分为绝对路径（了解）和相对路径（常用）
绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

a. 盘符开头：D:\day01\images\1.jpg
b. 完整的网络地址：https://www.runoob.com/

相对路径：从当前文件开始出发找目标文件的过程

a. 当前文件：当前的html文件
b. 目标文件：需找到的图片
c. 同级目录：当前文件和目标文件在同一目录中,相关代码：<img src="目标图片.gif">或<img src="./目标图片.gif">
d. 下级目录：目标文件在下级目录中,相关代码：<img src="images/目标图片.gif">或<img src="./images/目标图片.gif">
e.上级目录：目标文件在上级目录中,相关代码：<img src="../目标图片.jpg">

    <img src="D:\Users\SU\Pictures\Saved Pictures\1.jpeg" width="200" height="100"><!-- 绝对路径 -->
    <img src="a.jpeg" width="210" height="200"><!-- 相对路径同级目录 -->
    <img src="./a.jpeg"  width="210" height="200"> <!-- 相对路径同级目录 -->
    <hr>
    <img src="./images/9.jpeg"  width="230" height=""><!-- 相对路径下级目录 -->
    <img src="./images/9.jpeg"  width="230" height=""><!-- 相对路径下级目录 -->
    <img src="../7.jpg"  width="300" ><!-- 相对路径上级目录 -->
    <img src="../Pictures/person.png"  width="200" height="190"><!-- 综合 -->

代码运行效果图如下：
在这里插入图片描述

（3）音频标签

音频标签目前支持三种格式：MP3、Wav、Ogg
常见属性：

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

    <audio src="./Allen老师叫早1.mp3"></audio><!-- 不显示控件 -->
    <audio src="./Allen老师叫早1.mp3" controls autoplay loop></audio><!-- 显示控件、循环播放-->

（4）视频标签

视频标签目前支持三种格式：MP4、WebM、Ogg
常见属性：

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需配合muted实现静音播放）
loop	循环播放

    <video src="./1.mp4"></video><!-- 不显示控件 -->
    <video src="./1.mp4"  autoplay muted loop></video><!-- 静音、自动循环播放-->
    <video src="./1.mp4" controls autoplay loop></video><!-- 显示控件、循环播放-->

4、链接标签

点击之后，从一个页面跳转到另一个页面
称呼：a标签、超链接、锚链接
双标签，内部可以包裹内容

属性名	功能
href	目标页面路径/地址
target	_self 默认值，在当前窗口跳转； _balnk 在新窗口跳转

    <a href="https://www.baidu.com/" target="_blank">跳转到百度</a> <!-- 在新窗口跳转 -->
    <a href="./scenic.html" target="_self">去scenic页面</a> <!-- 在当前窗口跳转 -->
    <a href="#">空链接</a> <!-- 空链接 -->