day01 初识HTML

最新推荐文章于 2025-04-29 09:37:13 发布

御灵龍

最新推荐文章于 2025-04-29 09:37:13 发布

阅读量145

点赞数

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

本文链接：https://blog.youkuaiyun.com/qq_33852347/article/details/109450328

版权

前端学习专栏收录该内容

1 篇文章

订阅专栏

一、初识HTML

1.1 html骨架标签总结

标签名	定义	说明
< html > < /html>	html标签	页面中最大的标签，称为跟标签
< head>< /head>	文档头部	注意在head标签中我们必须要设置的标签是titile
< titile>< /titile>	文档标题	让页面拥有一个属于自己的网页标题
< body>< /body>	文档主体	元素包含文档的所有内容，页面内容，基本都放在body中

1.2 sublime 快捷键

! ±table 生成html骨架

1.3 页面语言

<!DOCTYPE html>
<!-- <html lang="en"> -->
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>这是第一个html</title>
</head>
<body>
	<h1>第一个标签</h1>
</body>
</html>

指定页面语言，en：英语；zh-CN 汉语设置字符集编码规则

1.4 常用html标签

标题标签 h1 ~~ h6

<p>文本文字</p> 段落标签

<br/> 换行标签

<hr /> 水平线标签

1.4.1 div和span 标签（重点）

div 和 span 没有语义，是网页布局主要的两个盒子

div ：分割，分区；页面由很多div组合成网页

span ：跨度，范围

语法格式：

<div>这是头部 </div>   <span> 今日价格是5元</span>

div 标签，用来布局，但是现在一行只能放一个div
span标签，用来布局，一行可以放很多个span

1.4.2 文本格式化标签（熟记）

标签	显示效果
< b>< /b>< strong>< /strong>	文字以粗体方式显示（xtml推荐使用strong）
< i></ i>和< em>< /em>	文字以斜体方式显示（xhtml推荐使用em）
< s>< /s> 和< del>< /del>	文字以加删除线方式显示
< u>< /u> 和 < ins>< /ins>	文字以加下划线方式显示

1.4.3 图像标签 img（重点）

语法格式：

<img src="图像url" />

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素（HTML不支持% 页面百分比）	设置图像的宽度
height	像素（XHTML不支持%页面百分比）	设置图像的高度
border	数字	设置图像边框的宽度

border 后面会用css来做！！！

1.4.4 链接标签（重点）

语法格式：

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

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

注意：

外部链接，需要添加 http://www.baidu.com
内部链接，直接链接内部页面名称即可，比如首页
如果没有确定的链接目标，用 ‘#’ 代替
不仅可以创建文本超链接，在网页中各种网页元素，如图像，表格，音频，视频等都可以添加超链接。

1.5 路径（重点，难点）

相对路径： 从代码所在的这个文件出发，去寻找我们的目标文件，而我们所说的上一级，下一级，同一级，简单来说就是图片位于HTML页面的位置。

1.6 base标签

base可以设置整体的链接的打开状态（是在当前窗口打开，还是在新窗口打开）
base 写到标签里面
把所有的链接，都默认添加 target="_blank"

1.7 预格式化文本 pre 标签

 标签可定义预格式化的文本。

<body>
	春眠不觉晓，
	处处闻啼鸟。
	夜来风雨声，
	花落知多少。
</body>

显示结果：

春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。

加上 pre 标签

<body>
	
	<pre>
	春眠不觉晓，
	处处闻啼鸟。
	夜来风雨声，
	花落知多少。
	</pre>
</body>

显示结果：

春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。

所为与格式化文本，按照我们预先写好的文字格式来显示页面，保留空格和换行。

day01 初识HTML

一、 初识HTML

1.1 html骨架标签总结

1.2 sublime 快捷键

1.3 页面语言

1.4 常用html标签

1.4.1 div和span 标签（重点）

1.4.2 文本格式化标签（熟记）

1.4.3 图像标签 img（重点）

1.4.4 链接标签（重点）

1.5 路径（重点，难点）

1.6 base标签

1.7 预格式化文本 pre 标签

一、初识HTML