HTML初识(标签、路径)

最新推荐文章于 2023-04-18 19:07:16 发布
最新推荐文章于 2023-04-18 19:07:16 发布
阅读量125 收藏
点赞数
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43663401/article/details/110424068
版权

  1. 什么是HTML
    Hyper Text Markup Language 超 文本 标记 语言
    通过给文字添加标签的方式增加原文字在网页中的语义

  2. HTML 编辑工具
    01、DreamWeaver 、
    02、Sublime 占内存小 方便操作
    03、记事本
    04、webStorm
    05、Hbuilder

  3. HTML的基本骨架

    <!--文档类型生声明 h5-->
<!DOCTYPE html>
<!--html的文档开始-->
<html>
<!--html的头部  常用来引入外部文件-->
<head lang="en">
    <!--meta：元-->
    <!--UTF-8：国际通用字库  里面涵盖了所有国家的所有语言-->
    <!--gbk  gb2312:国标字库 里面涵盖了汉字和少数外文-->
    <meta charset="UTF-8">
    <!--标题标签  显示在浏览器TAB栏-->
    <title>标题</title>
</head>
<!--HTML  文档的主体部分-->
<body>
   主体、内容
</body>
</html>

  4. 基本标签

    1. 标题标签
      h : headline 标题的意思

      	<h1>我是标题1号</h1>
	<h2>我是标题1号</h2>
	<h3>我是标题1号</h3>
	<h4>我是标题1号</h4>
	<h5>我是标题1号</h5>
	<h6>我是标题1号</h6>

    2. 段落标签


      p: paragraph 段落标签

      	<p>段落</p>

    3. 图片标签
      单双标签的区别：看标签中间是否需要添加内容
      img: image

      `<!--src:source  资源的意思-->
<img src=”图片所在路径” alt=”图片找不到替代的文字” title=”鼠标悬停提示的字符” width=”图片的宽度” height=”图片的高度”/>

  5. 、锚点标签 a anchor
    a标签的几种跳转方式

    <a href =”路径” target=”跳转的窗口”>aaa</a>

    1. 不同页面之间的跳转

      <a href="html/money.html">我要钱</a>

    2. 跳转到外部页面

      <a href="http://www.baidu.com">去百度</a>

    3. 、页面内部跳转
      (1) 从底部跳到顶部

      <a href="#">去顶部</a>

      (2) 从页面的一个点到另一个点

      <a href="#here">去here</a>
<a name="here">我在这里</a>

  6. 媒体标签

    1. 音频标签 audio
    2. 视频标签 video
      <!--controls :添加控制器  让音频能够被显示控制-->
<!--loop ：循环播放-->
<!--autoplay：自动播放-->
<audio src="../audio/2.mp3" controls loop autoplay >您的浏览器版本过低  扔了吧</audio>
<video src="../video/1.mp4" controls>您的浏览器版本过低</video>

  7. 列表标签(组标签)

    1. 无序列表
      Unordered list

      • 无序列表
        List item
      • 列表项

      <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none
        }
        li {
            float: left;
            width: 100px;
            height: 50px;
            background-color: red;
            line-height: 50px;
            text-align: center;
        }
        a {
            display: block;
            text-decoration: none;
            color: green;
        }
        li a:hover {
            color: black;
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="#">南京</a></li>
    <li><a href="#">扬州</a></li>
    <li><a href="#">无锡</a></li>
    <li><a href="#">徐州</a></li>
    <li><a href="#">宿迁</a></li>
    <li><a href="#">盐城</a></li>
</ul>
</body>

    2. 有序列表
      ordered list

      1. 无序列表
        List item
      2. 列表项

      <ol>
    <li>交换余生</li>
    <li>告白地球</li>
    <li>句号</li>
</ol>

    3. 自定义列表
      Definition list dl 定义列表
      Definition title dt 定义标题
      Definition description dd 定义表诉词

      <!--dl>dt+dd-->
<dl>
    <dt>扬州</dt>
    <dd>咸鸭蛋 阳春面 狮子头</dd>
    <dt>宿迁</dt>
    <dd>面皮 凉皮 包子</dd>
    <dt>徐州</dt>
    <dd>地锅鸡 擀面皮 板面</dd>
    <dt>连云港</dt>
    <dd>豆丹 凤鹅 煎饼</dd>
    <dt>盐城</dt>
    <dd>蛋饼 鱼泡面 麻花</dd>
</dl>

  8. div span
    Div : division 表示大范围的分割
    Span : 表示小范围的区域

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        span {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
     <div>你</div>
     <div>真</div>
     <div>好</div>
     <div>看</div>
     <span>哈</span>
     <span>哈</span>
     <span>哈</span>
     <span></span>
</body>

    区别：

    1. 两者都表示分割的意思，在HTML里面根据语义没有任何样式
    2. Div在html里面是容器级元素
      Span 是文本级元素
    3. div 在CSS里面是块级元素
      Span 在css里面是行内元素

    HTML标签分类
    A、容器级元素：里面什么都可嵌套 包括自己
    Div ul li ol li dl dt dd
    B、文本级元素：标签里面只可以放 文字图片 表单元素 a p img

  9. 表单元素
    表单就是用来收集用户信息 让用户填写或者选择的

  10. 路径

    1. 相对路径
      (1) 同级比较 直接写
    <img src="2.jpg" alt=""/>
    1. 从外向内
    <img src="img/2.jpg" alt=""/>
    1. 从内向外
    <img src="../img/timg%20(2).jpg" alt=""/>
孙磊9612
关注
专栏目录
1、HTML初识_排版、图片、音频、视频、超链接标签和绝对、相对路径学习
csweldn520的专栏
08-10 194
3、排版标签 （1）、标题标签 （2）、段落标签 （3）、换行标签 （4）、水平线标签 （5）、文本格式化标签 4、图片标签 5、路径 （1）、绝对路径 （2）、相对路径 6、音频标签 7、视频标签 8、链接标签 （四）、综合案例 1、招聘案例 2、今日热词案例.........
初识HTML
qq_57126801的博客
07-15 745
HTML是HyperTextMarkupLanguage(超文本标记语言)的缩写（超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素），html不是一种编程语言，而是一种，用于告诉浏览器如何去构造网页。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如文字如何处理，画面如何安排，图片如何显示等）。可以使用.html与.htm作为HTML文件的后缀名（扩展名）........
前端进阶之——HTML文件路径、标签+表格标签
N奈斯先生的博客
08-03 411
   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。   致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨 目录 一、HTML文件路径、标签 二、表格标签 一、HTML文件路径、标签 （一）HTML文件路径 相对路径： / 以文件所在位置为参考基础 ，建立的目录路径 文件位于HTML文件同一级，直接写文件名； 下一级路径：/ 上一级路径：…/ **绝对路径：**绝对位置 \ （二）标签 超链接标签： 语法：<a h
html标签（路径）
m0_71814235的博客
06-15 88
相对路径
html-伪类
weixin_30679823的博客
12-07 74
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; ...
HTML常用标签、特殊字符、路径
专研前端，探索后端
04-14 264
跳转到邮箱： <a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a> <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20
HTML的图像标签、路径的介绍
独树一枝
07-25 754
*图像标签 ***** *<img src="图片的路径"/> -src：图片的路径 -width：图片的宽度 -height：图片的高度 -alt ：图片显示的文字，把鼠标移动到图片上，停留片刻显示内容 **有...
HTML初识基础认知 + HTML标签
12-05
HTML初识基础认知是学习HTML标签的基础，理解HTML的基本语法和标签的关系，能够使用排版标签实现网页中的标题、段落等效果，使用相对路径选择不同目录下的文件，使用媒体标签在网页中显示图片、播放音频和视频，使用...
HTML5初识
weixin_48152652的博客
04-07 1271
初识HTML HTML（Hyper Text Markup Language）俗称超文本标记语言 HTML发展史：目前已经发展到HTML5版本 HTML5，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素，特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形，图表，图像和动画，以及不需要安装任何插件直接使用网页播放视频等。 W3C World Wide Web Consortium(万维网联盟) 成立于1994年，Web技术领域最权威和具影响力的国际中立
前端学习11：HTML路径、URL
最新发布
RainstormGod的博客
04-18 2754
文件路径描述了网站文件夹结构中某个文件的位置。
HTML路径和超链接标签
super码力的博客
09-24 1095
简单的说就是网址，说明文件保存在网站中具体位置的说明性信息。路径又分为绝对路径和相对路径，接下来以图片路径来举例。补充一个小知识：目录文件夹（普通文件夹）和根目录（打开目录文件夹第一层就是根目录）。
html中的路径的介绍：绝对路径和相对路径
兴趣是最好的老师
06-17 6285
路径的介绍     * 分类：两类     ** 绝对路径：就是直接从磁盘符开始的完整路径         - C:\Users\asus\Desktop\0413\day01\code\a.jpg         - http://www.baidu.com/b.jpg     ** 相对路径：         - 一个文件相对于另外一个文件的位置         - 三种：
HTML常用标签——路径
qq_44757223的博客
01-30 1806
文章目录前言一、相对路径二、绝对路径 前言 目录文件夹和根目录: 实际工作中,我们的文件不能随便乱放,否则用起来很难快速的找到他们,因此我们需要一个文件夹来管理他们。 目录文件夹：就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如html文件、图片等。 根目录:打开目录文件夹的第一层就是根目录。 页面中的图片会非常多,通常我们会新建一个文件夹来存放这些图像文件 ( images) , 这时再查找图像,就需要采用“路径”的方式来指定图像文件的位置。 路径可以分为: 1.相对路径 2.绝对路径 一
HTML的source标签动态改变路径
qq_40012232的博客
05-13 969
我们现在需要使用JQuery动态改变source标签的src路径： $('.video_cover').click(function () { var getAttr = $(this).prev().children('source').attr('src');//获取到另外一个视频的路径 var sourceSrc = $("<source src=\"" + getAttr + "\">");//将刚才获取到的 getAttr 视频路径动态赋值给source $(".video_bg
HTML的图像标签、目录文件夹、路径（相对路径、路径之绝对路径）
m0_51796659的博客
09-07 2207
HTML的图像标签(src、alt 、title、width、height、border 的介绍与使用)目录文件夹（根目录的介绍)、路径（相对路径( 图像文件位于HTML文件同一级、下一级、上一级路径如何操作) 、路径之绝对路径）
html路径标记是什么,html 常用标记（4）a标记、路径写法、锚点
weixin_39613089的博客
06-11 216
hao123网址百度京东本站的页面我的第一个页面管理后台 在写路径时“../”代表当前页面的上一层目录的同级目录进入a标记页面路径“/”表示站点的根目录校长信箱文件下载下载文章顶端锚点的使用第一章第二章第三章第一章因不知狗是谁家的，便装腔作势，声色俱厉地断然决定，要把狗弄死，并且要惩罚狗的主人，可当听到这狗是将军家的狗时，他立刻变了色，，胆怯地浑身冒汗 ，竟反过来训斥赫留金是出了名的鬼东西，是自己...
html-路径的介绍
banchousuo6747的博客
10-31 125
　　一、绝对路径 　　　　绝对路径是指文件在硬盘上真正存在的路径 　　　　　　- D:\Java\JavaWeb\day01\a.jpg 　　　　　　- http://www.baidu.com/b.jpg 　　二、相对路径　　　　　　一个文件相对于另外一个文件的位置 　　　　　　分为三种： 　　　　　　　　** html文件和图片在一个路径下（当层目录），可以直接...
html iframe 设置半透明_HTML常用标签
weixin_39981041的博客
12-01 628
0. 准备工作访问html的插件http-serveryarn global add http-server http-server . -c-1 hs -c-1http-server的使用方法parcel(速度比较慢)yarn global add parcel 文件名.htmlparcel的使用方法1. a 标签的用法属性href(hyper reference超级引用)网址；路径；伪协议；i...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值