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/xxxhttp://xxxxxalt 图片加载失败时,显示的文字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>

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

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

感谢阅读 基础环境安装安装docker下载nebula 安装数据库命令行安装查询network nebula-docker-compose_nebula-net并初始化查询安装初始使用root&#xff08;God用户类似LINUX的root&#xff09; 关闭服务 安装UI 基础环境安装 安装docker 点我下载docker 下载nebula 数据…

GIS之深度学习03:Anaconda无法正常启动问题汇总(更新)

在安装完成anaconda后&#xff0c;总会出现一些问题&#xff0c;以下为遇到的问题及解决方案&#xff1a; &#xff08;有问题请私信&#xff0c;持续更新&#xff09; 01&#xff1a;anaconda navigator启动时一直卡在 loading applications 页面 解决&#xff1a; 找到anac…

【Docker】安装及相关的命令

目录 一 Docker简介 1.1 是什么 1.2 优缺点 1.3 应用场景 1.4 安装 二 命令 2.1 Docker基本命令 2.2 Docker镜像命令 2.3 Docker容器命令 一 Docker简介 1.1 是什么 Docker是一个开源的应用容器引擎&#xff0c;它基于Go语言实现&#xff0c;并利用操作系统本身已有的…

springboot-基础-eclipse集成mybatis+使用方法+排错

备份笔记。所有代码都是2019年测试通过的&#xff0c;如有问题请自行搜索解决&#xff01; 目录 集成mybatis安装mybatis的jar包安装插件&#xff1a;mybatis-generator安装方法生成方法报错&#xff1a;java.lang.RuntimeException: Exception getting JDBC Driver mybatis注解…

H3C OSPF 外部路由引入实验

H3C OSPF 外部路由引入实验 实验拓扑 实验需求 按照图示配置 IP 地址R1&#xff0c;R2&#xff0c;R3 运行 OSPF 使内网互通&#xff0c;所有接口&#xff08;公网接口除外&#xff09;全部宣告进 Area 0&#xff1b;要求使用环回口作为 Router-id业务网段不允许出现协议报文…

Idea安装gideabrowser插件

Idea安装gideabrowser插件 一、安装二、设置教程 一、安装 gideabrowser链接地址 二、设置教程 在人生的舞台上&#xff0c;奋力拼搏&#xff0c;才能演绎出最精彩的人生之歌。面对挑战和困难&#xff0c;不妥协、不气馁&#xff0c;只争朝夕&#xff0c;方显坚韧与智慧。努…

基于ssm框架的博客系统

** &#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;** 一 、设计说明 1.1课题背…

2024智慧城市革命:人工智能、场景与运营的融合之力

在数字革命的浪潮中&#xff0c;2024年的智慧城市将成为人类社会进步的新地标。 三大关键元素——人工智能、场景应用和精准运营——正在重新塑造城市面貌&#xff0c;构建未来的智慧城市生活图景。 一、人工智能&#xff1a;赋能智慧城市 随着人工智能技术的快速发展&#x…

通过QScrollArea寻找最后一个弹簧并且设置弹簧大小

项目原因&#xff0c;最近需要通过QScrollArea寻找其中最后一个弹簧并且设置大小和策略&#xff0c;因为无法直接调用UI指针&#xff0c;所以只能用代码寻找。 直接上代码&#xff1a; if (m_scrollArea){int iScrollWidth m_labelSelectedTitle->width();m_scrollArea-&g…

【Web安全靶场】sqli-labs-master 1-20 BASIC-Injection

sqli-labs-master 1-20 BASIC-Injection 文章目录 sqli-labs-master 1-20 BASIC-Injection第一关-报错注入第二关-报错注入第三关-报错注入第四关-报错注入第五关-报错注入-双查询注入第六关-报错注入-双查询注入第七关-outfile写入webshell第八关-布尔盲注第九关-时间盲注第十…

【README 小技巧】 展示gitee中开源项目start

【README 小技巧】 展示gitee中开源项目start <a target"_blank" hrefhttps://gitee.com/wujiawei1207537021/wu-framework-parent><img srchttps://gitee.com/wujiawei1207537021/wu-framework-parent/badge/star.svg altGitee star/></a>

Eclipse是如何创建web project项目的?

前面几篇描述先后描述了tomcat的目录结构和访问机制&#xff0c;以及Eclipse的项目类型和怎么调用jar包&#xff0c;还有java的main函数等&#xff0c;这些是一些基础问题&#xff0c;基础高清出来才更容易搞清楚后面要说的东西&#xff0c;也就是需求带动学习&#xff0c;后面…