HTML-基础标签

1. HTML初识

        1.1 什么是HTML

        HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，是用来描述网页的一种语言。所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

        1.2 HTML骨架
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!-- 
    1. html 标签：所有HTML中标签的一个根节点，根标签
    2. head 标签：文档的头部（描述了文档的各种属性和信息，包括文档的标题、在web中的位置以及和其他文件的关系等。
                  绝大多数文档头部包含的数据都不会真正作为内容显示给读者。注意在head标签中我们必须要设置的标签是title.）
    3. tutle 标签：文档标题
    4. body 标签： 文档的主体（包含文档的所有内容如文本、超链接、图片等）
    5. <!DOCTYPE html> ：文档类型，用于向浏览器说明当前文档使用的是那种HTML或XHTML标准规范
    6. <meta charset="UTF-8"> ：字符集


 -->
        1.3 标签分类

                双标签：<标签名>内容</标签名> 该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。          

例如：<body>内容</body>

                 单标签：<标签名/> 单标签也称空标签，是指用一个标签符号既可以完整描述整个功能的标签。

例如：<br/>

    

2. 常用标签

        2.1 标题标签

                HTML提供了六个等级的标题，分别是 ：<h1><h1/>,<h2><h2/>,<h3><h3/>,<h4><h4/>,<h5><h5/>,<h6><h6/>。

                注意：1. 标题标签语义：作为标题使用，并且依据重要性递减

                           2. h1 标签因为重要，尽量少用。一般h1都是给logo或页面中重要的标题信息使用。

        其基本语法格式如下：

    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>

        页面显示：

        2.2 段落标签

               默认情况下，文本在一段中会根据浏览器窗口的大小自动换行。

<p>段落</p>
        2.3 水平线标签

                在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，<hr />就是创建横跨网页水平线的标签。其基本语法格式如下：

<hr/>

  

        2.4 换行标签

                使某段文本强制换行显示，使用换行标签

<br/>
        2.5 div span 标签            

                div span是没有语义的，是我们网页布局主要的2个盒子css+div。

                div就是division的缩写，分割、分区的意思，其实有很多div 来组合网页

                span，跨度、跨距；范围 

<body>
    文本内容
    <!-- div独占一行，所以适合做布局操作 -->
    <div>div内容</div>
    <!-- span不独占一行，所以适合做文本操作 -->
    <span>span1内容</span>
    <span>span2内容</span><br>
    <span style="color: red;"><del>原价998</del></span>现价98
</body>

 

        2.6 文本语气化标签

                在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

<body>
    <!-- b 粗体 i 斜体 u 下划线 s 删除线  
        这几个没有语义表示，只是样式变化
    -->
    <!-- strong 粗体 em 斜体 ins 下划线 del 删除线
        这些语义表示更强烈，有利于SEO搜索引擎搜索
        一下阅读软件在阅读时也会突出语气
    -->
    <b>粗体</b> &nbsp; <strong>粗体</strong><br>
    <i>斜体</i><em>斜体</em><br>
    <u>下滑线</u><ins>下划线</ins><br>
    <s>删除线</s><del>删除线</del><br>
</body>

        2.7 图片标签
                2.7.1 标签属性

                        属性就是特征，如手机的颜色、手机的尺寸等。

                        使用HTML制作网页时，如果需要HTML标签提供更多的信息，可以使用HTML标签属性加以设置。基本格式如下：

<标签名 属性1="属性值1" 属性2="属性值2"...>内容</标签名>

                        1. 标签可以有多个属性，必须写在开始标签中，位于标签名后面。

                        2. 属性之间不分先后顺序，标签名与属性、属性与属性之间以空格分开。

                        3. 任何标签的属性都有默认值，省略该属性则取默认值。

                2.7.2 图片标签
<body>
    <!-- src 图片源
        路径:相对路径：./ 当前文件夹下 ../ 父文件夹下  ../../ 父文件夹的父文件夹下
             绝对路径：D:/xxx/xxx
                        http://xxxxx
        
        alt 图片加载失败时，显示的文字
        width 宽度 height 高度 当只设置其中一个时，另一个等比例缩放
        border 边框
    -->

    <img src="./img/2.jpg" title="图片" alt="图片" height="600">
    <img src="./img/1.jpg" title="图片" alt="图片" height="600"><br>
    <img src="https://th.bing.com/th/id/OIP.5cWjcERPRH56xhAIqmoZEAHaEK?rs=1&pid=ImgDetMain" alt="图片" height="300" title="图">
    <img src="https://img.3dmgame.com/uploads/images/news/20190322/1553247085_178021.jpg" alt="图片" height="300" title="图">
    
</body>

   

        2.8 链接标签

                在HTML中创建朝链接，只需要用标签环绕需要被链接的对象即可，基本语法如下：

<body>
  
    <!-- href 必须写
        如果链接不能点击，说明没有href属性，或者href拼写错误

        target 打开方式
            _self 当前窗口打开，默认
            _blank 新窗口打开
        
        title 鼠标悬停提示文字
    -->
    <!-- <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a> -->
    <a href="http://www.taobao.com" target="_blank" title="淘宝">淘宝</a>
    <a href="http://www.baidu.com" target="_blank">百度</a>
    
</body>

                注意：1. 外部连接需要添加全域名，如：http://baidu.com

                           2.内部链接直接链接内部页面名称即可，比如< a href="index.html">首页</a >

                     3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

                          4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

                 锚点定位：通过创建锚点连接，用户能够快速定位到目标内容。常用于长页面。

<body>

    <!-- 1.使用<a href="id名">创建链接文本(被点击的)</a> 
        例如：<a href="#tp"> 
         2.使用相应的id名标注跳转目标的位置
        例如：<h3 id="tp">指定位置</h3> 
    -->

    <a href="#tp1">111</a>
    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
    <p id="tp1">1</p>
    <p>1</p><p>1</p>
    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
</body>

                base标签：设置整体链接的打开状态，写在<head></head>中。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base target="_blank"/> 
    <!-- 给当前文件中所有连接设置打开方式 -->
    <title>Document</title>
</head>
        2.9 特殊字符

        2.10 注释标签

                注释标签不会显示在浏览器窗口，但是会被下载到用户的计算机上。快捷键ctrl + / 或 ctrl + shift + /

<-- 注释语句 -->
        2.11 列表标签

                容器里面装载着文字或图表的一种形式，叫列表。

                列表的最大特点是：整齐、有序。

<body>
    <!-- ul 是无序列表，每一个li是一个列表项 -->
    <!-- 注意：
            1.  <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
            2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
            3. 无序列表会带有自己样式属性，但是一般不会使用，会使用CSS来定义
    -->
    <ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ul>

    <!-- ol 是有序列表，每一个li是一个列表项 -->
    <!-- type 标签可以定义样式 -->
    <ol type="a">
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>

    <!-- dl 是自定义列表 -->
    <dl>
        <dt>河北省</dt>
        <dd>石家庄</dd>
        <dd>唐山</dd>

        <dt>北京</dt>
        <dd>朝阳</dd>
        <dd>昌平</dd>
    </dl>
</body>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

nginx---------------重写功能 防盗链 反向代理 （五）

nginx---------------重写功能 防盗链 反向代理 （五）

一、重写功能 rewrite Nginx服务器利用 ngx_http_rewrite_module 模块解析和处理rewrite请求&#xff0c;此功能依靠 PCRE(perl compatible regular expression)&#xff0c;因此编译之前要安装PCRE库&#xff0c;rewrite是nginx服务器的重要功能之一&#xff0c;重写功能(…
阅读更多...
数据结构（C语言）代码实现（九）——迷宫探路表达式求值

数据结构（C语言）代码实现（九）——迷宫探路表达式求值

目录 参考资料 迷宫探路 顺序栈头文件SqStack.h 顺序栈函数实现SqStack.cpp 迷宫探路主函数 表达式求值 链式顺序栈头文件LinkStack.h 链式顺序栈函数实现LinkStack.cpp 表达式求值主函数 测试结果 参考资料 数据结构严蔚敏版 2021-9-22【数据结构/严蔚敏】【顺序…
阅读更多...
Django学习笔记-django使用pandas将上传的数据存到MySQL

Django学习笔记-django使用pandas将上传的数据存到MySQL

1.models中创建与excel表结构相同模型 2.模型映射 python manage.py makemigrations myapp01,python manage.py migrate 3.创建index,添加form,enctype使用multipart/form-data 4.urls中导入views,填写路由 5.views中创建index 6.如果为GET请求,直接返回index.html,如果为PO…
阅读更多...
历史新知网：寄快递寄个电脑显示器要多少钱？

历史新知网：寄快递寄个电脑显示器要多少钱？

以下文字信息由&#xff08;新史知识网&#xff09;编辑整理发布。 让我们赶紧来看看吧&#xff01; 问题1&#xff1a;快递寄电脑显示器要多少钱&#xff1f; 此物有多重&#xff1f; 顺丰寄就可以了&#xff0c;但是必须是原包装的&#xff0c;不然不好寄。 问题2&#xff1…
阅读更多...
阿里云中小企业扶持权益，助力企业开启智能时代创业新范式

阿里云中小企业扶持权益，助力企业开启智能时代创业新范式

在数字化浪潮的推动下&#xff0c;中小企业正面临着转型升级的重要关口。阿里云深知中小企业的挑战与机遇&#xff0c;特别推出了一系列中小企业扶持权益&#xff0c;旨在帮助企业以更低的成本、更高的效率拥抱云计算&#xff0c;开启智能时代创业的新范式。 一、企业上云权益…
阅读更多...
光伏预测 | Matlab基于CNN-SE-Attention-ITCN的多特征变量光伏预测

光伏预测 | Matlab基于CNN-SE-Attention-ITCN的多特征变量光伏预测

光伏预测 | Matlab基于CNN-SE-Attention-ITCN的多特征变量光伏预测 目录 光伏预测 | Matlab基于CNN-SE-Attention-ITCN的多特征变量光伏预测预测效果基本描述模型简介程序设计参考资料 预测效果 基本描述 Matlab基于CNN-SE-Attention-ITCN的多特征变量光伏预测 运行环境: Matla…
阅读更多...
【初中生讲机器学习】12. 似然函数和极大似然估计：原理、应用与代码实现

【初中生讲机器学习】12. 似然函数和极大似然估计：原理、应用与代码实现

创建时间&#xff1a;2024-02-23 最后编辑时间&#xff1a;2024-02-24 作者&#xff1a;Geeker_LStar 你好呀~这里是 Geeker_LStar 的人工智能学习专栏&#xff0c;很高兴遇见你~ 我是 Geeker_LStar&#xff0c;一名初三学生&#xff0c;热爱计算机和数学&#xff0c;我们一起加…
阅读更多...
Day04：APP架构小程序H5+Vue语言Web封装原生开发Flutter

Day04：APP架构小程序H5+Vue语言Web封装原生开发Flutter

目录 常见APP开发架构 APP-开发架构-原生态-IDEA APP-开发架构-Web封装-平台 APP-开发架构-H5&Vue-HBuilderX WX小程序-开发架构-Web封装-平台 WX小程序-开发架构-H5&Vue-HBuilderX 思维导图 章节知识点&#xff1a; 应用架构&#xff1a;Web/APP/云应用/三方服…
阅读更多...
[CISCN 2019华东南]Web11

[CISCN 2019华东南]Web11

打开题目 看到xff就应该想到抓包 看回显也是127.0.0.1&#xff0c;我们盲猜是不是ssti模板注入 输入{{7*7}}显示49 可以看的出来flag在根目录下 输入{system(‘cat /flag’)} 得到flag 知识点&#xff1a; 漏洞确认 一般情况下输入{$smarty.version}就可以看到返回的smarty…
阅读更多...
nebula容器方式安装：docker 安装nebula到windows

nebula容器方式安装：docker 安装nebula到windows

感谢阅读 基础环境安装安装docker下载nebula 安装数据库命令行安装查询network nebula-docker-compose_nebula-net并初始化查询安装初始使用root&#xff08;God用户类似LINUX的root&#xff09; 关闭服务 安装UI 基础环境安装 安装docker 点我下载docker 下载nebula 数据…
阅读更多...
Python 实现Excel自动化办公（中）

Python 实现Excel自动化办公（中）

在上一篇文章的基础上进行一些特殊的处理&#xff0c;这里的特殊处理主要是涉及到了日期格式数据的处理&#xff08;上一篇文章大家估计也看到了日期数据的处理是不对的&#xff09;以及常用的聚合数据统计处理&#xff0c;可以有效的实现你的常用统计要求。代码如下&#xff1…
阅读更多...
Spring Boot项目误将Integer类型写成int来进行传参

Spring Boot项目误将Integer类型写成int来进行传参

在处理项目中Idea中无报错&#xff1a; 问题&#xff1a; localhost:8080/param/m2在浏览器中输入&#xff1a;localhost:8080/param/m2 产生报错&#xff1a; This application has no explicit mapping for /error, so you are seeing this as a fallback. Tue Feb 27 20:55…
阅读更多...
MATLAB_ESP32有限脉冲响应FIR无限脉冲响应IIR滤波器

MATLAB_ESP32有限脉冲响应FIR无限脉冲响应IIR滤波器

要点 ESP32闪烁LED&#xff0c;计时LEDESP32基础控制&#xff1a;温控输出串口监控&#xff0c;LCD事件计数器&#xff0c;SD卡读写&#xff0c;扫描WiFi网络&#xff0c;手机控制LED&#xff0c;经典蓝牙、数字麦克风捕捉音频、使用放大器和喇叭、播放SD卡和闪存MP3文件、立体…
阅读更多...
使用 kubeadm 部署k8s集群

使用 kubeadm 部署k8s集群

一、所有节点系统初始化 1、常规初始化 2、内核版本升级以及内核限制文件参数修改 还可以考虑将旧版本的内核卸载 二、准备nginx负载均衡器和keepalived nginx四层代理&#xff1a; keepalived配置&#xff1a; nginx检测脚本&#xff1a; 三、所有节点部署docker&#xff0c…
阅读更多...
2023年06月CCF-GESP编程能力等级认证Scratch图形化编程二级真题解析

2023年06月CCF-GESP编程能力等级认证Scratch图形化编程二级真题解析

一、单选题（共10题，共30分） 第1题 高级语言编写的程序需要经过以下（ ）操作，可以生成在计算机上运行的可执行代码。 A：编辑 B：保存 C：调试 D：编译 答案：D 第2题 默认小猫角色，执行下列程序，说法错误的是？( ) A：不按下空格键，小猫会随机移动 B：不按下空格…
阅读更多...
高防IP简介

高防IP简介

高防IP可以防御的有包括但不限于以下类型&#xff1a; SYN Flood、UDP Flood、ICMP Flood、IGMP Flood、ACK Flood、Ping Sweep 等攻击。高防IP专注于解决云外业务遭受大流量DDoS攻击的防护服务。支持网站和非网站类业务的DDoS、CC防护&#xff0c;用户通过配置转发规则&#x…
阅读更多...
STM32F103学习笔记（六） RTC实时时钟（应用篇）

STM32F103学习笔记（六） RTC实时时钟（应用篇）

目录 1. RTC 实时时钟的应用场景 2. RTC 的配置与初始化 2.1 设置 RTC 时钟源 2.2 初始化 RTC 寄存器 2.3 中断配置 2.4 备份寄存器配置 2.5 校准 RTC 3. 实例演示代码 4. 总结 1. RTC 实时时钟的应用场景 实时时钟&#xff08;RTC&#xff09;在嵌入式系统中具有广泛…
阅读更多...
html5盒子模型

html5盒子模型

1.边框的常用属性 border-color 属性 说明 示例 border-top-color 上边框颜色 border-top-color:#369; border-right-color 右边框颜色 border-right-color:#369; border-bottom-color 下边框颜色 border-bottom-color:#fae45b; border-left-color 左边框颜色…
阅读更多...
phpldapadmin This base cannot be created with PLA

phpldapadmin This base cannot be created with PLA

phpldapadmin This base cannot be created with PLA 1、问题描述2、问题分析3、解决方法&#xff1a;创建根节点 1、问题描述 安装phpldapadmin参考链接: https://blog.csdn.net/OceanWaves1993/article/details/136048686?spm1001.2014.3001.5501 刚安装完成phpldapadmin&…
阅读更多...
括号生成（力扣题目22）

括号生成（力扣题目22）

题目描述&#xff1a; 数字 n 代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;["((()))","(()())","(())()&q…
阅读更多...
最新文章

Copyright @ 2022~2023