第一天

最新推荐文章于 2024-09-10 14:15:01 发布

一个先令儿

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量108

点赞数

分类专栏：黑马学习文章标签： html

本文链接：https://blog.csdn.net/weixin_51185397/article/details/109044878

版权

黑马学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第一天

HTML：超文本标记语言（Hyper Text Markup Language）

1.常用浏览器及内核：

IE——Trident
FireFox—— Gecko
Safari ——Webkit
Chrome / Opera ——Blink（Blink 其实是 Webkit 的分支）
其中谷歌Chrome浏览器是开发中必备的浏览器

2.Web标准的构成

结构——HTML——元素的结构和内容（最重要）
表现——CSS——元素的外观和位置
行为——JavaScript——交互

3.HTML的基本结构标签

<html>——根标签 
<head>——头部
<title> 页面标题显示的文字</title>——页面标题
</head>
<body>页面主体内容</body>——身体
</html>

4.VSCode的基本骨架

英文状态下的 !+回车/ !+Tab时自动生成骨架标签
其中：

1.<!DOCTYPE html> 是声明标签 表示当前文档是HTML5
2.<html lang=" "> 用来定义当前文档显示的语言 包括英文:en 中文：zh-CN
3.charset="UTF-8" 表示字符集用万国码

5.HTML的基本标签

1.标题标签

<h1>标题内容</h1>~<h6>标题内容</h6>（标题独占一行 ）

重要性依次递减字号依次递减
2.段落标签

<p>段落内容</p>

特点：
是双标签，段落内容包含在开始标签和结束标签之间；
文本在一个段落中会根据浏览器窗口的大小自动换行；
段落和段落之间有一定的空隙。
3.换行标签

<br>（单标签）

特点：
是个单标签；
换行后只是另起一行，不像 p 标签会有明显的间距。
注意：浏览器在显示页面时，会把 HTML 文件中多个空格或换行合并成一个空格显示。如果想显示多个空格需要用到&nbsp；空格标签（后面会提到）
4.本文格式化标签
文本格式化标签其中strong 、 em 、 del 、 ins 语义更清晰、更强烈。更加推荐使用。
5.div和span标签
div 和 span 没有语义，是用来布局的盒子
其中div是大盒子，一行只能有一个
span是小盒子，一行可以放多个
6.图片标签

<img src=" ">

图片标签的属性书写规范：<标签名属性名1=“属性值1” 属性名2=“属性值2”>
注意：1.属性之间要用空格键隔开
2.宽和高不需要同时指定，指定一个图片会自动等比例缩放

7.链接标签

<a href="跳转目标" target="窗口打开方式">文本或图像</a>

作用：从一个页面链接跳转到另一个页面或者页面的其他位置。
其中：
href ：目标位置
target ：窗口打开方式:
1. _self （默认）在当前窗口打开
2._blank 在新窗口中打开链接标签的 href 属性重要，指定链接跳转的目标位置。

1.外部链接，跳转到其他网站，跳出当前网站；


参考代码：<a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a>

2.内部链接，网站内部页面之间的相互链接，可以使用相对路径。

参考代码： <a href="./09-相对路径.html">点我啊</a>

3.空链接，开发过程中，还不能确定链接目标时可以暂时使用空链接。

参考代码：<a href="#">我是空链接</a>

注意：空链接会重新刷新页面。
4.下载链接，如果 href 的地址是一个浏览器默认不支持的文件类型，就会下载。（多数都是压缩包文件的下载）

参考代码：<a href="123.zip">我是下载链接</a>

5.锚点链接
作用：锚点链接可以实现页面内跳转。
语法：href=#id

参考代码：<a href="#01">第1集</a>
<h3 id="01">第1集</h3>

8.注释标签和特殊字符
注释标签的快捷键：ctrl + /
（注释是给程序员看的，可以帮助程序员阅读和理解代码，注释不会显示在页面中）
特殊字符：


1.空格 &nbsp; ： no break space 
2.大于号 &gt; ： greater than 
3.小于号 &lt; ： less than

目录文件夹：就是普通文件夹，可以保存多个文件和其他文件夹；
网站根目录：一个网站项目的第一层文件夹，保存所有网站需要的网页和素材。

7.相对路径与绝对路径

相对路径：以文件所在位置为参考基础建立的目录路径。
分为同级上一级与下一级三种
其中同级的参考代码如下：

<img src="./img.jpg" alt="" width="200" />

下一级的参考代码如下：

<img src="./images/img.jpg" alt="" width="200" />

上一级的参考代码如下：

<img src="../images/img.jpg">

如果多次上级文件夹重叠只需要多次属于…/即可，列如：

<img src="../../../image1/image2/image3/a.jpg">

注意：以./开始利用提示寻找路径更加快捷准确
绝对路径；文件或文件夹的绝对位置，能够直接定位。（几乎不使用）
使用图片代码时<img src="图片在网页中的绝对地址">可以使用图片在网站中的绝对地址，但需要联网。

8.VSCode快捷键

vscode对的快捷键

9.Chrome谷歌的快捷键

谷歌的快捷键

一个先令儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一天

第一天HTML：超文本标记语言（Hyper Text Markup Language）1.常用浏览器及内核：IE——TridentFireFox—— GeckoSafari ——WebkitChrome / Opera ——Blink（Blink 其实是 Webkit 的分支）其中谷歌Chrome浏览器是开发中必备的浏览器2.Web标准的构成结构——HTML——元素的结构和内容（最重要）表现——CSS——元素的外观和位置行为——JavaScript——交互3.HTML的基本结构标签
复制链接

扫一扫