(1)HTML笔记(标签)

news/2025/3/26 15:16:45/

1、什么是标签

       标签是由一对尖括号组成的。

    种类:

        单标签:<img />

        双标签:<html></html>

                  双标签是由同一对标签组成的,前面<html>是开始标签,后面</html>是结束标签。

2、HTML文档的构成

    网站三要素与网页三要素参考转载地址:(http://www.580plan.com/articles/changjianwenti/3581.html)

<!doctype html><!-- 声明文档类型 html5版本 具有向下兼容低版本的功能  -->
<html><head><!--头部 : 不可视区域:看不到的内容 --><meta charset='utf-8'/><!-- 网页的三要素:网页标题 ,网页关键词,网页描述(简称TDK) --><title>  </title><meta name='keywords' content=''/><!-- 元标签 --><meta name='description' content=''/></head><body><!-- 身体: 可视区域。 --></body>
</html>

3、常用的标签

     1.标题标签:h1(一级标题)h2(二级标题)h3(三级标题)h4(四级标题)h5(五级标题)h6(六级标题)

        特点:字体都是有加粗的效果,同时h1到h6的字体逐渐变小!与seo息息相关!

        与seo的关系可参考转载地址:(https://www.cnblogs.com/jerain6312/articles/4679494.html)

      2.p标签:段落标签

      3.strong/b标签:加粗标签

        两者区别在于前者与seo相关,后者只是普通加粗的效果!

        与seo的关系可参考转载地址:(https://www.4xseo.com/basis/1409/)

       4.em/i标签:倾斜的效果

        em与seo相关,i标签只是普通倾斜的效果

       5.span标签  区分样式的标签

        与普通的文本样式区别开来

       6.sup 上标

          sub 下标

<p> 我明年的目标:1000000000 ,这个项目需要和你谈一下!</p>
<p> 我明年的目标:10<sup>9</sup> ,这个项目需要和你谈一下!</p>
<p>	C + 02 =>CO2 </p>
<p>	C + 0<sub>2</sub> =>CO<sub>2</sub> </p>

        7.列表标签

          ul li 无序列表

              disc    默认实心圆

              circle    空心圆

              square    方块

          ol li  有序列表

          注意:错误写法:不能在ul/ol子集直接嵌套其他标签,必须在li子元素再去嵌套标签!

          自定义列表:

               dl dt dd

                    dt  大多都用来作为文本的标题

                    dd  用来编辑内容

      8.img标签

        img :图片标签(单标签)

        常用的图片类型:

          .jpg

          .png  大多数为透明图

          .gif   动态度

        图片四要素

          路径src

          宽度width

          高度height

          alt 标记:同样跟seo有关

          title标题

        路径问题:

          ./   进入当前目录

          /    进入子目录下面

        相对路径与绝对路径:

          相对路径:

              相对于.html文本出来的

          绝对路径(两种绝对路径):

               从盘符出发

               从域名出发

           缺点:绝对路径的缺点在于,如果当时的路径发生改变,图片就会消失。

<img src="file:///C:/Users/MACHENIKE/Desktop/img/daughter.png" alt="" />		
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542733409205&di=28f58608bfc73cfd93e794f85ecb6774&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D34934caedaa20cf4529df69c1e602143%2F30adcbef76094b36c1bed0c4a9cc7cd98d109def.jpg" alt="" />

        9.a 标签  超链接标签

             href=" "    实现页面的跳转

             跳转页面target

                   _self  当前页面  默认

                  _blank    新页面打开

<a href='https://www.baidu.com/' target='_self'> 点我跳转到百度 </a>
<a href='#'> 点我不能跳转 </a>
<a href="javascript:;"> 点我不能跳转 </a>
<a href="javascript:void(0);"> 点我不能跳转 </a>
<a href='jd.com'  target='_blank'> 点我跳转到京东 </a>
<a href='https://www.jd.com/'  target='_blank'> 点我跳转到京东 </a>

         锚点:

<a href="#p1">我要跳转到p1</a>
<a href="#p5">我要跳转到p5</a>
<a href="#p6">我要跳转到p6</a><p id="p1">我是第1个</p>
<p id="#2">我是第几个</p>
<p id="#3">我是第几个</p>
<p id="#4">我是第几个</p>
<p id="p5">我是第5个</p>
<p id="p6">我是第6个</p>

 


http://www.ppmy.cn/news/658559.html

相关文章

Mac开机按键汇总以及快捷键巧用

前言: 作为iOS和Mac专业开发人员&#xff0c;当然也包括使用Mac电脑的童鞋&#xff0c;下面是对于mac电脑开机按键的一些汇总&#xff0c;相信会对各位&#xff08;特别是苹果电脑启动出问题的童鞋&#xff09;有所帮助&#xff0c;特此分享&#xff1a; Mac的开机时&am…

搭建个人网站--搭建网站

一、环境搭建&#xff08;windows10&#xff09; 1、node.js的介绍与安装 &#xff08;1&#xff09;介绍&#xff1a;Nodejs &#xff08;2&#xff09;安装&#xff1a;node.js安装教程 2、Git 的介绍与安装 &#xff08;1&#xff09;GitHub 使用教程 <精华帖> …

HDMI接口类型及历史版本

1、HDMI简介 HDMI是高清晰度多媒体一种数字化视频/音频接口技术&#xff0c;是适合影像传输的专用型数字化接口&#xff0c;可同时传送音频和影像信号&#xff0c;同时无需在信号传送前进行数/模或者模/数转换。 其中 1-9 都是TMDS数据传输实际上用到的引脚&#xff0c;分为…

安装JMeter(mac)

1. 安装JMeter&#xff08;mac&#xff09; 1.1 下载安装包 进入官网 http://jmeter.apache.org/download_jmeter.cgi 选择版本 &#xff0c;jmeter依赖于当前设备的java环境&#xff0c;所以要与java的版本想匹配&#xff0c;否则可能出现一些意外的情况&#xff0c;另外&a…

Spark ML Pipelines(ML管道)

声明&#xff1a;代码主要以Scala为主&#xff0c;希望广大读者注意。本博客以代码为主&#xff0c;代码中会有详细的注释。相关文章将会发布在我的个人博客专栏《Spark 2.0机器学习》&#xff0c;欢迎大家关注。 一、Pipelines的主要概念 ML可以应用于各种各样的数据类型&…

MySQL 基础知识

1. MySQL 基本架构 三大范式&#xff1a; 1NF&#xff1a; 属性不可分 2NF&#xff1a;属性完全依赖于主键 3NF&#xff1a;属性不依赖于其它非主属性 连接器&#xff1a;身份验证和权限相关查询缓存&#xff1a;MySQL 8.0 的时候已近弃用&#xff0c;因为这个功能不太实用分析…

使用@RequestHeader注解获取HTTP请求头信息

在开发Web应用程序时&#xff0c;我们经常需要获取HTTP请求的各种信息&#xff0c;例如请求头、请求参数等。Spring Boot提供了许多注解来方便地获取这些信息&#xff0c;其中之一就是RequestHeader注解。本篇博客将详细介绍RequestHeader注解的使用方法和示例。 1. RequestHe…

《每天十分钟》-红宝书第4版-什么是JavaScript

我相信大多数开发者都或多或少的喜欢历史。 正如"以史为镜可以知兴替"一样,对JavaScript 进行历史回顾可以帮助我们更好的掌握它历史背景 诞生 在1995年左右,网速为28.8kb/s 的猫(调制调节器)上网,想象一下用户填写一个表单,过了30秒之后,告诉你某些信息没填…