Web前端入门

二、HTML标签
- （一）学习目标
- （二）HTML语法规范
- （三） HTML基本结构标签
- （四）开发工具
- （五） HTML常用标签
- - 1、语义标签：
  - 2、标题标签(重要)：
  - 3、段落和换行标签(重要)：
  - 4、文本格式标签：
  - 5、div和span标签：
  - 6、图像标签（重要）
  - 7、超连接标签
- （六）HTML中的注释和特殊字符
- - 1、注释
  - 2、特殊字符

二、HTML标签

（一）学习目标

（二）HTML语法规范

1、所有标签由尖括号加关键词组成，如<html >。
2、双标签：大部分情况下标签成对出现。<html></html>,其中<html>为开始标签，</html>为结束标签，多一个/。
双标签关系分为包含关系和并列关系。

3、单标签极少情况，单标签的结尾加上/如<br />。

（三） HTML基本结构标签

1、概念

/2、制作第一个网页
txt中编辑如下内容，另存为.html文件，并用浏览器打开。

（四）开发工具

1、使用记事本写.html文件有诸多不便，课程中选择VSCode进行.html的编写。
/2、安装VSCode
VSCode中安转以下插件，输入英文感叹号出现HTML基本结构，编辑title和body后，右键选择Open in Default Browser 打开网页。

3、使用VSCode进行网页开发：
（1）Ctrl n:新建文件
（2）Ctrl s:保存为.html
（3） Ctrl +/-: 代码字体变大/变小
（4）英文!:生成页面骨架结构
（5）安装插件，右键鼠标选择浏览.html文件

4、VSCode工具生成骨架标签新增代码
※ <!DOCTYPE>标签：必须写到整个页面的第一行，文档类型声明标签，告诉浏览器当前页面采用的那个HTML版本，（HTML4/HTML5/XHTML）。如<!DOCTYPE html>表示当前页面采取HTML5进行显示。不是HTML标签，而是文档类型声明标签。
5、lang语言：定义当前文档显示的语言。
en为英文页面、zh-CN表示中文页面，但对于文档显示来说，定义成en也可以显示中文，定义成zh-CN也能显示英文。这个属性对浏览器和搜索引擎有作用，建议中文网站为zh-CN，否者浏览器会提升进行翻译。

6、charset字符集：识别和存储各种文字,charset常用的值有：GB2312, BIG5, GBK和UTF-8, 其中UTF-8也被成为万国码，基本包含了全世界所有国家的文字。必须写得代码，否则会引起乱码情况。

（五） HTML常用标签

1、语义标签：

标签的含义，用来干嘛的。根据标签的语义，在合适的地方给一个合理的标签，能让页面的结构更清晰。

2、标题标签(重要)：

<h1>-<h6>，表示一级-六级标签，重要性递减。h为head的缩写，是双标签如：<h1> </h1>。加了标题的文字会加粗，字号也会变大，并且独占一行。
※ 练习：

※ 新建ctrl n，后先保存ctrl s，代码更改后先ctrl s保存，在用浏览器打开。

3、段落和换行标签(重要)：

①段落标签
a、语法格式

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

b、标签语义：把文字分为不同的段落，p为paragraph 段落缩写。

c、文本在一个段落中，会根据浏览器的大小自动换行，段落和段落之间保有空隙。

d、练习

e、查看中勾选自动换行能消除文字的段落间隙。
②换行标签
a、语法格式（单标签）

我是<br />一个换行标签
我是
一个换行标签

b、标签语义：强制换行，br为break 换行缩写。
c、 <br />是一个单标签，<br />和<p>的区别，段落标签不同段落间有间距，换行标签没有间距只是换行。

d、练习：新闻

e、双标签，先将标签内的内容剪切，在输入html标签，最后将粘贴板的文字复制到标签内；单标签直接加在合适位置。按层级依次对标题、段落、换行标签进行操作。

4、文本格式标签：

①语法格式：

② 标签语义：突出重要性，在网页中为文字添加粗体、斜体或下划线等效果，使文字以特殊方式显示。

③ 练习

5、div和span标签：

①语法格式：

<div>我是一个div标签，我一个人单独占一行</div><span>百度</span><span>新浪</span><span>搜狐</span>

②标签语义：没有语义，就是盒子用来装内容，div是division的缩写，表示分割、分区；span意为跨度、跨距。<div>标签用来布局，但一行只能放一个<div>（大盒子）。<span>标签用来布局，但一行可以放多个<span>（小盒子）。

③练习

6、图像标签（重要）

（1）基础语法

<!--单标签img（image） -->
<img src="图像URL" />  # 单标签

（2）标签属性

a、图像标签可以有多个属性，但必须写在标签名img后面。
b、属性之间不分先后顺序，标签名和属性、属性和属性之间用空格隔开。
c、属性值采取键值对的格式，及key=“value”（属性 = “属性值”）
（3）实例代码

<!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><h4>图像标签的使用：</h4><img src="img.JPG"/><h4>alt：替换文本，当图像加载不出来时，提示用户图片信息</h4><img src="img1.JPG" alt=这是我的桌面 /><h4>title：提示文本，当鼠标放在图片上时，出现的图片信息</h4><img src="img.JPG" alt="这是我的桌面"  title="桌面照片" /><h4>width:给图像设置宽度</h4><img src="img.JPG" alt="这是我的桌面"  title="桌面照片" width="500" /><h4>height:给图像设置高度</h4><img src="img.JPG" alt="这是我的桌面"  title="桌面照片" height="100 " /><h4>border:给图像设置边框</h4><img src="img.JPG" alt="这是我的桌面"  title="桌面照片" width="500" border="15"/></body>
</html>

(4)知识点：
a、目录文件夹和根目录
目录文件夹就是指普通的文件夹，打开目录文件夹的第一层就是根目录。
b、路径
相对路径：
以引用文件所在位置为参考，建立出的目录路径，简单来说就是图片相对于HTML文件的位置。
绝对路径：
指目录下的绝对位置，通常指从盘符开始的路径或完整的网络路径（“D:\web\img"或"http://www.”)。

7、超连接标签

用于定义超连接，作用是从一个页面链接到另一个页面。
（1）基础语法

<!--双标签<a>（anchor） -->
<a href="跳转目标">文字或图像</a>

（2）标签属性

超连接类型
外部链接：必须以http://开头
内部链接：网站内部页面之间的相互链接，直接链接内部网站的名称即可。
空连接：<a href="#"></a>用于站位。
下载链接：herf里面地址是一个文件（.exe）或者压缩包(.zip)，会下载这个文件。
网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频都可以添加超链接。
锚点链接：当我面点击锚点链接，可以快速的定位到页面中的某个位置。
在链接文本中额href属性中，设置属性值为#名字的形式，如<a herf="#two">第2集。
找到目标位置标签，里面添加一个id属性，如<h3 id=“two”>第2集介绍</h3>
（3）实例代码

<!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><h4>1.外部链接</h4><a href="http://www.baidu.com" target="_blank">百度</a><a href="http://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.qq.com"><img src="img.JPG"/></a>
</body>
</html>

（六）HTML中的注释和特殊字符

1、注释

<!-- 这是一行注释 -->

2、特殊字符

空格大于和小于必须牢记

黑马pink老师Web前端入门笔记（二）相关推荐

Web前端学习笔记二
8.表格标签 <body><table><tr><td>姓名</td><td>姓别</td><td>年龄 ...
html笔记黑马pink老师 b站视频笔记有自己新加内容
网页构成网站的基本元素,通常由图片.链接.文字.声音.视频等元素组成什么是Html 超文本(超越文本限制.超级链接文本)标记语言(是一套标记标签),描述网页的一种语言网页的形成由网页元素组成, ...
web前端入门学习 css（1）
黑马程序员Web前端入门教程,零基础前端视频教程pink老师_html5+css3 文章目录 html局限性 css简介(层叠样式表.级联样式表.css样式表) css语法规范 css代码样式风格(推 ...
【css教程】web前端入门学习 css（1）
黑马程序员Web前端入门教程,零基础前端视频教程pink老师_html5+css3 文章目录 html局限性 css简介(层叠样式表.级联样式表.css样式表) css语法规范 css代码样式风格(推 ...
黑马pink老师前端从入门到精通教程汇总（附源码+配套资料）
本篇内容主要是PINK老师教程汇总(主要内容如下) 1.web端布局:先讲解HTML5常用标签,接着讲解CSS3常见样式增加的H5C3新特性,新语法,最后讲解PC端品优购项目.以及CSS3动画 2d ...
web前端学习笔记（最新）
web前端学习笔记大家好,我是链表哥,新的学期,新的学习,我会为您展示我的学习进程. 一:什么是WEB前端? 所谓的Web前端指的是用户所能接触到的,并服务于用户的前沿端口,经我们程序员编辑修饰后展 ...
2020年Web 前端怎样入门？最新Web前端入门的学习路线
2022年最新Web前端入门的自学路线 > 新手入门前端,需要学习的基础内容有很多,如下. 一.HTML.CSS基础.JavaScript语法基础.学完基础后,可以仿照电商网站(例如京东.小米) ...
web前端开发笔记46-71，78-83 2022/11/04
web前端开发笔记一.标签群组通配等选择器(TAG) 1.标签选择器 2.群组选择器(不同标签) 3.通配选择器(一锅端) 二.层次选择器 - 后代():M N - 父子:M > N - 兄弟 ...
Web前端开发笔记——第二章 HTML语言第四节超链接标签
目录前言一.超链接标签 (一)链接其它子网页 (二)链接其它站点 (三)虚拟超链接二.从当前页面链接到指定位置三.链接的访问情况四.在新窗口中打开链接例题结语前言本节介绍超链接标签即 ...

黑马pink老师Web前端入门笔记（二）

Web前端入门

二、HTML标签

（一）学习目标

（二）HTML语法规范

（三） HTML基本结构标签

（四）开发工具

（五） HTML常用标签

1、语义标签：

2、标题标签(重要)：

3、段落和换行标签(重要)：

4、文本格式标签：

5、div和span标签：

6、图像标签（重要）

7、超连接标签

（六）HTML中的注释和特殊字符

1、注释

2、特殊字符

黑马pink老师Web前端入门笔记（二）相关推荐

最新文章

热门文章

黑马pink老师Web前端入门笔记（二）

Web前端入门

二、HTML标签

（一） 学习目标

（二）HTML语法规范

（三） HTML基本结构标签

（四） 开发工具

（五） HTML常用标签

1、语义标签：

2、标题标签(重要)：

3、段落和换行标签(重要)：

4、文本格式标签：

5、div和span标签：

6、图像标签（重要）

7、超连接标签

（六）HTML中的注释和特殊字符

1、注释

2、特殊字符

黑马pink老师Web前端入门笔记（二）相关推荐

最新文章

热门文章

（一）学习目标

（四）开发工具