前端学习之HTML简介

一、HTML语法规则

1.HTML 标签是由尖括号包围的关键词,例如 <html>。
2.HTML 标签通常是成对出现的,例如 <html> 和 </html> ,我们称为双标签
3.HTML 标签对中的第一个标签是开始标签,第二个标签是结束标签。 有些特殊的标签必须是单个标签(极少情况),例如 <br />,我们称为单标签

二、标签的关系

双标签关系可以分为两类:包含关系和并列关系
包含标签:
<head>
<title> </title>
</head>
并列关系:
<head> </head>
<body> </body>

三、基本结构标签:

每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写


基本结构.png

四、语义化标签:

学习标签是有技巧的,重点是记住每个标签的语义。简单理解就是指标签的含义,即这个标签是用来干嘛的。
什么是语义化标签:根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更清晰。

五、常用的标签:

1、标题标签

  • 标题标签 <h1> ~ <h6>
    为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题,即<h1> - <h6> 。
  • 具体实现:<h1> 我是一级标题 </h1>
  • 特点:
    1.加了标题的文字会变的加粗,字号也会依次变大。
    2. 一个标题独占一行。

2、段落标签:

  • 段落标签:<p></p>
    在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示。在 HTML 标签中,<p>标签用于定义段落,它可以将整个网页分为若干个段落。
  • 具体实现: <p> 我是一个段落标签 </p>
  • 特点:
    1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
    2. 段落和段落之间保有空隙。

3、换行标签

  • 换行标签<br />
    在 HTML 中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签 <br />。
  • 具体实现: <br />
  • 特点:
    1. <br /> 是个单标签。
    2. <br /> 标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。

4、文本格式化标签:

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


格式化标签.png

5、div和span标签

  • <div> 和 <span> 是没有语义的,它们就是一个盒子,用来装内容的。
  • 具体实现:
    <div> 这是div标签 </div>
    <span> 这是span标签 </span>
  • 特点:
    1. <div> 标签用来布局,但是现在一行只能放一个<div>。 大盒子
    2. <span> 标签用来布局,一行上可以多个 <span>。小盒子

6、图片标签:

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

  • 具体实现: <img src="图像URL" />
  • 解释:src 是<img>标签的必须属性,它用于指定图像文件的路径和文件名。
    所谓属性:简单理解就是属于这个图像标签的特性。图像标签的其他属性:


    图片属性.png
  • 图像标签注意点:
    1.图像标签可以拥有多个属性,必须写在标签名的后面。
    2.属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
    3.属性采取键值对的格式,即 key=“value" 的格式,属性 =“属性值”。
  • 路径:
    1.相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。
    这里简单来说,图片相对于 HTML 页面的位置
    路径.png

    特点:相对路径是从代码所在的这个文件出发,去寻找目标文件的,而我们这里所说的上一级 、下一级和同一级就是 图片相对于 HTML 页面的位置。
    2.绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。例如,“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif

7、链接标签:

  • 链接的语法格式:<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
  • 属性:
    1.href:用于指定链接目标的url地址
    2.target:用于指定链接页面的打开方式_self默认值 _blank新窗口打开
    3.#:空链接
  • 链接分类:
    1.外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >
    2.内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如 < a href="index.html"> 首页 </a >
    3.空链接: 如果当时没有确定链接目标时 < a href="#"> 首页 </a >
    4.下载链接: 如果 href 里面地址是一个文件或者压缩包,会下载这个文件。
    5.网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
    6.锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置. 在链接文本的 href 属性中,设置属性值为 #名字 的形式,如<a href="#two"> 第2集 </a>。找到目标位置标签,里面添加一个 id 属性 = 刚才的名字 ,如:<h3 id="two">第2集介绍</h3>

8、注释

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

  • 具体实现:
    < !-- 注释语句 --> 快捷键: ctrl + /
    添加注释是为了更好地解释代码的功能,便于相关开发人员理解和阅读代码,程序是不会执行注释内容的

9、特殊字符:

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

特殊字符.png

重点记住:空格 、大于号、 小于号这三个, 其余的使用很少,如果需要回头查阅即可。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,240评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,328评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,182评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,121评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,135评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,093评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,013评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,854评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,295评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,513评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,398评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,989评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,636评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,657评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2 352