【01】HTML_day01_03-HTML经常使用标签

时间 2020-02-10

标签 html day01 day 经常使用标签栏目 HTML 繁體版

原文原文链接

typora-copy-images-to: mediacss

第01阶段.前端基础.HTML经常使用标签html

学习目标

理解：
- 相对路径三种形式
应用
- 排版标签
- 文本格式化标签
- 图像标签
- 连接
- 相对路径，绝对路径的使用

1. HTML经常使用标签

首先 HTML和CSS是两种彻底不一样的语言，咱们学的是结构，就只写HTML标签，认识标签就能够了。不会再给结构标签指定样式了。前端

HTML标签有不少，这里咱们学习最为经常使用的，后面有些较少用的，咱们能够查下手册就能够了。html5

1.1 排版标签

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

1）标题标签h (熟记)

单词缩写： head 头部. 标题 title 文档标题浏览器

为了使网页更具备语义化，咱们常常会在页面中用到标题标签，HTML提供了6个等级的标题，即网络

标题标签语义： 做为标题使用，而且依据重要性递减布局

其基本语法格式以下：学习

<h1>   标题文本   </h1>
<h2>   标题文本   </h2>
<h3>   标题文本   </h3>
<h4>   标题文本   </h4>
<h5>   标题文本   </h5>
<h6>   标题文本   </h6>

显示效果以下：字体

小结 :

加了标题的文字会变的加粗，字号也会依次变大
一行是只能放一个标题的

传智播客学前端，
　　 前端入门亦简单。
　　 简单知识简单看，
　　 重点勤练写三遍。
　　 标题一共六级选，
　　 具体效果刷新见。
　　        ------pink老师

2）段落标签p ( 熟记)

单词缩写： paragraph 段落 [ˈpærəgræf] 无须记这个单词

做用语义：

能够把 HTML 文档分割为若干段落

在网页中要把文字有条理地显示出来，离不开段落标签，就如同咱们日常写文章同样，整个网页也能够分为若干个段落，而段落的标签就是

<p>  文本内容  </p>

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

3）水平线标签hr(认识)

单词缩写： horizontal 横线 [ˌhɔrəˈzɑntl] 同上

在网页中经常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，井井有条。这些水平线能够经过插入图片实现，也能够简单地经过标签来完成，

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

<hr />是单标签

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

课堂练习:新闻页面

4）换行标签br (熟记)

单词缩写： break 打断 ,换行

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，而后自动换行。若是但愿某段文本强制换行显示，就须要使用换行标签

<br />

这时若是还像在word中直接敲回车键换行就不起做用了。

此处有练习题

5）div 和 span标签(重点)

div span 是没有语义的是咱们网页布局主要的2个盒子想必你听过 css+div

div 就是 division 的缩写分割，分区的意思其实有不少div 来组合网页。

span 跨度，跨距；范围

语法格式：

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

他们两个都是盒子，用来装咱们网页元素的，只不过他们有区别，如今咱们主要记住使用方法和特色就行了

div标签用来布局的，可是如今一行只能放一个div
span标签用来布局的，一行上能够放好多个span

后面后面讲显示模式的时候，会告诉你们

排版标签总结

标签名	定义	说明
	标题标签	做为标题使用，而且依据重要性递减
	段落标签	能够把 HTML 文档分割为若干段落
	水平线标签	没啥可说的，就是一条线
	换行标签
	div标签	用来布局的，可是如今一行只能放一个div
	span标签	用来布局的，一行上能够放好多个span

1.2 文本格式化标签(熟记)

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

区别：

b 只是加粗 strong 除了能够加粗还有强调的意思，语义更强烈。

剩下的同理...

请同窗们重点记住前两组加粗和倾斜后面两组没记住回来查

1.3 标签属性

所谓属性就是外在特性 好比手机的颜色手机的尺寸，总结就是手机的。。

手机的颜色是黑色
手机的尺寸是 8寸
水平线的长度是 200
图片的宽度是 300

使用HTML制做网页时，若是想让HTML标签提供更多的信息，可使用HTML标签的属性加以设置。其基本语法格式以下：

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<手机 颜色="红色" 大小="5寸">  </手机>

1.4 图像标签img (重点)

单词缩写： image 图像

要想在网页中显示图像就须要使用图像标签，接下来将详细介绍图像标签以及和他相关的属性。（它是一个单身狗）

语法以下：

<img src="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

border 后面咱们会用css来作，这里童鞋们就记住这个border 单词就行了

注意:

标签能够拥有多个属性，必须写在开始标签中，位于标签名后面。
属性之间不分前后顺序，标签名与属性、属性与属性之间均以空格分开。
采起键值对的格式 key="value" 的格式

好比:

正常的<br />
    <img src="cz.jpg" width="300" height="300" /><br />
     带有边框的<br />
    <img src="cz.jpg" width="300" height="300" border="3" /><br />
    有提示文本的<br />
    <img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" /><br />
    有替换文本的<br />
    <img src="cz.jpg" width="300" height="300" border="3" alt="图片不存在" />

此处有练习题

重点掌握点：

[ ] 请说出图像标签那个属性是必需要写的？
[ ] 请说出图像标签中 alt 和 title 属性区别？

1.5 连接标签(重点)

单词缩写： anchor 的缩写 [ˈæŋkə(r)] 。基本解释锚, 铁锚的

在HTML中建立超连接很是简单，只需用标签把文字包括起来就好。

语法格式：

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

属性	做用
href	用于指定连接目标的url地址，（必须属性）当为标签应用href属性时，它就具备了超连接的功能
target	用于指定连接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，__blank为在新窗口中打开方式。

注意：

外部连接须要添加 http:// www.baidu.com
内部连接直接连接内部页面名称便可好比 < a href="index.html"> 首页
若是当时没有肯定连接目标时，一般将连接标签的href属性值定义为“#”(即href="#")，表示该连接暂时为一个空连接。
不只能够建立文本超连接，在网页中各类网页元素，如图像、表格、音频、视频等均可以添加超连接。

重点掌握点：

[ ] 请说出连接标签那个属性是必需要写的？
[ ] 请说出如何新窗口打开这个一个连接网页的？

1.6 注释标签

在HTML中还有一种特殊的标签——注释标签。若是须要在HTML文档中添加一些便于阅读和理解但又不须要显示在页面中的注释文字，就须要使用注释标签。

简单解释：

注释内容不会显示在浏览器窗口中，可是做为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就能够看到。

语法格式：

<!-- 注释语句 -->     快捷键是：    ctrl + /       或者 ctrl +shift + /

注释重要性：

pink老师一句话说出他们:

注释是给人看的，目的是为了更好的解释这部分代码是干啥的，程序是不执行这个代码的

团队约定

通常用于简单的描述，如某些状态描述、属性描述等

注释内容先后各一个空格字符，注释位于要注释代码的上面，单独占一行

推荐：

<!-- Comment Text -->
<div>...</div>

不推荐：

<div>...</div><!-- Comment Text --> 
    
<div><!-- Comment Text -->
    ...
</div>

2. 路径(重点、难点)

实际工做中，咱们的文件不能随便乱放，不然用起来很难快速的找到他们，所以咱们须要一个文件夹来管理他们。

目录文件夹：

就是普通文件夹，里面只不过存放了咱们作页面所须要的相关素材，好比 html文件，图片等等。

根目录

页面中的图片会很是多，一般咱们再新建一个文件夹专门用于存放图像文件（images），这时再插入图像，就须要采用“路径”的方式来指定图像文件的位置。路径能够分为：相对路径和绝对路径

相对路径

以引用文件之网页所在位置为参考基础，而创建出的目录路径。所以，当保存于不一样目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

路径分类	符号	说明
同一级路径		只需输入图像文件的名称便可，如<img src="baidu.gif" />。

|
| 下一级路径 | “/” | 图像文件位于HTML文件同级文件夹下（例如文件夹名称为：images）如<img src="images/baidu.gif" />。 <

|
| 上一级路径 | “../” | 在文件名以前加入“../” ，若是是上两级，则须要使用 “../ ../”，以此类推，如<img src="../baidu.gif" />。

pink老师一句话说出他们:

相对路径，是从代码所在的这个文件出发，去寻找咱们的目标文件的，而咱们所说的上一级下一级同一级简单说，就是图片位于 HTML 页面的位置

绝对路径

绝对路径以Web站点根目录为参考基础的目录路径。之因此称为绝对，意指当全部网页引用同一个文件时，所使用的路径都是同样的。

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

注意：

绝对路径用的较少，咱们理解下就能够了。可是要注意，它的写法特别是符号并非相对路径的 /

3. 今日总结

总结今天的思路贯穿线：

4. 综合案例：圣诞

5. @拓展阅读

5.1 锚点定位（难点）

经过建立锚点连接，用户可以快速定位到目标内容。

建立锚点连接分为两步：

1. 使用相应的id名标注跳转目标的位置。 (找目标)
  <h3 id="two">第2集</h3> 

2. 使用<a href="#id名">连接文本</a>建立连接文本（被点击的） （拉关系）  我也有一个姓毕的姥爷..
  <a href="#two">

快速记忆法：

比如找我的办事，首先找到他，而后拉关系，最后看效果。

5.2 base 标签

语法：

<base target="_blank" />

总结：

base 能够设置总体连接的打开状态
base 写到之间
把全部的链接都默认添加 target="_blank"

pink老师一句话说出他们:

全体连接~ 到 ~ 全体集合全部连接以新窗口打开页面 ~ 是

5.3 预格式化文本pre标签

标签可定义预格式化的文本。

被包围在

标签元素中的文本一般会保留空格和换行符。而文本也会呈现为等宽字体。

pink老师一句话说出他们:

所谓的预格式化文本就是，按照咱们预先写好的文字格式来显示页面，保留空格和换行等。

有了这个标签，里面的文字，会按照咱们书写的模式显示，不须要段落和换行标签了。可是，比较少用，由于很差总体控制。

5.4 特殊字符（理解）

一些特殊的符号，咱们再html 里面很难或者不方便直接使用，咱们此时可使用下面的替代代码。

虽然有不少，可是咱们平时用的比较较少，你们重点记住空格大于号小于号就能够了，剩下的回来查阅。

总结：

是以运算符开头,以分号运算符结尾。
他们不是标签，而是符号。
HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们做为标签解析，若要正确显示，在 HTML 源代码中使用字符实体

团队约定

推荐：

不推荐：

5.5 html5发展之路

5.6 什么是XHTML

XHTML 是更严格更纯净的 HTML 代码。

XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。
XHTML 的目标是取代 HTML。
XHTML 与 HTML 4.01 几乎是相同的。
XHTML 是更严格更纯净的 HTML 版本。
XHTML 是做为一种 XML 应用被从新定义的 HTML。
XHTML 是一个 W3C 标准。

5.7 HTML和 XHTML之间有什么区别?

XHTML 指的是可扩展超文本标记语言
XHTML 与 HTML 4.01 几乎是相同的
XHTML 是更严格更纯净的 HTML 版本
XHTML 是以 XML 应用的方式定义的 HTML
XHTML 是 2001 年 1 月发布的 W3C 推荐标准
XHTML 获得全部主流浏览器的支持
XHTML 元素是以 XML 格式编写的 HTML 元素。XHTML是严格版本的HTML，例如它要求标签必须小写，标签必须被正确关闭，标签顺序必须正确排列，对于属性都必须使用双引号等。

6. @深刻阅读

HTML5的崛起之路

7. 预习内容

表格标签
可以经过表格标签可以写出一个简版表格数据展现

例如：

能够把你今天学习的内容放在表格内，再次做为总结

<pre> 此例演示如何使用 pre 标签对空行和空格进行控制 </pre>&;<a href="#">more >></a><a href="#">more >> </a>

【01】HTML_day01_03-HTML经常使用标签

学习目标

1. HTML经常使用标签

1.1 排版标签

1）标题标签h (熟记)

2）段落标签p ( 熟记)

3）水平线标签hr(认识)

4）换行标签br (熟记)

5）div 和 span标签(重点)

排版标签总结

1.2 文本格式化标签(熟记)

1.3 标签属性

1.4 图像标签img (重点)

1.5 连接标签(重点)

1.6 注释标签

团队约定

2. 路径(重点、难点)

相对路径

绝对路径

3. 今日总结

4. 综合案例： 圣诞

5. @拓展阅读

5.1 锚点定位 （难点）

5.2 base 标签

5.3 预格式化文本pre标签

5.4 特殊字符 （理解）

5.5 html5发展之路

5.6 什么是XHTML

5.7 HTML和 XHTML之间有什么区别?

6. @深刻阅读

7. 预习内容

4. 综合案例：圣诞

5.1 锚点定位（难点）

5.4 特殊字符（理解）