HTML认知--黑马程序员-web前端零基础

最新推荐文章于 2023-08-20 10:38:02 发布

羊羊的代码笔记本

最新推荐文章于 2023-08-20 10:38:02 发布

阅读量141

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_73579310/article/details/128362819

版权

1.1web标准

结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式（如颜色、大小等）
行为	JavaScript	网页模型的定义与页面交互

1.2.1HTML的概念

HTML（超文本标记语言）是一种用于创建网页的标准标记语言。 HTML 不需要编译，可以直接由浏览器执行，它的解析依赖于浏览器的内核。它不是一种编程语言，而是一种标记语言。

1.2.2HTML的骨架

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>    
</body>
</html>

<!DOCTYPE html> 是我们的文档声明头。他告诉了浏览器，本文档处理的是 HTML 文档。html 标签即根元素，此处表示文档的开始。head 标签是网页的头部，设置网页的相关信息。title 标签设置网页标题。body 标签定义文档的主体，也就是我们的主要内容。

1.2.3VScode的使用

当我们安装好vscode后，新建文件，没有HTML的骨架，我们可以输入“！”按回车或者Tab键

在HTML文件的标题如果出现一个小原点，就说明没有保存

运行快捷键：Alt+B 如果不能运行就需要去“扩展”处安装一个“open in browser”的插件

1.3.1注释

注释的快捷键：ctrl+/

1.3.2标签的结构

标签的分类：单标签和双标签

标签的关系：父子关系/兄弟关系

<strong>文字加粗</strong>
开始标签   内容   结束标签

1.3.3标题标签

一共6个独占一行

1.3.4段落标签

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

1.3.5换行标签

<br>

1.3.6水平线标签

<hr>

1.3.7文本格式化标签

标签	说明	标签（突出重要的）
b	加粗	strong
u	下划线	ins
i	倾斜	em
s	删除线	del

1.4.1图片标签

<img src="图片路径" alt="图片未正常显示时的提示文字">

要想标签展示我们想要效果，需要借助标签的属性进行设置（src alt等等都是属性）

属性之间要用空格隔开

路径是“相对路径”

1.4.2音频标签

 <audio src="路径" controls></audio>

属性名	功能
src	音频的路径
controls	显示播放的控件（就是那个好看的进度条）
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

1.4.3视频标签

<video src="路径" controls></video>

属性名	功能
src	音频的路径
controls	显示播放的控件（就是那个好看的进度条）
autoplay	自动播放（谷歌浏览器需要配合muted实现静音播放）
loop	循环播放

1.4.4链接标签

 <a href="http://www.baidu.com/" target="_self">百度一下</a>

target	目标网页的打开形式
_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

target="_self"和target="_parent"以及target="_top"三种方式的显示方式几乎相同。