ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

学习 HTML 的第一天

2022-06-26 22:02:49  阅读:132  来源: 互联网

标签:第一天 标签 学习 HTML 图像 页面 链接 属性


2、什么是HTML?怎么开发HTML?怎么运行HTML?

*HTML:


 

4 HTML 常用标签

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

我是一级标签

单词head的缩写,意为头部、标题。

标签语义:作为标题使用,并且依据重要性递减。

1.加了标题的文字会变粗,字号也会依次变大。

4.3 段落和换行标签(重要)

在网页中,要把文字有条理显示,则需分段显示。在HTML标签中,<p>标签用于定义段落,把网页分为若干个段落。

我是一个段落标签

单词paragraph的缩写,译为段落。

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

特点:

1.文本在一个段落中会根据浏览器窗口自适应换行。

2.段落与段落之间保有空隙。

在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望强制换行,需要用到换行标签 。

单词break的缩写,意为打断、换行。

标签语义:强制换行。

特点:

1. 是个单标签。

2. 标签只是简单开始新的一行,与段落不同,段落会插入垂直间距。

4.4文本格式化标签

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

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

语义标签说明
加粗 <strong></strong>或者<b></b> 推荐<strong> 语义更强烈
倾斜 <em></em>或者<i></i> 推荐<em>语义更强烈
删除线 <del></del>或者<s></s> 推荐<del>语义更强烈
下划线 <ins></ins>或者<u></u> 推荐<ins>语义更强烈

4.5 <div>和<span>标签

​ 和没有语义的,他们就是一个盒子,用来装盒子 这是头部 今日价格 ​

div是division的缩写,表示分割、分区。span意为跨度、跨距。

特点:

1.<div>标签用来布局,但是现在一行只能放一个<div>。大盒子

2.<span>标签也用来布局,一行可以放多个<span>。大盒子

4.6 图像标签和路径

1.图像标签

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

 

单词image的缩写,意为图像。

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

所谓属性:简单理解就是属于这个图像标签的特性。

属性属性值说明
src 图片路径 必须属性
alt 文本 替换文本。图像不能显示就显示文字
title 文本 提示文本。鼠标放到图像上,提示的文字
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素 设置图像的边框粗细

图像标签属性注意点:

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

  2. 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。

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

重点掌握点:

  • 请说出图像标签那个属性是必须要写的?

答:src,指定图片路径。

  • 请说出图像标签中alt和title属性的区别?

答:alt替换文本,图片不能显示才会出现;title提示文本,鼠标放在图片上可以出现。

4.7 超链接标签(重点)

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

1.链接的语法格式

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

单词anchor的缩写,意为:锚。

属性作用
href 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接功能。
target 用于指定链接页面的打开方式,其中self为默认值,blank为在新窗口中打开方式。

 

4.8 图像标签和路径(重点)

2.路径(前期铺垫知识)

(2)vsCode打开目录文件夹:

文件———打开文件夹。选择目录文件夹。后期非常方便管理文件。

2.路径

页面中的图片会非常多,通常我们会新建一个文件夹来存放这些图像文件(images),这时再查找图像,就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为:

 

1.相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。这里简单来说,图片相对于HTML页面的位置.

相对路径分类符号 说明
同一级路径     图像文件位于HTML文件同一级 如
下一级路径 /   图像文件位于HTML文件下一级 如
上一级路径 ../   图像文件位于HTML文件上一级 如

相对路径是从代码所在的这个文件除非,去寻找目标文件的,而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置。

 

2.绝对路径:指目录的绝对位置,直接到达目标位置,通常是从盘符开始的路径。

例如,"D:\web\img\logo.gif"或者完整的网络地址"http//www.itcast.cn/images/logo.gif"

4.9 超链接标签(重点)

2.链接分类:

  1. 外部链接,例如百度

  2. 内部链接:网站内部页面之间的相互链接.直接链接内部页面名称即可,例如首页

  3. 空连接:如果当时没有确定链接目标时,首页

  4. 下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件。

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

  6. 锚点链接:点我们点击连接,可以快速定位到页面中的某个位置。

    • 在链接文本的href属性中,设置属性值为名字的形式,如第二集

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

5.1 注释

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

HTML中的注释以"<!--""-->"结束。

<!-- 注释语句 --> 快捷键:ctrl + /

一句话:注释标签里面的内容是给程序员看的,这个代码是不执行、不显示到页面中的。

5.2 特殊字符

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

特殊字符描述字符的代码
  空格符  
< 小于号 <
> 大于号 >
& 和号 &
¥ 人民币 ¥
© 版权 ©
® 注册商标 ®
° 摄氏度 °
± 正负号 ±
× 乘号 ×
÷ 除号 ÷
² 平方 ²
³ 立方 ³

重点记住:空格、大于号、小于号这三个,其余很少使用,需要网上查阅。

1.表格标签

1.1 表格的主要作用

表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

总结:表格不是用来布局页面的,而是用来展示数据的。

标签:第一天,标签,学习,HTML,图像,页面,链接,属性
来源: https://www.cnblogs.com/zhoncha/p/16414482.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有