【01】HTML-（day01）

最新推荐文章于 2024-07-18 17:32:29 发布

卖个几把萌

最新推荐文章于 2024-07-18 17:32:29 发布

阅读量73

点赞数

分类专栏：前端文章标签：前端 html

本文链接：https://blog.csdn.net/qq_42755008/article/details/119309592

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

html骨架

快捷键：输入 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>Document</title>
</head>
<body>   
</body>
</html>

1、html常用标签

1.1排版标签

标题标签h（熟记）

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

段落标签p（熟记）

	<p>文字内容</p>

水平线标签hr(认识)

	<hr/>

换行标签br（熟记）

	<br/>

div和span标签（重点）
div标签：用于布局，上下显示，一行只能显示一个div；
span标签：用于布局，一行可以放多个span

	<div>	</div>
	<span>	</span>

1.2文本格式化标签(熟记！)
在这里插入图片描述

1.3标签属性

	<标签名 属性=“属性值1” 属性=“属性值2”>内容</标签名>
	<手机 颜色=“红色” 大小=“5寸”>内容</手机>

1.4图片标签img（重点）

	<img src="图片url"/>

在这里插入图片描述
1.5 链接标签(重点)
单词缩写： anchor 的缩写 [ˈæŋkə®] 。基本解释锚, 铁锚的

在HTML中创建超链接非常简单，只需用标签把文字包括起来就好。

语法格式：

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

属性作用
href 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target 用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，__blank为在新窗口中打开方式。
注意：

1.外部链接需要添加 http:// www.baidu.com
2.内部链接直接链接内部页面名称即可比如 < a href=“index.html”> 首页
3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

1.6注释标签
在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

简单解释：

注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

语法格式：

<!-- 注释语句 -->     快捷键是：    ctrl + /       或者 ctrl +shift + /

2、路径（重点）

相对路径

在这里插入图片描述

绝对路径（一般不用）

3、扩展

（1）锚点
类似于目录，点目录名，跳到对应地方

	<H2 id="123">文字内容 </H2>
	<!--点下面这个链接就会跳到上面内容处-->
	<a href=“#123”> </a>

（2）base标签

可以设置整体链接打开状态
设置在head中

	<head>
		<!--表示所有链接都以新窗口打开-->
		<base target="_blank">
	</head>

（3）pre预格式化标签

	<pre>  会保留标签中的空格和换行 </pre>

（4）特殊字符

在这里插入图片描述

卖个几把萌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【01】HTML-（day01）

html骨架快捷键：输入 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"
复制链接

扫一扫