html篇（总结）

最新推荐文章于 2023-09-09 09:14:46 发布

书棋06

最新推荐文章于 2023-09-09 09:14:46 发布

阅读量483

点赞数 4

文章标签： python pandas 数据分析

本文链接：https://blog.csdn.net/m0_72975897/article/details/126372087

版权

文章目录

列HTML篇
前言
一、初始HTML（了解）
二、基本格式
- 1.标签
- 2.使用
总结

前言

学习就是要经常总结，吾日三省吾身才是正确的学习态度，历时三个星期，我来总结一下这大半个月的收获！

一、HTML是什么？

HTML中文译为"超文本标记语言"，主要是通过HTML标签页对网页的文本，图片，声音等内容进行描述。

二、使用步骤

1.基本格式

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>标题</title>
       </head>
           <body> 内容 <body>
   </html>

2.读入数据

3.标签（对html有了一个大致的了解，下面开始正式介绍HTML的使用）

【11个常用标签，行内与块级元素，结构标签，列表，超链接，图片标签，图片格式，内联框架，音视频】

一：标题标签 -在HTML中，一共有六级标题标签 h1 ~ h6 在显示效果上h1最大，h6最小，但是文字的大小我们并不关心使用HTML标签时，关心的是标签的语义，我们使用的标签都是语义化标签 6级标题中，h1的最重要，表示一个网页中的主要内容，h2 ~ h6重要性依次降低对于搜索引擎来说，h1的重要性仅次于title，搜索引擎检索完title，会立即查看h1中的内容 h1标签非常重要，它会影响到页面在搜索引擎中的排名，页面只写一个h1 一般页面中标题标签只使用h1-h3, h3以后的基本不使用标题标签是块元素

二：段落标签，段落标签用于表示内容中的一个自然段使用p标签来表示一个段落,p标签中的文字，默认会独占一行，并且段与段之间会有一个间距，是块元素

三： blockquote 引用别人说的话长引用会换行块元素

四：em标签用于表示语音语调的一个加重,不会独占一行，我们成为行内元素（inline element）

五：strong表示强调，重要内容,强调

六：换行标签在HTML中，字符之间写再多的空格，浏览器也会当成一个空格解析,换行也会当成一个空格解析。在页面中可以使用br标签来表示一个换行，br标签是一个自结束标签

七：center 居中效果

八： q 表示短引用

九：分割线 hr标签也是一个自结束标签，可以在页面中生成一条水平线

十：使用del标签来表示一个删除的内容，del标签中的内容，会自动添加删除线

行内与块级元素

块元素（block element） -在网页中一般通过块元素对页面进行布局，举例：购物平台 -特点：会独占一行的的元素,无论他的内容有多少他都会独占一整行 -举例：p h1 h2 h3 div header ul li...

行内元素（inline element） -用来包裹文字 -特点：指的是只占自身大小的元素，不会占用一行 -举例：a img span,em strog...

<p>111</p>
    <p>222</p>
    <img src="./img/img/2.gif" alt="">
    <img src="./img/img/2.gif" alt="">

    <!--<header>
       <p></p>
       <span></span>
       <em></em>
     </header>
     <p>你<em>真</em>好看</p>-->
     <p>
      <h1>哈哈</h1>
     </p>

结构标签

布局标签（结构化标签）

 <header></header>
    <main>
      <nav></nav>
      <aside></aside>
      <article></article>
      <section></section>
      <div></div>
      <span></span>
    </main>
    <footer></footer>

列表

列表（list）一组一组 1:有序列表用ol标签创建，li表示列表项 2:无序列表用ul标签创建，li表示列表项 3:定义列表用dl标签创建，使用dd对内容进行解释说明

注意：列表之间是可以互相嵌套的

    有序列表
             使用有序的序号作为项目符号
             type属性，可以指定序号的类型
             可选值：默认值，使用阿拉伯数字
             a/A 采用小写或大写字母作为序号
             i/I 采用小写或大写的罗马数字作为序号（注意：ol也是块元素 ）

无序列表

通过type属性可以修改无序列表的项目符号

***（注意：默认的项目符号我们一般都不使用！！如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置 ul和li都是块元素）

disc，默认值，实心的圆点

square，实心的方块

circle，空心的圆

定义列表用来对一些词汇或内容进行定义使用dl来创建一个定义列表 dl中有两个子标签 dt ：被定义的内容 dd ：对定义内容的描述同样dl和ul和ol之间都可以互相嵌套

链接

HTML页面使用超链接与网络上的另一个HTML页面相连。几乎可以在所有的网页中找到超链接，点击超链接会出现很多效果： 1：可以让我们从一个页面跳转到另一个页面， 2：当前页面的其他位置 3:下载 —在HTML中链接可以是一个字，一个词，也可以是一个图片，这些都是可以点击的。 —使用a标签来创建一个超链接，它是个行内元素，在a标签中可以嵌套除自身外的任何元素

2个属性，2个功能，1个补充

属性： 1: href:指向链接跳转的目标地址 -值可以是一个外部的网站的地址绝对路径 -可以是一个内部页面的地址相对路径

（1）：绝对路径就是指完整的描述目标文件位置的路径。简单来说，绝对路径就是无论你当前的位置在哪，找到目标文件的路径是不变的。（2）：相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。简单来说，相对路径和你所在的位置是有关系的，你所在位置的不同会导致相对路径也会不同。

2: target属性：可以用来指定打开链接的位置可选值： _self，表示在当前窗口中打开（默认值） _blank，在新的一个新的页面中打开链接可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开

3: 锚点功能（页面内的跳转）所谓锚点，就是指当点击链接文本时，跳转到当前页面的指定元素位置

（1）若将超链接的href属性设置为#，点击超链接后，页面不会发生跳转，而是跳到当前页面的顶部的位置

（2）跳转到页面的指定位置，语法：将href属性设置为 #目标元素的id属性值

给标签加标记——id属性（唯一不重复的标记） -每一个标签都可以添加一个id属性 -id属性就是元素的唯一标识，同一页面中不能出现重复的id属性 -id区分大小写，且不能以数字开头

4:空链接不想使<a>元素生效，在href属性中写入一个#或者是javascript:;，此时的超链接没有作用，当还没有想好超链接具体跳转位置时，可以当做占位符使用。

图片标签

使用img标签来向网页中引入一个外部图片， img标签也是一个自结束标签 img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）属性： src：设置一个外部图片的路径，路径规则跟超链接是一样的我们所要使用的路径全都是相对路径——相对路径指相对于当前资源所在目录的位置

alt：可以用来设置在图片不能加载时，对图片的描述搜索引擎可以通过alt属性来识别不同的图片如果不写alt属性，则搜索引擎不会对img中的图片进行收录

width：可以用来修改图片的宽度,一般使用px作为单位

height：可以用来修改图片的高度，一般使用px作为单位注意： 1:宽度和高度两个属性如果指设置一个，另一个也会同时等比例调整大小如果两个值同时指定则按照你指定的值来设置

2:一般开发中除了自适应的页面，不建议设置width和height 大图变小，会多占内存，小图变大会失真

3:pc端，需要多大的图，就裁多大的移动端，进场会对图片进行缩放（大图缩小）

图片的格式

           - JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
           - 一般用来保存照片等颜色丰富的图片

       GIF

           - GIF支持的颜色少，只支持简单的透明，支持动态图
           - 图片颜色单一或者是动态图时可以使用gif

       PNG
           - PNG支持的颜色多，并且支持复杂的透明，不支持动图
           - 可以用来显示颜色复杂的透明的图片
               专为网页而生的
       webp
           -谷歌新推出的专门用来表示网页的一种格式
           -它具有其他图片格式的所有优点，而且文件格式还很小
           -缺点：兼容性不好
           base64
           -讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入
           -一般都是需要和网页一起加载的图片才会使用base64

音视频

udio标签用来向页面中引入一个外部的音频文件音视频文件引入时，默认情况下不允许用户自己控制播放停止 IE9以下的浏览器是不支持的属性： controls 是否允许用户控制播放，不用给值 autoplay 音频文件是否自动播放打开页面时，音乐会自动播放，但目前为止，大部分浏览器是不可以自动播放的 loop 是否循环播放

<audio src="./source/达拉崩吧.mp3" controls autoplay loop></audio>
!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径 -->
    <!-- <audio controls>
      对不起，你的浏览器不支持播放音频，请升级浏览器
      <source src="./source/达拉崩吧.mp3" />
      <embed src="./source/达拉崩吧.mp3" type="audio/mp3" width="300px" />
    </audio> -->

    <!-- video标签来向页面中引入一个视频
           使用方式跟音频基本上一样的 -->
    <video src="./source//杨洋.mp4" controls></video>

    <!-- <video controls>
      <source src="./source/绝地逢生.mp4" />
      <source src="./source//video.webm" />
    </video> -->

    <!--外部资源-->
    <iframe src="https://v.qq.com/x/page/d3325ij2ylt.html" frameborder="0"></iframe>

总结

提示：这里对文章进行总结：

以上就是今天要分享的内容，我只是简单的总结了一下入门该熟识和背诵的知识点，学无止境，要多反思多总结，这是我对自己的要求，总结下来的文章，写的不够成熟，有甚者可能会有错误，欢迎各位大佬的指正，我会继续端正我的学习态度，最后，祝屏幕前的你，生活愉快，万事胜意！

书棋06

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
2
评论
html篇（总结）

学习就是要经常总结，吾日三省吾身才是正确的学习态度，历时三个星期，我来总结一下这大半个月的收获！以上就是今天要分享的内容，我只是简单的总结了一下入门该熟识和背诵的知识点，学无止境，要多反思多总结，这是我对自己的要求，总结下来的文章，写的不够成熟，有甚者可能会有错误，欢迎各位大佬的指正，我会继续端正我的学习态度，最后，祝屏幕前的你，生活愉快，万事胜意！...
复制链接

扫一扫