HTML初识(标签、路径)

最新推荐文章于 2022-09-07 09:24:49 发布

孙磊9612

最新推荐文章于 2022-09-07 09:24:49 发布

阅读量125

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/qq_43663401/article/details/110424068

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

什么是HTML
Hyper Text Markup Language 超文本标记语言
通过给文字添加标签的方式增加原文字在网页中的语义
HTML 编辑工具
01、DreamWeaver 、
02、Sublime 占内存小方便操作
03、记事本
04、webStorm
05、Hbuilder

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>

基本标签

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

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

段落标签

p: paragraph 段落标签
```
	<p>段落</p>
```

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

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

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

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

不同页面之间的跳转

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

跳转到外部页面

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

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

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

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

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

媒体标签

音频标签 audio

视频标签 video

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

列表标签(组标签)

无序列表
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>

有序列表
ordered list

无序列表
List item
列表项

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

自定义列表
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>

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>

区别：

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

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

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

路径

相对路径
(1) 同级比较直接写

<img src="2.jpg" alt=""/>

从外向内

<img src="img/2.jpg" alt=""/>

从内向外

<img src="../img/timg%20(2).jpg" alt=""/>

孙磊9612

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录