DAY1（02-HTML标签（上））
Web标准的构成：结构（HTML），表现（CSS），行为（Javascript）。
第一章 HTML标签
目标：能够说出标签的书写注意规范；能够写出HTML骨架标签；能够写出超链接标签；能够写出图片标签并说出alt和title的区别；能够说出相对路径的三种形式。
目录
第一章 HTML标签
1. HTML语法规范
2. HTML基本结构标签
3. 开发工具
4. HTML常用标签
5. HTML中的注释和特殊字符
目录
1 HTML语法规范
2 HTML基本结构标签
3 开发工具
4 HTML常用标签
5 HTML中的注释和特殊字符
1. HTML语法规范
1.1 基本语法概述
1. HTML标签是由尖括号包围的关键词，例如<html>。
2. HTML标签通常是成对出现的，例如<html>和</html>，我们成为双标签。标签中第一个标签是开始标签，第二个结束标签。
3. 有些特殊的标签必须是单个标签（极少情况），例如<br />，我们称为单标签。
1.2 标签关系
双标签关系可以分为两类：包含关系和并列关系。
1. 包含关系：
<head><title> </title>
</head>2. 并列关系：
<head> </head>
<body> </body>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. 路径（前期铺垫知识）
1）目录文件夹和根目录：
实际工作中需要一个文件夹管理。
目录文件夹：里面放做页面所需要的相关材料，比如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. 锚点链接
DAY1（02-HTML标签（上））相关推荐
- 02 【字符实体与语义标签(上)】
2.字符实体与语义标签上 2.1字符实体 有些时候,在HTML中不能直接书写一些特殊符号,如: 多个连续的空格(在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格) 比如字母两侧的大于小于号( ...
- 02HTML标签(上)
1.HTML的语法规范 HTML标签是由尖括号包围的关键词,例如. HTML标签通常是成对出现的,例如<html>和</html>,我们称为双标签.标签对中的第一个标签是开始标 ...
- R语言ggplot2可视化强制所有的X数值都显示在X轴标签上：x-axis labels with all x-axis values
R语言ggplot2可视化强制所有的X数值都显示在X轴标签上:x-axis labels with all x-axis values 目录
- vue的自定义标签tag是什么意思啊_好好的衣服为什么洗一次就废，服装标签上的图标究竟是什么意思？...
(图片来源:CNET) 常常有人抱怨衣服没洗几次,就变形掉色.你有没有想过,可能是你清洗方法错了! 衣服上标签不仅仅是成分介绍,它还是衣服的说明书,上面详细地告诉了你该如何保养洗护.而忽略这些图标,则 ...
- html自定义属性冒号,vue中标签上的属性加冒号与不加冒号的区别
今天vue的项目中,因为很多结构一样的条目,所以想到了使用循环.但是问题来了,每个条目的图标不一样,这就需要在循环中依次添加不同的字体图标的类名.直接使用class来操作,结果没有报错,但是图标也没有 ...
- java鼠标经过时变色_将鼠标悬停在标签上时，鼠标指针会变为手形
您可能在某些浏览器中获得手形光标的原因是因为大多数浏览器中标签元素的主要用途之一是为表单输入元素提供可单击的描述 . 例如,这是 元素的典型用法: I agree to these terms 在大多 ...
- 超链接href属性_如何使用标签上的HREF属性制作HTML超链接
超链接href属性 A website is a collection of web pages. And these pages need to be linked or connected by ...
- [html] 一个标签上同时出现三个或多个class属性，请问它的渲染顺序是怎样的？
[html] 一个标签上同时出现三个或多个class属性,请问它的渲染顺序是怎样的? 按照css定义的顺序从前往后渲染,后定义的同类属性覆盖前面定义的. 个人简介 我是歌谣,欢迎和大家一起交流前后端知 ...
- crx文件里面的html文件,javascript – Chrome扩展程序：在crx文件中打开html,标签上没有图标...
您好我正在开发一个简单的chrome扩展,它通过在扩展名的.crx目录中打开index.html来替换当前的默认新标签页. 目前,新的标签页已经使用新的index.html页面进行了修改,但是标签上没 ...
- xpath 取标签下所有文字内容_如何理解葡萄酒标签上的所有内容(下)
上期我们提到了旧世界葡萄酒酒标,这一期主要给大家介绍德国酒标以及新世界酒标. 德国酒标识别技巧 Prädikatswein(代表优质葡萄酒),其含量范围从最不成熟的(kabinett)到最成熟的(Tr ...
最新文章
- 40种为网页设计师准备的高品质和免费的多媒体PSD文件
- Ajax实现局部数据交互的一个简单实例
- 使用identity+jwt保护你的webapi（三）——refresh token
- Docker(4)-容器互联与端口映射
- js中 var a= b || c；
- 循迹传感器（TCRT5000）的介绍以及使用（STM32）
- Redis学习总结（10）——缓存雪崩、缓存穿透、缓存并发、缓存预热、缓存更新、缓存降级、缓存算法的概念及解决思路总结
- java enum转ini_JAVA中用XML实现INI文件格式的解决方
- AttributeError:type object ‘TFLiteConverterV2 ‘has no attribute ‘form_keras_model_file ‘
- 带你理清：ROS机器人导航功能实现、解析、以及参数说明
- 中兴F450电信光猫改桥接模式
- python爬虫模式_python爬虫的入门试炼
- 首个中文开源扩散模型！中文AI艺术时代即将开启（IDEA封神榜团队）
- iOS开发 设置状态栏字体颜色
- [BUGKU] [MISC] 爆照
- 聊聊实时音视频中的技术难点：回声消除+噪声消除
- vscode的下载、安装
- 网络分层，图，易懂--对应 应用层、数据传输层、网络层、数据链路层
- 豆瓣电台WP7客户端 开发记录1
- 转变为一维向量的flatten（）操作