day1 html标签（上）

最新推荐文章于 2024-06-20 11:15:00 发布

weixin_39656383

最新推荐文章于 2024-06-20 11:15:00 发布

阅读量285

点赞数

分类专栏： # html-css 前端

本文链接：https://blog.csdn.net/weixin_39656383/article/details/106755274

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

html-css

4 篇文章 0 订阅

订阅专栏

1. HTLM

超文本标记语言HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
参考：
视频

1.1 web标准的构成

结构：对网页元素进行整理和分类，html。
表现：设置网页元素的版式、颜色等外观样式，css。
行为：网页模型的定义与交互，javascript。

1.2 html语法规范

语法规范：

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


<br />

所有的标签都应该包含在<>中间，而且成对出现。
<>开始标签。</>结束标签。
有些标签是单个标签。br /

标签关系

标签关系两类：包含关系和并列关系。
在这里插入图片描述
参考：
视频

1.3 html基本结构标签

<html>
   <head>
	<title> 第一个页面</title>
    </head>
    <body>
       键盘敲烂, 工资过万
    </body>
</html>

在这里插入图片描述

1.4 开发工具

vscode

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我利用vscode创建的第一个页面</title>
</head>
<body>
    写代码是一件非常快乐的事情  happy
</body>
</html>

推荐的插件：

a) 文档类型声明标签

告诉浏览器使用哪种html版本，声明有助于浏览器中正确显示网页。

必须写在文档开头。
它不是html标签。

b) lang

用来定义当前文档显示的语言。

c) charset

是多个字符的集合，以便计算机能够识别和存储各种文字。
对于中文网页需要使用声明编码，否则会出现乱码。
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 UTF-8。
参考：
视频

1.5 html常用标签（上）

a) 标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>标题标签</h1>
    <h1>标题一共六级选,</h1>
    <h2>文字加粗一行显。</h2>
    <h3>由大到小依次减，</h3>
    <h4>从重到轻随之变。</h4>
    <h5>语法规范书写后，</h5>
    <h6>具体效果刷新见。</h6>
    　　        ------pink老师

</body>
</html>

html提供了6个等级的网页标题。每个标题都独占一行。
在这里插入图片描述

b) 段落和换行标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>我是段落一 <br /> 换行 </p>

<p>我是段落二</p>
</body>
</html>

段落标签p
换行标签br

c) 案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>体育新闻</title>
</head>
<body>
        <h1>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0</h1>
        <h4>数据统计：水花兄弟合砍61分</h4>
       <p> 库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。</p>
        
       <p>汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。</p>
        
        <h4>兄弟对决升级：小库里给哥哥造成压力</h4>
        <p> 库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。</p>
        
        <p>但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。</p>
        
       <p> 作者: pink老师 <br />
            2019-8-8</p>
</body>
</html>

参考：
视频

d) 文本格式化标签

粗体、斜体、下划线等。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文本格式化标签</title>
</head>
<body>
    我是<strong>加粗</strong>的文字
    我是<b>加粗</b>的文字
    我是<em>倾斜</em>的文字
    我是<i>倾斜</i>的文字
    我是<del>删除线</del>
    我是<s>删除线</s>
    我是<ins>下划线</ins>
    我是<u>下划线</u>
</body>
</html>

效果：
在这里插入图片描述

e) div和span标签

没有语义，用来装内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>div和span标签</title>
</head>
<body>
    <div>我是一个div标签我一个人单独占一行</div>
    <div>我是一个div标签我一个人单独占一行</div>
    <span>百度</span>
    <span>新浪</span>
    <span>搜狐</span>
</body>
</html>

div—division分割。一行只能放一个div。
span—跨度。一行可以放多个span。

f) 图像标签和路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图像标签</title>
</head>
<body>
   <h4> 图像标签的使用:</h4>
   <img src="img.jpg"/>
   <h4> alt 替换文本 图像显示不出来的时候用文字替换:</h4>
   <img src="img1.jpg" alt="我是pink老师"/>
   <h4> title 提示文本 鼠标放到图像上,提示的文字:</h4>
   <img src="img.jpg" title="我是pink老师思密达"  alt="我是pink老师"/>

   <h4> width 给图像设定宽度:</h4>
   <img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达" width="500"/>
   <h4> height 给图像设定高度:</h4>
   <img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达"  height="100"/>
   <h4> border 给图像设定边框:</h4>
   <img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达"  width="500" border="15"/>

</body>
</html>

src是img标签的必须属性，用于指定图像的文件名和路径。
图像标签是一个单标签。
图像标签的其他属性：
在这里插入图片描述
alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

注意点：
在这里插入图片描述

路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <img src="img.jpg" />  #同一级路径
    <img src="images/img.jpg" />  #下一级路径

	<img src="C:\Users\apple\Desktop\前端基础第一天-HTML\案例\img.jpg" />
    <img src="http://www.itcast.cn/2018czgw/images/logo.png" />  # 绝对路径
</body>
</html>

h) 超链接标签

语法格式：

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>超链接标签</title>
</head>
<body>
    <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="_blank"> 腾讯</a>
    target 打开窗口的方式  默认的值是 _self 当前窗口打开页面  _blank 新窗口打开页面
    <a href="http://www.itcast.cn" target="_blank">传智播客</a>
    
    <h4>2.内部链接: 网站内部页面之间的相互链接</h4>
    <a href="gongsijianjie.html" target="_blank">公司简介</a>
    
    <h4>3.空链接:#</h4>
    <a href="#">公司地址</a>
   
    <h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
    <a href="img.zip">下载文件</a>
    
    <h4>5.网页元素的链接</h4>
    <a href="http://www.baidu.com"><img src="img.jpg"/></a>
</body>
</html>

锚点链接：
源码

1.6 html中的注释和特殊字符

a) 注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 我是注释 -->	# 注释的格式
    讲&nbsp;&nbsp;&nbsp;&nbsp;究
    <!-- <p> 是一个段落标签 -->
     &lt; p  &gt;   是一个段落标签
</body> 
</html>

b) 特殊字符

在这里插入图片描述

综合案例：
源码

weixin_39656383

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
day1 html标签（上）

1. HTLM超文本标记语言HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做 web 页面参考：https://www.bilibili.com/video/BV14J4114768?p=41.1 web标准的构成结构：对网页元素进行整理和分类，html。表现：设置网页元素的版式、颜色等外观样式，css
复制链接

扫一扫

专栏目录