html基本标签

news2024/11/18 1:36:17

目录

1,标题标签h1-h6

2,段落标签p

3,换行标签br

4,水平线标签hr

5,图片标签img及路径详解(绝对/相对路径)

6,超文本链接标签a

7,超本文链接之锚点

8,div标签

9,常用的文本标签


1,标题标签h1-h6

        顾名思义,浏览器解析引擎看到标题标签就会把标题标签包起来的内容在网页上显示成标题,犹如WPS文档里的标题。格式如下:

<h1>这里是标题名称1</h1>
<h2>这里是标题名称2</h2>

        在VSCODE中新建一个html文档,也就是.html结尾的文本文件,使用Emmet语法,输入h$*6即可一次性写出h1-h6六级标题。在html中,标题都是黑大粗的字体。

        标题使用注意事项:1,请确保将 HTML 标题标签只用于标题。2,不要仅仅是为了生成粗体或大号的文本而使用标题。3,正确使用标题有益于SEO。4,应该将 < h1> 用作主标题(最重要的),其后是 <h2> (次重要的),再其次是 <h3> ,以此类推。

        标题默认排版在网页中本行的左侧。但可以在标签中添加属性: align=''left'',align=''center'',align=''right'' 来调整标题在网页左侧,中间或者是右侧。举例如下。  

<h1 align="center">这里是标题名称1</h1>

2,段落标签p

        段落就像我们写作文分段一样,一开始另起一行,段尾换行。一个段落就是一个整体,网页其实像word一样,默认存在一行一行的,即使我们看不见,当一行写完时或自动换行。段与段之间留有空隙。

        段落使用双标签<p>段落内容</p>来实现。p即Paragraph。

<p>123</p>
<p>456</p>

3,换行标签br

        我们知道,段落里的每行文字之间几乎没有间隙,只有段与段之间保持着一定的间隙,具有美观性。那么怎么才能在段落里面实现分行呢?可以使用<br>标签。br即Barter rabbet,具有换行的作用。<br>标签是一个单标签,也可以写为<br/>,作为结束标签使用。

<p>1<br/>23</p>

2063f323212d4f619327cf5f55c40333.png

4,水平线标签hr

        水平线,英文名Horizontal Rule,也叫水平尺。在网页中显示就是一条横着的直线。<hr>标签会就近独占一行,一般为换行之后独占一行,因为他是块级元素,默认占用一行,一行的行高没有限制。

<p>1<br/>23</p>
<hr>

64346c386b9241e8b7af5eb5b49ca136.png

         水平线标签的属性写法如下:在起始标签的尖括号里以属性名 = 值得形式出现。常用属性如下图。当然水平线标签是单标签,起始标签与结束标签是同一个,为了区别,一般单标签写成这样的形式:<hr/>,即加上一条反斜杠。

2c9be442ebb747e08501e510cb775933.png

0bed0b320de94e6bbc7df86c77294750.png

5,图片标签img及路径详解(绝对/相对路径)

        一个网页中,就像WPS排版或者PPT排版一样,把各个内容组合在一起。在网页中出现最多的内容就是图片。那么图片资源从哪里来?在网页上哪个区域显示?怎么让浏览器知道你代码的目的是引入图片?答案就是使用图片标签及其属性。

        使用<img>单标签来引入图片。也可以写为<img/>,但是不建议,因为不符合标准。src属性说明图片来自哪里,alt属性说明当图片找不着的时候,用一句话来提示。

<img src="1.jpg" alt="图片不存在" width=" " height=" " title="">

         <img>标签常见属性如下:

9fc57d6515754f90a28e1f6ccb74e161.png

        src的路径详解:重点记住:

        1,一个点加反斜杠。即./表示当前文件夹。

        2,两个点加反斜杠。即../表示当前文件夹的上一级文件夹。

        3,相对路径是指相对于当前文件夹,也就是.html文件存在的文件夹,例如:./images。表示当前文件夹中还存在一个images文件夹;./images/2.jpg表示images文件夹下的2.jpg这种图片。

        4,绝对路径,相对于盘符开始的路径名称 。举例:D:\360Downloads\360.exe

        5,./images/2.jpg中的第二个反斜杠/表示进入到images文件夹中,进入之后才能访问到文件。

        6,网络路径,也就是存在某个服务器上的资源地址。如下面的地址。

<img src="http://iwenwiki.com/api/newworld/images/n1.png">

6,超文本链接标签a

        超文本链接标签的功能就是他指代哪里就跳转去哪里。可以像目录一样,点哪个章节就去哪个章节;也可以像保存的网站一样,点哪个就打开哪个网页。

        一段文字,一张图片都可以附加超文本链接的功能。

        超文本链接标签,即<a></a>,是一个双标签。一般为<a href ="url">,href是其一个属性,href是Hypertext Reference的缩写,即超文本指代。意思是指定超链接目标的URL。href 属性的值可以是任何有效文档的相对或绝对URL,包括片段标识符和JavaScript代码段。

        URL全称UniformResourceLocator,意为统一资源定位器,也叫做网页地址。它是用来指出信息的所在位置及存取方式的。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。

        总结就是:世界上有很多文件,自己电脑和手机上的文件我们可以用路径名去找到。别人的文件都在别人的电脑、手机和服务器上,我们如何才能像在自己电脑里用路径名称去找别人的文件呢?可以使用互联网作为媒介,使用URL来代替路径名称去访问别人电脑上的文件。

<a href="https://www.baidu.com/">点击这里调转到百度</a>

        超文本链接在浏览器中的展现形式如下:

        1,未点击过的链接为蓝色+下划线

        2,已经点击过的链接为紫色+下划线

        3,把鼠标移到连接数为红色+下划线;而且鼠标变为一只手。

a96d466fa4654dc79d15fedaef45de2c.png

7,超本文链接之锚点

        这部分也是超文本链接的一部分,用于解决网页内的内容跳转,就像看电子小说一样,点击哪一章就跳到哪一章。

        全局属性是指:html中所有标签的都具有的属性。ID属性就是一个全局属性,所有的标签都具有ID属性,ID数据用来确定每个标签的唯一性,相当于给写的每个标签发一张身份证,是独一无二的。当一个东西具有唯一性的好处很多,比如可以拿来准确定位。

<a href="#h2_goto">点这里跳转</a>
<h2 id="h2_goto">这里是标题名称2</h2>

        这里先给一个<h2>标签取一个ID叫h2_goto;然后使用锚点来跳转,记得加上井号#来告诉浏览器这个属性是ID,即#h2_goto。

8,div标签

        div标签是一个双标签,即<div></div> 。他是一个容器或者理解为一个房间,里面用来容纳一些内容,当然这些内容的是html的元素。比他大的容器有<html></html>;<body></body>。

9,常用的文本标签

        文本标签是指:这些标签都是用来决定文字的格式的,比如粗体,倾斜,下划线等,类似于在WORD中修改字体格式一样。

c91485d98c53433c8a16d615ed2830f3.png

    <em>666</em>
    <br>
    <b>666</b>
    <br>
    <i>666</i>
    <br>
    <strong>666</strong>
    <br>
    <sub>666</sub>
    <br>
    <sup>666</sup>
    <br>
    <del>666</del>
    <br>
    <span>666</span>

ce28075e54484a45be093a1c7399d9d9.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409664.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JS-获取网页滑动距离,并实时监听

介绍 本文主要介绍通过JS获取网页滑动距离&#xff0c;并实时监听的方法。分析document.body.scrollTop、document.documentElement.scrollTop、window.pageYOffset 三者之间的区别。 一、获取网页滑动距离 JS方法&#xff1a; console.log(网页被卷去的高&#xff1a;, doc…

05-ES6语法:解构赋值

本文我们介绍ES6中解构赋值。ES6的解构赋值语法是一种JS表达式。解构赋值语法是一种JS表达式&#xff0c;通过解构赋值&#xff0c;可以将属性/值从对象/数组中取出&#xff0c;赋值给其他变量。 下面我们具体来看看解构赋值是什么&#xff1f;以及是如何使用的&#xff1f; …

Bootstrap——制作个人简历网页、工具类【边框(添加、删除、颜色、圆角)、清除浮动、颜色(文本、链接、背景)、display属性、浮动、定位、文本对齐】

制作个人简历网页 代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><meta name"viewport"content"widthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,u…

移动端H5网页开发必备知识

简介 工欲善其事必先利其器&#xff0c;今天这篇文章主要讲解移动端H5开发必备的一些基础知识以及移动端适配和布局方案。如果已经看过这篇文章了或者已经掌握了移动端基础的话可以看笔者写的 移动端H5网页开发常见问题汇总 移动端开发必备知识-Hybrid App 像素 像素即一个…

在Vue中获取DOM元素的实际宽高

最近使用 D3.js 开发可视化图表&#xff0c;因为移动端做了 rem 适配&#xff0c;所以需要动态计算获取图表容器的宽高&#xff0c;其中涉及到一些原生DOM API的使用&#xff0c;避免遗忘这里总结一下。 一、获取元素 在 Vue 中可以使用 ref 来获取一个真实的 DOM 元素。 为了…

【Vue】Vue 项目前端响应式布局及框架搭建

文章目录Vue 项目前端响应式布局及框架搭建一、项目基本结构二、项目分辨率响应式创建1、flexible.js2、引用 flexible 插件3、修改 flexible 默认配置4、cssrem 插件 (px -> rem)三、项目页面框架搭建1、设置背景图2、设置标题文字3、页面主体部分&#xff08;1&#xff09…

Request请求转发getRequestDispatcher

文章目录一、getRequestDispatcher理解二、RequestDispatcher.forward()方法与HttpServletResponse.sendRedirect()方法的区别三、实现步骤1.编写index.jsp登录页面2.编写跳转页面success.jsp页面3.编写LoginServlet.java类四、运行示例一、getRequestDispatcher理解 request.g…

Vue项目使用百度地图api

目录 1.百度开发者认证 2.创建应用 3.引用百度地图API文件 4.展示地图 1.百度开发者认证 进入百度地图开放平台 官网&#xff0c;&#xff08;认证需要身份证号码&#xff0c;人脸识别&#xff0c;手机百度APP&#xff0c;邮箱地址&#xff09; 注册登录完成&#xff0c;…

vue中devTools插件安装教程

vue-devTools 为了更方便的在开发过程中对 Vue 程序进行调试&#xff0c;除了传统的浏览器自带的 debug 工具以外&#xff0c;我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试 vue-devTools插件&#xff1a;点击下载 插件安装教程&#xff1a;https://chrome.zzzmh.cn…

js深拷贝方法

一、ES6中扩展运算符 ES6中的扩展运算符&#xff08;如果只是一层数组或者对象就是深拷贝&#xff0c;多层就是浅拷贝&#xff09; var obj {name : "海绵宝宝",age: 18,sayHello (){console.log("比奇堡早上好");}}var newObj {...obj}console.log(&q…

Vue中的跨域解决方案

前言 跨域是因为浏览器存在对不同源页面数据接收的限制。这种限制就是浏览器的同源策略。 同源策略是浏览器的安全机制&#xff0c;跨域的原理就是通过各种方式避开浏览器的安全机制 使用 在项目开发时&#xff0c;对跨域的概念仅限于了解&#xff0c;所以没有注重过程&#xf…

Vue全新一代状态管理库 Pinia【一篇通】

文章目录前言1. Pinia 是什么&#xff1f;1.1 为什么取名叫 Pinia?1.2. 为什么要使用 Pinia ?2. 安装 Pinia2.1.创建 Store2.1.1. Option 类型 Store2.1.2 Setup 函数类型 Store2.1.3 模板中使用3. State 的使用事项&#xff08;Option Store &#xff09;3.1 读取 State3.2 …

命令行 cnpm install 报错: Install fail Error: Unsupported URL Type: npm:vue-loader@^15.9.7

是不是在 进行 cnpm install 报了同款错误呢&#xff01; G:\Git\owl-read-admin>cnpm install Install fail! Error: Unsupported URL Type: npm:vue-loader^15.9.7 Error: Unsupported URL Type: npm:vue-loader^15.9.7at parseUrl (C:\Users\Lenovo\AppData\Roaming\np…

@DateTimeFormat注解

DateTimeFormat注解 前言 前言在使用DateTimeFormat进行格式化注解时&#xff0c;总是不能匹配前端传入的。格式总是报错 我这里使用的是pattern进行解析的的但是前端是给我传入的ISO类型的导致不能匹配所以总是报错。后来我们进行查看源码得到了答案。 源码解析 看下源码解析…

vue实现在线预览office文件

最近在做电子档案&#xff0c;后端提供了文件的华为云的oss链接。已经实现了点击下载文件的功能。但是呢&#xff0c;他们又希望常规的文件&#xff0c;可以直接点击预览&#xff0c;不需要下载。 按道理说&#xff0c;做文件的在线预览&#xff0c;买个第三方服务什么的&…

前端工程师都在用的 VSCode 常用插件

文章目录前言一、VSCode常用的插件1.Chinese (Simplified) (必备)2.Auto Rename Tag3.One Dark Pro 颜色主题4.格式化代码&#xff08;vscode系统自带&#xff09;5.open in browser 浏览器预览页面6. Live Server 实时预览&#xff08;推荐&#xff09;7. vscode-icons 设置文…

Vue用户管理(增删改查)功能详情

1、最终实现效果&#xff1a; Users.vue: <template><div><!--面包屑导航区域--><el-breadcrumb separator-class"el-icon-arrow-right"><el-breadcrumb-item :to"{ path: /home }">首页</el-breadcrumb-item><el…

Ant Design Vue文件上传详解

ant design 基于vue的文件上传 (XSLX文件篇) Upload 上传 template <a-uploadname"multipartFile":multiple"false":action"action"methods"post"change"uploadFile":file-list"fileList":disabled"di…

Emmet语法总结

1 Emmet简介 Emmet是一个Web开发工具&#xff0c;用于加快HTML和CSS代码的编写速度。使用Emmet能够通过简短的表达式生成HTML或CSS代码片段。另外&#xff0c;截至2022年&#xff0c;主流的编辑器工具如Visual Studio Code、WebStorm都已经集成了Emmet工具&#xff0c;无需手动…

Element-Plus el-col、el-row快速布局

文章目录前言一、el-colspanpush & pull响应式offset二、el-rowgutterjustifyalign总结前言 拖拉了一晚, 总结了一些Layout布局工具的使用方法. 一、el-col 本来打算先说row的… 写完看了一遍感觉还是换过来的好(捂脸). el-col是el-row的子元素. 在el-row添加 style&qu…