【2022.7.11】HTML基础介绍&语法&常用标签&超文本链接&锚点定位

P9ulp

已于 2022-07-14 15:30:25 修改

阅读量404

点赞数 1

文章标签：前端学习 html

于 2022-07-13 12:31:02 首次发布

本文链接：https://blog.csdn.net/P9ulp/article/details/125760126

版权

来自2022.7.11
在这里插入图片描述

一、HTML基础介绍

1.网页

1.1什么是网页

网站是指再因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合
网站是指再因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合
网页是网站中的一“页”，通常是HTML格式的文件，他要通过浏览器来阅读
网页是构成网站的基本元素，由图片、链接、文字、声音、视频等元素组成。

1.2什么是HTML

HTML指的是超文本标记语言，是用来描述网页的一种语言
HTML不是一种编程语言，而是一种标记语言
标记语言是一套标记标签

1.3超文本

可以加入图片、声音、动画。多媒体等内容（超越了文本限制）
还可以从一个文件跳转到另一个文件（超文本链接）

1.4网页的形成

网页是由网页元素组成的，这些元素shi利用Html标签描述出来，然后通过浏览器解析来显示给用户的
前端人员开发代码 → 浏览器显示代码（解析、渲染）→ 生成最后的web页面

2.常用浏览器

2.1常用浏览器

IE浏览器、火狐浏览器、谷歌浏览器、safari浏览器、opera浏览器

2.2浏览器内核

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

在这里插入图片描述

3.web标准（重点）

由w3c组织和其他标准化组织制定的一系列标准的集合

3.1为什么需要web标准

遵循web标准除了可以让不同的开发人员写出的页面更标准，更统一

还有以下优点：

让web的发展前景更广阔
内容能被更广泛的设备访问
更容易被搜索引擎搜索
降低网站流量费用
使网站更易于维护
提高页面浏览速度

3.2 web标准的构成

标准
说明
结构（structure）
结构用于对网页元素进行分类整理，现阶段常用HTML
表现（presentation）
表现用于设置网页元素的版式、颜色、大小等外观样式、常用CSS
行为（behavior）
行为是指网页模型的定义及交互的编写，现阶段主要学的是JAVASCRIPT

二、HTML篇

1.HTML语法规范

1.1基本语法概述

HTML标签是由尖括号包围的关键词，例如

<html>

HTML标签通常成对出现，如，称之为双标签，第一个为开始标签，第二个为结束标签
特殊的单标签，如

 - <br />

1.2标签关系

包含关系

<head>
       <title></title>
</head>

并列关系

<html></html>
<body></body>

2.HTML基本结构标签

在这里插入图片描述

3.网页开发工具

3.1文档类型声明标签

<!DOCTYPE html>

文档类型声明，作用就是告诉浏览器使用哪种html版本来显示网页
ps:声明位于文档中的最前面位置，处于之前

3.2 lang语言种类

<html lang="en">

用来先定义当前文档显示的语言
en为英语，zh-CN为中文

3.3字符集

<meta charset="UTF-8">

字符集是多个字符的集合，以便计算机能够识别和存储各种文字
在标签内，可以通过标签的charset属性来规定html文档应该使用那种字符编码
ps:统一使用“UTF-8”不会出现乱码情况

4.HTML常用标签

4.1标签语义

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰

4.2标题标签

<h1>-<h6>

6个等级的网页标题，h1为一级标题，依据重要性递减

4.3段落标签和换行标签

<p>段落标签</p>
<br />换行标签

4.4文本格式化标签

粗体、斜体、下划线等效果
突出重要性，比普通文字重要

<strong>加粗</strong>
<em>倾斜</em>
<del>删除线</del>
<ins>下划线</ins>

4.5特殊标签

无语义，装内容

<div>division表示分割分区</div>  一行只能放一个大盒子
<span>span表示跨度</span>       一行可以放多个小盒子

4.6图像标签和路径

无语义，装内容

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

三、训练

今日训练总汇

1.标题标签

<h1>1标签</h1>
<h2>2标题啦啦</h2>
<h3>3标题啦啦啦</h3>

2.段落和换行标签

   <h1>这是一大段话</h1>
    <p>文件系统指文件存在的物理空间，Linux系统中每个分区都是一个文件系统，都有自己的目录层次结构。<br />会将这些分属不同分区的、单独的文件系统按一定的方式形成一个系统的总的目录层次结构。一个操作系统的运行离不开对文件的操作，因此必然要拥有并维护自己的文件系统。</p>
    <p>文件系统使用索引节点来记录文件信息，作用像windows的文件分配表。索引节点是一个结构，它包含了一个文件的长度、创建及修改时间、权限、所属关系、磁盘中的位置等信息。一个文件系统维护了一个索引节点的数组，每个文件或目录都与索引节点数组中的唯一一个元素对应。系统给每个索引节点分配了一个号码，也就是该节点在数组中的索引号，称为索引节点号。</p>
    <p>文件系统将文件索引节点号和文件名同时保存在目录中。目录只是将文件的名称和它的索引节点号结合在一起的一张表，目录中每一对文件名称和索引节点号称为一个连接。对于一个文件来说有唯一的索引节点号与之对应，对于一个索引节点号，却可以有多个文件名与之对应。因此，在磁盘上的同一个文件可以通过不同的路径去访问它。</p>

3.体育新闻案例

<h1>天津、江苏男排打架冲突引争议，中国排协能否及时处罚？</h1>
    <h2><p>中国男排刚刚结束了世界联赛的征程，然而在国内排坛，却传出了男排运动员打架的消息。</p></h2>
    <h3><p> 7月11日，一段多位男排球员在球场冲突互殴的视频在社交网络流传，也引发了外界的关注。</p> </h3>   
    <p>据悉，打架事件发生在天津男排和江苏男排之间。</p> 
    <p> 当下，国内各支男排队伍正在广东江门进行训练，备战即将开始的全国男排锦标赛，以及延期到9月份进行的男排超级联赛。据澎湃新闻记者向圈内人士了解，打架事件的确发生了，当时两支球队正在进行教学赛，但具体的冲突原因目前尚待官方的进一步调查和确认。</p></h4>
     <h3><p>那么参与打架的球员以及两支球队是否会受到相关处罚？</p></h3>   
        <p>当下中国排协方面尚未给出回应，但需要注意的一点是，由于打架事件并未发生在正式比赛的过程中，因此管辖赛事的相关纪律管理规定并不适用。</p>
        <p>但打架事件的发生与传播，无疑对国内男排的形象带来了负面影响，参与其中的人员依然很可能因此遭到处罚。</p>

效果如下：
在这里插入图片描述

4.文本标签格式化

    <p><strong>我是加粗</strong></p>
    <p><em>我是斜杠</em></p>
    <p><del>我是删除</del></p>
    <p><ins>我是下划线</ins></p>

效果如下：
在这里插入图片描述

5.div标签和span标签

    <div>div标签独占一行</div>
    <span>不知道干什么打出来试试</span>
    <span>百度</span>
    <span>搜狐</span>
    <span>新浪</span>

效果如下：
在这里插入图片描述

6.图像标签

<h4>图像标签的使用：</h4>
    <img src="狗.jpg"/>
    <h4>alt 替换文本 图像显示不出来的时候用文字替换：</h4>
    <img src="狗.jpg" alt="我是修狗"/>
    <h4>title 提示文本 图像放到图像上提示的文字：</h4>
    <img src="狗.jpg" alt="我是修狗" title="我是修狗思密达"/>

    <h4>width给图像设置宽度:</h4>
    <img src="狗.jpg" alt="我是修狗" title="我是修狗思密达" width="250"/>
    <h4>height给图像设置高度:</h4>
    <img src="狗.jpg" alt="我是修狗" title="我是修狗思密达" height="50"/>
    <h4>border给图像设置边框:</h4>
    <img src="狗.jpg" alt="我是修狗" title="我是修狗思密达" width="50" border="5"/>

效果如下：
在这里插入图片描述

7.超文本链接

<h4>请打开：</h4>
    <a href="https://www.bilibili.com/video/BV1uT4y1P7CX/?spm_id_from=333.788.videocard.0.com" target="_blank">点这里</a>
    <p><img src="狗.jpg"  height="50"/></p>

效果如下：
在这里插入图片描述

8.锚点定位

<h1 id="zhuye">Lana del rey</h1>
    <p><h3>拉娜·德雷（Lana Del Rey），原名伊丽莎白·伍里奇·格兰特（Elizabeth Woolridge Grant），1985年6月21日出生于美国纽约曼哈顿区，美国女歌手、词曲作者、模特 [1]  。
        2010年，发行首张录音室专辑《Lana Del Ray a.k.a. Lizzy Grant》 [2]  。2011年10月，与Interscope唱片公司签约并发行首支单曲《Video Games》 [3]  。2012年1月，发行录音室专辑《Born to Die》，该专辑在英国、法国、德国等八个国家的专辑排行榜夺冠 [4]  ；2月，获得第32届全英音乐奖“国际最具突破歌手”奖 [5]  。2012年，发行改版专辑《Paradise》 [6]  。2013年2月，获得第33届全英音乐奖“国际最佳女歌手”奖 [7]  ；5月，为电影《了不起的盖茨比》献唱插曲《Young and Beautiful》。
        2014年2月，拉娜演唱的歌曲《Summertime Sadness》获得第56届格莱美奖“最佳非古典类混音录制”奖 [8]  ；6月，发行专辑《Ultraviolence》，该专辑以首周18万2千张的销量登上公告牌专辑榜冠军 [9]  。2015年9月，发行专辑《Honeymoon》，该专辑被《滚石》杂志评为“年度20大最佳流行专辑”之一 [10]  。2017年7月，发行专辑《Lust For Life》，获得第60届格莱美奖“最佳流行专辑”提名 [11]  。2019年8月，发行第七张录音室专辑《Norman Fucking Rockwell!》 [12]  。2021年3月，发行录音室专辑《Chemtrails Over The Country Club》 [31]  ；10月22日，发行专辑《Blue Banisters》 [32]  。</h3></p>

        <h3>目录<br />
        <a href="#live">    1 早年经历</a><br />
            2 演艺经历<br />
            3 主要作品<br />
            4 音乐专辑<br />
            5 音乐单曲<br />
            6 演唱会记录<br />
            7 为他人创作<br />
            8 获奖记录<br />
            9 人物评价</h3><br />
        <h3 id="live">早年经历</h3>
        <p><h4>1985年6月21日，拉娜·德雷出生于美国纽约市曼哈顿区，她成长于纽约北部普莱西德湖畔的一个小村庄 [3]  ，她的父亲是一名成功的投资人，有着过亿的家产 [1]  。15岁时，拉娜被送到康涅狄格州的一所寄宿学校就读。18岁时，她回到纽约，就读于福德汉姆大学的哲学专业，之后她开始以各种各样的艺名诸如莉兹·格兰特（Lizzy Grant）、Sparkle Jump Rope Queen、Phenomena等在布鲁克林的夜店进行表演，并在地下音乐圈收获了一批朋友和歌迷。2005年，拉娜以一万美元的价格签订了第一份唱片合约 [3] </h4></p>
        <h4><a href="#zhuye">返回主页</a></h4>