html の第一天（下）-----适合新手入门前端

最新推荐文章于 2022-04-03 19:54:29 发布

因为相欠，才会遇见

最新推荐文章于 2022-04-03 19:54:29 发布

阅读量297

点赞数 2

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

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

开发工具(IDE)

❤ 这些工具你认识几个？
在这里插入图片描述

普通青年 Dreamweaver
文艺青年 sublime
高手和傻子用记事本
其实。。。。

❤ 在页面中输入以下2个单词

html: 5
! 在sublime里面然后按下tab键盘即可生成HTML骨架文档类型<!DOCTYPE>

<!DOCTYPE html>

这句话就是告诉我们使用哪个html版本？我们使用的是 html 5 的版本。 html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。
<!DOCTYPE> 标签位于文档的 最前面 ，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用<!DOCTYPE>标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

注意：一些老网站可能用的还是老版本的文档类型比如 XHTML之类的，但是我们学的是HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则)，所以大家放心的使用HTML5的文档类型就好了。

字符集

<meta charset="UTF-8">

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有 gbk 和 gb2312

gb2312 简单中文包括6763个汉字
BIG5 繁体中文港澳台等用
GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8则包含全世界所有国家需要用到的字符

记住一点，以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。

HTML标签的语义化

白话：所谓标签语义化，就是指标签的含义。

❤ 为什么要有语义化标签？

方便代码的阅读和维护
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
使用语义化标签会具有更好地搜索引擎优化

核心：合适的地方给一个最为合理的标签。
语义是否良好：当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。
不管是谁都能看懂这块内容是什么。

遵循的原则：先确定语义的HTML ，再选合适的CSS。

HTML标签
首先 HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。不会再给结构标签指定样式了。
HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。千万不要奢望自己可以把所有的html标签全部记住，这是浪费生命的事情。（你会为了吃饭，然后把所有的餐具都买回家吗）

排版标签

排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

标题标签 (熟记)

单词缩写： head 头部. 标题
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即

<h1>、<h2>、<h3>、<h4>、<h5>和<h6>

标题标签语义：作为标题使用，并且依据重要性递减
其基本语法格式如下：

<hn>   标题文本   </hn>

注意： h1 标签因为重要，尽量少用，不要动不动就向你扔了一个h1。一般h1 都是给logo使用。

在这里插入图片描述

段落标签( 熟记)

单词缩写： paragraph 段落 p
在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

<p>  文本内容  </p>

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

水平线标签(认识)
单词缩写： horizontal 横线 hr
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，

就是创建横跨网页水平线的标签。其基本语法格式如下：

<hr />是单标签

在网页中显示默认样式的水平线。

❤ 课堂练习2：新闻页面

在这里插入图片描述

换行标签(熟记)
单词缩写： break 打断 ,换行
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

<br />

这时如果还像在word中直接敲回车键换行就不起作用了。

div span标签(重点)

因为这两个标签一般是用来做布局**,布局标签**
div span 是没有语义的是我们网页布局主要的2个盒子
div 就是 division 的缩写分割，分区的意思其实有很多div 来组合网页。
span, 跨度，跨距；范围
语法格式：

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

文本格式化标签(熟记)

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
在这里插入图片描述

<b>   // 加粗    等同于 <strong>
<i>   // 斜体    等同于 < em>
<s>  // 删除线   等同于 < del >
<u>  // 下划线   等同于<ins>

b i s u 只有使用没有强调的意思 strong em del ins 语义更强烈

标签属性(重点)
在这里插入图片描述
属性就是特性比如手机的颜色手机的尺寸，总结就是手机的。。
使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：

<标签名属性1=“属性值1” 属性2=“属性值2” …> 内容 </标签名>

在上面的语法中，
1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.任何标签的属性都有默认值，省略该属性则取默认值。
采取键值对的格式 key=“value” 的格式
比如:

<hr width="400" />

属性是宽度
值是 400
提倡：尽量不使用样式属性。
在这里插入图片描述

图像标签img (重点)
在这里插入图片描述
单词缩写： image 图像
HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签<img />以及和他相关的属性。其基本语法格式如下：
该语法中 src属性 用于指定图像文件的路径和文件名，他是img标签的必需属性。

<img src="图像URL" />

a链接标签(重点)

单词缩写： anchor 的缩写。基本解释锚, 铁锚，锚链接
在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：

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

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用
target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。

注意：
1.外部链接需要添加 http:// www.baidu.com
2.内部链接直接链接内部页面名称即可比如 < a href=“index.html”> 首页
3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。锚点定位（重点）通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步：

1.使用“a href=”#id名>链接文本创建链接文本。
2.使用相应的id名标注跳转目标的位置。 base 标签 base 可以设置整体链接的打开状态 base 写到之间

在这里插入图片描述

路径(重点、难点)

在这里插入图片描述

实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。
路径可以分为： 相对路径和绝对路径

相对路径

图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如img src=“logo.gif” /。
图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如img src=“img/img01/logo.gif” /。
图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如img src="…/logo.gif" /。

绝对路径

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

特殊字符标签（理解）转义符
在这里插入图片描述

注释标签

在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。其基本语法格式如下：

<!-- 注释语句 -->

注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。
注释重要性：
在这里插入图片描述

因为相欠，才会遇见

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html の第一天（下）-----适合新手入门前端

开发工具(IDE)这些工具你认识几个？普通青年 Dreamweaver文艺青年 sublime高手和傻子用记事本其实。。。。再页面中输入以下2个单词html: 5!在sublime里面然后按下tab键盘即可生成HTML骨架文档类型&amp;lt;!DOCTYPE&amp;gt;这句话就是告诉我们使用哪个html版本？我们使用的是 html 5 的版本。 html...
复制链接

扫一扫