(1)HTML笔记(标签)

news/2024/4/16 17:58:58

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秒之后,告诉你某些信息没填…

spark调试中常见的错误集锦

示例一、没有引入jar错误 错误描述&#xff1a; 以spark在pyspark环境解析xml为例 spark核心包不支持解析xml&#xff0c;所以需要引入引用依赖包配置为: config("spark.jars.packages", "com.databricks:spark-xml_2.12:0.16.0") 在spark-submit部署提交…

JavaScript Day06 正则表达式详解

文章目录 1.什么是正则表达式&#xff1f;2.正则表达式的创建2.1 字面量(直接量)2.2 构造函数 3.字符分类3.1 普通字符3.2 特殊字符3.3 模式修饰符 4.正则表达式实例方法4.1 exec4.2 test4.3 toString/toLocaleString4.4 valueOf 5.正则表达式实例属性5.1 lastIndex5.2 ignoreC…

软件安装百度云

一、Proteus 链接&#xff1a;https://pan.baidu.com/s/1rsof7PhPUPDD0iN-aX5O-A 提取码&#xff1a;YYDS 二、DOSBox 链接&#xff1a;https://pan.baidu.com/s/1XilBS6s84lttdyOWapE1cA 提取码&#xff1a;YYDS

ps 百度云

链接&#xff1a;https://pan.baidu.com/s/1NnM8FVAehb13mLXjMsy0sg 提取码&#xff1a;ah4n 复制这段内容后打开百度网盘手机App&#xff0c;操作更方便哦 如果能帮助到您&#xff0c;希望您能点赞&#xff0c;收藏、加关注&#xff0c;谢谢您&#xff01;

ubuntu 百度云下载

解决办法到处都是&#xff0c;就是添加一个chrome的插件&#xff0c;然后在分享界面拿到链接&#xff0c;然后安装aria2&#xff0c;然后直接把链接及cookies在终端运行即可下载到当前的目录&#xff0c;但是那个插件到github上https://github.com/acgotaku/BaiduExporter/ 这些…

Ubuntu安装百度云(百度云终于出linux版本了)

下载链接: https://pan.baidu.com/download 但是下载完只有rpm格式的,Ubuntu的软件包格式为deb,而RPM格式的包则是Red Hat 相关系统所用的软件包。当我们看到一个想用的软件包时&#xff0c;如果他是RPM格式&#xff0c;而你的操作系统是Ubuntu&#xff0c;那岂不是很遗憾&am…

【递推】又上锁妖塔

题目:又上锁妖塔 rqnoj82 题目描述 小D在X星买完了想要的东西,在飞往下一个目的地的途中,正无聊的他转头看了看身边的小A,发现小A正在玩<仙剑>,可是小A很奇怪,他一直在锁妖塔的周围转来转去,可是就是不进去,于是小D问他:”你在干什么?怎么不上去?”小A说:”我在想怎么…

又上锁妖塔_rqnoj82_dp

Description 小D在X星买完了想要的东西,在飞往下一个目的地的途中,正无聊的他转头看了看身边的小A,发现小A正在玩<仙剑>,可是小A很奇怪,他一直在锁妖塔的周围转来转去,可是就是不进去,于是小D问他:”你在干什么?怎么不上去?”小A说:”我在想怎么从锁妖塔外面爬上去”(倒…

百度云资深架构师聊百度云存储架构特点

12月9日&#xff0c;2016中国存储峰会在北京举行。在“云存储及灾备技术论坛”&#xff0c;百度云资深架构师王耀介绍了百度云的发展历程&#xff0c;并就百度云存储产品体系中的块存储与对象存储的架构与特点进行了重点分享。 在BAT中&#xff0c;百度做公有云比较晚&#xff…

百度云【人脸识别】

目录 1&#xff1a;百度云【人脸识别云服务】 2&#xff1a;Java-SDK文档 3&#xff1a;项目中测试 1&#xff1a;百度云【人脸识别云服务】 人脸识别云服务 包含实名认证、人脸对比、人脸搜索、活体检测等能力。灵活应用于金融、泛安防等行业场景&#xff0c;满足身份核验…

百度云干货资源

这是一些学习资源,里面有Android的,iOS的,PHP的,大数据的,Java的,web前端的,C,Python的…. 有的来源地址是在一个公众号的群.感谢群主的分享.有的是我以前收集的.在此我也分享给大家.如果大家有好的资源,非常欢迎在此分享. Android http://pan.baidu.com/s/1geNC76b密码&#…

ecjtuacm2022 C-n层妖塔

Description 链接&#xff1a;https://ac.nowcoder.com/acm/contest/44482/C 来源&#xff1a;牛客网n层妖塔是一座有n层的妖塔。当然&#xff0c;这是废话。最下面是第11层&#xff0c;最上面是第nn层&#xff0c;每一层都有一个守护者&#xff0c;第ii层的守护者的战力是a_i…
最新文章