HTML知识点总结(1)_网页全局属性中什么属性可以直接作为一个标记,指定某种样式-CSDN博客

本文链接：https://blog.csdn.net/urcecilie/article/details/113942597

html知识点总结

HTML标签及基本结构

html标签
HTML标签是由尖括号包围的关键词例如
<p> 、<br />
html标签分为单标签和双标签
单标签:<br />
双标签：<html></html> <p></p> <head></head>等成对出现

html的基本结构

<html>    //根标签
    <head>   //文档头部
        <title>我是网页标题</title>
    </head>
    <body>
          我是网页主体
    </body>
</html>

网页开发工具标签

1.文档类型声明标签<!DOCTYPE>

doctype是文档类型声明，告诉浏览器使用哪种html版本来显示网页（使用哪种文档类型来解析文档）

<!doctype html>

2.lang语言种类

用来定义当前文档显示的语言（en显示英语，zh-CN显示中文）
即en为英文网页，zh-CN是中文网页（en也可以显示中文，zh-CN也可以显示英文）

<html lang = "en">
<html lang = "zh-CN">

3.字符集

<meta charset = "UTF-8" />

在html中用<meta>标签的charset属性来规定字符编码，UTF-8为万国码，如果不写可能会出现乱码
charset常用：GB2312(汉字处理)，BIG5(繁体字编码方案)，GBK

HTML常用标签

1.标题标签`<h1>~<h6>`

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

以上代码显示如下：加了标题的文字会变粗，字号变大，标题独占一行

2.段落标签`<p></p>`

段落标签可以把网页分成若干个段落,案例如下

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>

    
<body>
    <p>数据库（Database）是按照数据结构来组织、存储和管理数据的仓库。</p>

    <p>每个数据库都有一个或多个不同的 API 用于创建，访问，管理，搜索和复制所保存的数据。</p>

    <p>我们也可以将数据存储在文件中，但是在文件中读写数据速度相对较慢。</p>

    <p>所以，现在我们使用关系型数据库管理系统（RDBMS）来存储和管理大数据量。所谓的关系型数据库，是建立在关系模型基础上的数据库，<br />借助于集合代数等数学概念和方法来处理数据库中的数据</p>
</body>

</html>

以上代码用浏览器显示如下，其中<br />是换行标签（单标签），开始新的一行
<p>标签可以根据浏览器窗口大小自动换行，段落和段落之间有空隙
在这里插入图片描述

3.文本格式化标签

加粗：<strong>加粗</strong>或<b></b>
倾斜：<em>倾斜</em>或<i></i>
~~删除线~~ ：<del>删除线</del>或<s></s>
下划线：<ins>下划线</ins>或<u></u>

4.盒子标签<div>和<span>
这两个标签没有语义，用来装内容。
div标签一行只能放一个。span标签一行可以放多个

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>div标签单独占一行</div>123
    <div>div标签单独占一行</div>123
    <span>span1</span>
    <span>span2</span>
    <span>span3</span>

</body>
</html>

以上代码显示如下
在这里插入图片描述
在学习css后可以在div和span标签里填充内容

4.图像标签`<img>`

图像标签为单标签，src后指定图像的属性，用于指定图像文件的路径和文件名。
<img src="图像URL" />

路径：
相对路径：文件相对于html文件的位置("/“表示下一级路径，”…/"表示上一级路径)
绝对路径：从盘符开始的路径

图像标签的其他属性：
1.src——图片路径——必须属性
2.alt——文本——替换文本，图像不能显示的文字
3.title——文本——提示文本，鼠标放到图像上，显示的文字
4.width——像素——图像的宽度
5.height——像素——图像的高度
6.border——像素——图像边框的粗细

注意：图像标签中src是必须要写的。
alt和title的区别：alt为替换文本，title为提示文本
属性之间部分先后顺序，属性与属性之间用空格隔开,例如：
<img src="img.JPG" alt="小猴子的照片“ title="小猴子的摄影” width="300" border="10">

*5.超链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href:用于指定链接目录的url地址
target：用于指定连接页面的打开方式（_self为默认值，_blank为在新窗口中打开方式）
链接分类
1.外部链接：例如
<a href="http:// www.baidu.com">百度</a>
2.内部链接：网页内部页面之间的相互链接
<a href="index.html">首页</a>
3.空链接：没有确定链接目标时，使用空链接
<a href="#">首页</a>
4.下载链接：如果href里面地址是一个文件或压缩包，会下载这个文件
<a href="img.zip">下载文件</a>
5.网页元素链接：文件、图像、表格、音频、视频等都可以添加链接
<a href="http://www.baidu.com"><img src="img.JPG" /></a>
6.铺垫链接：点击链接，快速定位到网页的某个位置
在链接文本的href属性中，设置属性值为“#名字"的形式，如<a href="#two">第二集</a>
找到目标位置标签，里面添加一个id属性=刚才的名字。如：<h3 id="two">第二集介绍</h3>
例如：
<a href="#live">个人生活</a><br />
<a href="#zuopin">个人作品</a><br />
<h3 id="zuopin“>主要作品</h3>
此处点击个人作品时，会自动跳转到"主要作品"的位置