DAY1（02-HTML标签（上））

最新推荐文章于 2024-07-19 11:00:40 发布

ZZ --瑞 hopeACMer

最新推荐文章于 2024-07-19 11:00:40 发布

阅读量186

点赞数 1

分类专栏： Web前端学习路文章标签： html5 css3 javascript

本文链接：https://blog.csdn.net/qq_44134712/article/details/115415789

版权

Web前端学习路专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Web标准的构成：结构（HTML），表现（CSS），行为（Javascript）。

第一章 HTML标签

目标：能够说出标签的书写注意规范；能够写出HTML骨架标签；能够写出超链接标签；能够写出图片标签并说出alt和title的区别；能够说出相对路径的三种形式。

2. HTML基本结构标签

2.1 第一个HTML网页

每个网页都有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。

HTML页面也称为HTML文档。

<html>
    <head>
        <title>我的第一个页面</title>
    </head>
    <body>
        你我之间，黑马洗练，月薪过万，一飞冲天
    </body>
</html>

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

HTML文档的后缀名必须是.html或.htm，浏览器的作用是读取HTML文档，并以网页的形式显示出它们。此时，用浏览器打开这个网页，我们就可以浏览我们写的第一个HTML文件了。

3. 开发工具

我用的是最后一个VS Code。

3.1 VS Code 的使用

1. 双击打开软件。

2. 新建文件（Ctrl + N）。

3. 保存（Crtl + S），注意移动要保存为.html文件。

3. Crtl + 加号键/减号键可以放大/缩小视图。

5. 生成页面骨架结构。

输入！按下Tap键。

6. 利用插件open in browser在浏览器中浏览页面：单击鼠标右键，在弹出出口总点击“Open in Default Browser”。

3.2 VS Code 插件安装

3.2 VSCode工具生成骨架标签新增代码

1. <!DOCTYPE>标签

文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页

注意：

1）必须在最前面

2）它不是一个HTML标签

2. lang语言

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

1）en为英语

2）zh-CN定义语言为中文

3. charset字符集

以便计算机能够识别和存储各种文字

在<head>标签里，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码

4. HTML常用标签

4.1 标签语义

学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是标签的含义。

4.2 标题标签<h1> - <h6>(重要)

HTML提供了6个等级的网页标签。

<h1>我是一级标签</h1>

h是 head的缩写，意为头部标题。

标签语义：作为标题使用，依据重要性逐级递减。

特点：

1）加了标题的文字会变得加粗，字号也会依次变大。

2）一个标题独占一行。

口诀：

    <h1>标题标签</h1>

    <h1>标题一共六级选,</h1>

    <h2>文字加粗一行显。</h2>

    <h3>由大到小依次减，</h3>

    <h4>从重到轻随之变。</h4>

    <h5>语法规范书写后，</h5>

    <h6>具体效果刷新见。</h6>

    　　        ------pink老师

4.3 段落和换行标签

1. 段落标签

<p>标签用于定义段落，它可以将整个网页分为若干个段落。

<p>我是一个段落标签</p>

标签语义：可以把HTML文档分割为若干段落。

特点：

1）文本在一个段落中会根据浏览器窗口的大小自动换行。

2）段落和段落之间保有空隙。

2. 换行标签

<br />

标签语义：强制换行。

特点：

1）<br />是个单标签。

2）<br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

课堂案例：体育新闻

    <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>

4.4 文本格式化标签

文字设置粗体，斜体或下划线效果

标签语义：突出重要性，比普通文字更重要。

我是<strong>加粗</strong>的文字 
我是<b>加粗</b>的文字 
我是<em>倾斜</em>的文字 
我是<i>倾斜</i>的文字 
我是<del>删除线</del>的文字 
我是<s>删除线</s>的文字 
我是<ins>下划线</ins>的文字 
我是<u>下划线</u>的文字

4.5 <div>和<span>标签

没有语义，单纯的一个盒子。

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

div是division，分割、分区，span 跨度。

特点：

1）<div>标签用来布局，但是现在一行只能做一个<div>，大盒子。

2）<span>标签用来布局，一行上可以多个<span>，小盒子。

4.6 图像标签和路径（重点）

1. 图像标签

在HTML标签中，<img>标签用于定义HTML页面中的图像。

<img src="图像URL" />

src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

所谓属性：这个图像标签的特性。

图像标签的其它属性：

    <h4> 图像标签的使用: </h4>
    <img src="img.jpg" />
    <h4> alt 替换文本 图像显示不出来的时候用文字替换: </h4>
    <img src="img1.jpg" alt="我是pink老师" />
    <h4> title 提示文本 鼠标放到图像上，提示的文字: </h4>
    <img src="img.jpg" alt="我是pink老师" title="我是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" />

图像标签属性注意点：

1）图像标签可以拥有多个属性，必须写在标签名的后面。

2）属性之间不分先后顺序，标签名与属性、属性与属性之间均已空格分开。

3）属性采取键值对的格式，即key=“value”的格式，属性=“属性值”。

重点掌握点：

1）图像标签哪个属性是必须要写的。

2）图像标签的alt和title属性的区别

2. 路径（前期铺垫知识）

实际工作中需要一个文件夹管理。

目录文件夹：里面放做页面所需要的相关材料，比如HTML文件、图片等。

根目录：打开目录文件夹的第一层就是根目录。

2）VSCode打开目录文件夹

路径可分为：

1）相对路径

以引用文件所在位置为参考基础，而建立出的目录路径。

2）绝对路径

指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径。

例如，“D：\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”.

4.7 超链接标签（重点）

<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

1. 链接的语法格式

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

两个属性的作用如下：

2. 链接的分类

1) 外部链接，例如<a href="http://www.baidu.com">百度</a>。

2）内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如<a href="index.html">首页</a>。

3）空链接：如果当时没有确定链接目标时，<a href="#">首页</a>。

4）下载链接：如果合法里面地址是一个文件或者压缩包，会下载这个文件。

5）网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等可以添加超链接。

6）锚点链接：点我们点击链接，可以快速定位到页面中的某个位置。

●在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>。

●找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第二集介绍</h3>。

5. HTML中的注释和特殊字符

5.1 注释

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

HTML中的注释以""结束。

快捷键：Ctrl+ /

5.2 特殊字符

在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来代替。

重点记住：空格、大于号、小于号这三个，其余的使用很少，如果需要回头查阅即可。

综合案例

通过综合案例，主要复习：

1. 目录文件夹

2. 今日所学标签

3. 路径

4. 锚点链接

ZZ --瑞 hopeACMer

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
DAY1（02-HTML标签（上））

Web标准的构成：结构（HTML），表现（CSS），行为（Javascript）。第一章 HTML标签目标：能够说出标签的书写注意规范；能够写出HTML骨架标签；能够写出超链接标签；能够写出图片标签并说出alt和title的区别；能够说出相对路径的三种形式。目录1 HTML语法规范2 HTML基本结构标签3 开发工具4 HTML常用标签5 HTML中的注释和特殊字符1.HTML语法规范1.1 基本语法概述1. HTML标签是由尖括号包围的关键词，例如&l...
复制链接

扫一扫