0
点赞
收藏
分享

微信扫一扫

html基础标签

juneyale 2022-03-13 阅读 42
html

html基础 标签

目录

  1. 标签分类与语法
    1.1 单标签和双标签
    1.2 行内标签和块级标签

  2. 文本标签

    ​ 2.1标题标签

    ​ 2.2文本修饰标签

  3. 段落标签和换行标签

    ​ 3.1换行标签

    ​ 3.2 段落标签

    ​ 3.3水平线标签

  4. 图片标签

  5. 超链接标签

  6. 列表标签
    6.1 无序列表
    6.2 有序列表
    6.3 自定义列表

  7. 表格标签

  8. 表单标签

    ​ 8.1表单基本属性

    ​ 8.2文本输入框和密码框

    ​ 8.3多选框和单选框

    ​ 8.4文件框

    ​ 8.5滑动条

    ​ 8.6隐藏域

    ​ 8.7数字框

    ​ 8.8按钮

  9. 多媒体标签
    9.1视频标签
    9.2音频标签

  10. 其他标签
    10.1文本框
    10.2下拉标签

  11. div标签和span标签
    11.1 div标签
    11.2 span标签

1. 标签的分类与语法

1.1 单标签与双标签

双标签: 有开始标签 和 结束标签组成 ,开始标签:<标签名>结束标签:</标签名>
如:<p></p>,<h1></h1>,<em></em>...

双标签语法: <标签名 属性=属性值> … </标签名>

<!-- 双标签语法-->
<p>你好呀</p>
<h2>我是h2标签</h2>

单标签: 有一个标签组成 , 如<br /> , <hr /> , <img />...

单标签语法: <标签名 属性=属性值 / >

<!--  单标签语法 -->
<!-- 单标签后面的 /可有可无  
<br> 和 <br />是没区别的
-->
<br>             <!--换行-->
<img src="#" />      <!--导入图片-->

属性=属性值 一般我是不会在标签里写的,一般用css来写, 除了一些特殊的标签.

1.2 行内标签与块级标签

行内标签: 指一行可以放多个标签(一行多个).不会自动换行,不可以设置宽高.

块级标签: 指一行只能放一个标签(独占一行),会自动换行,可以设置宽高.

行内标签和块级标签的区别:

行内标签块级标签
所占的空间是其内容的大小所占的空间是一行
不会自动换行会自动换行
大小固定,不能设置宽高可以设置宽高
	<!--块级标签-->   
<div>我是块级标签</div>    
     呜呜呜.............

运行结果:
在这里插入图片描述

	<!--行内标签-->  
<span>我是行内标签</span>
     呜呜呜.............

运行结果:
在这里插入图片描述

提示: 行内标签和块级标签可以在css中进行转换

2.文本标签

2.1 标题标签(h系列标签): h1~h6

用途: 一般用于整个网页的标题或logo

	<!--标题标签-->
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>

运行结果:

在这里插入图片描述

你会发现每个h标签都是独占一行的(一行一个),所以h系列标签是块级标签

2.2文本修饰标签

<!--文本修饰标签-->

<!--无语义化 修饰标签-->          
<b>文本加粗</b>                    <!--加粗标签-->
<i>文本倾斜</i>                    <!--倾斜标签-->
<u>文本下划线</u>     			<!--下划线标签-->
<del>文本删除线</del>  			<!--删除线标签-->

<!--有语义化 修饰标签--> 
<strong>文本加粗</strong>			<!--加粗标签-->
<em>文本倾斜</em> 					<!--倾斜标签-->

<!--
	有语义化 和 无语义化 标签的作用是相同的没区别
	有语义化: strong 的英语翻译是 加粗
-->

运行结果:

在这里插入图片描述

你会发现文本修饰标签,它一行里有 加粗标签 倾斜标签 下划线标签…(一行多个),所以 文本修饰标签 它是 行内标签

3.常用文本标签总结

标签名双/单标签块级/行内标签标签作用
h系列标签双标签块级标签设置标题
b标签双标签行内标签字体加粗
i标签双标签行内标签字体倾斜
u标签双标签行内标签字体下划线
del标签双标签行内标签字体删除线
strong双标签行内标签字体加粗
em双标签行内标签字体倾斜

3.段落标签和换行标签

3.1换行标签

换行标签是用br标签来进行换行

<!--换行标签-->
<!--没有换行-->

你好呀,
不你不好,
不我很好.

<!--有换行-->


<br>你好呀,<br>
不你不好,<br>
不我很好.<br>

运行结果:

在这里插入图片描述

换行标签的每一行的行距(行与行的距离)是正常的

3.2段落标签

段落标签是用p标签,每个段落是有行距的

<!--段落标签-->
<p>我是p标签</p>
<p>我也是p标签</p>
<p>不,我才是p标签</p>

运行结果:
在这里插入图片描述

每个p标签是独占一行的,所有p标签是块级标签,并且p标签的行距是比较高的(每一段都有一定的行距)

3.3水平线标签

水平线标签-------------<hr>

<!--水平线标签-->
我下面是一个水平线标签<hr>
我和你分开了呀

运行结果:

在这里插入图片描述

水平线标签也是站一行的,所以水平线标签是块级标签

设置水平线的宽度

width:是设置宽度的属性,其值是像素(px);

<!--设置水平线的宽度-->
我下面是一个水平线标签<hr width="600px">
我和你分开了呀

在这里插入图片描述

3.4段落标签总结

标签名双/单标签行内/块级标签标签作用
p标签双标签块级标签设置段落
br标签单标签--------文本换行
hr标签单标签块级标签设置水平线

4.图片标签

图片标签 指导入图片

语法:<img src="图片位置 alt="文本" title="文本">

img是标签名;

src (必写)是获取图片位置,其值是图片的位置;

alt 当图标显示不出来时(如:图片位置错误,图片位置改动…),显示的文本

title 当鼠标放到图片上时,要显示的文字

图片位置:

  1. 绝对位置: 以你电脑的跟目录开始,也就是从磁盘符开始的完整路径 C:\wed\intdex.html;如我坐在12班的教室里,我的座位是第1列第3行的位置,但换了教室,我的座位不一定是第1列第3行.

2.相对路径: 以这个文件为参照物,如我和小明是同桌,直到毕业我们才不做同桌.我们换了教室,我和小明还是同桌

	<!--
	相对路径写法:
	1.获取同一级目录(文件)
	/文件(目录)    
	
	2.获取上一层目录(文件)
	./文件(目录)
	
	3.获取上上一层目录(文件)
	../文件(目录)
		

 -->

3.网络路径: 以网络上的服务器为路径,如www.baidu.com/img/du.png

<!--图片标签-->
<img src="../649b2.jpeg">

运行结果:
在这里插入图片描述

加入title属性

<!--图片标签  鼠标放到图片上时显示的文字-->
    <img src="../649b2.jpeg" title="你看见我了吗">

加入 alt属性

<!--图片标签 当图片加载失败后显示的文本-->
<img src="../649b2.jpeg" title="你想要的图片被我吃了哈">

在这里插入图片描述

那图片标签到底是块级标签还是行内标签呢?

<img src="../649b2.jpeg" />                     <!--图片标签是单标签--> 
呜呜呜.....这是我的图片

在这里插入图片描述

说名图片标签是行内标签.

5.超链接标签

超链接标签--------------a标签

a标签语法:<a href="链接路径">内容</a>

href是所要链接到的文件或网址…

链接文件:

<a href="./bay04/test01/02-input.html">我是a标签</a>

运行结果:

在这里插入图片描述

链接网址:

 <!--链接百度-->
    <a href="http://www.paidu.com">点我进百度</a>

运行结果
在这里插入图片描述

6.列表标签

6.1无序列表

无序列表------------------ul标签

列表下的每一项------li标签

ul标签只里只允许有li标签,不可以有别的标签,

li标签里可以有别的标签

ul标签和li标签都有一个属性 type,可以设置每一项的左图标,默认是实心圆

属性属性值作用
typedisc实心圆点
typecircle空心圆点
typesquare实心方块
<!--无序列表语法
	<ul>
		<li>第一项</li>
		<li>第二项</li>
		<li>第三项</li>
		<li>第四项</li>
	</ul>	
-->

	<ul>
		<li>我是默认的</li>
		<li>我是列表第二列</li>
		<li>我是列表第三列</li>
		<li>我是列表第四列</li>
	</ul>	

	<ul type="disc">
		<li>我是实心圆点</li>
		<li>我是列表第二列</li>
		<li>我是列表第三列</li>
		<li>我是列表第四列</li>
	</ul>

	<ul type="circle">
		<li>我是空心圆点</li>
		<li>我是列表第二列</li>
		<li>我是列表第三列</li>
		<li>我是列表第四列</li>
	</ul>

	<ul type="square">
		<li>我是方块</li>
		<li>我是列表第二列</li>
		<li>我是列表第三列</li>
		<li>我是列表第四列</li>
	</ul>

运行结果:

在这里插入图片描述

6.2有序列表

有序列表------------------ol标签

列表的每一项-------------li标签

ol标签只里只允许有li标签,不可以有别的标签,

li标签里可以有别的标签

ol标签和li标签都有一个属性 type,可以设置每一项的左图标,默认是阿拉伯数字

type属性值:

属性值作用
1阿拉伯数字,从1开始
A大写英文,从A开始
a小写英文,从a开始
I大写罗马数字,从I开始
i小写罗马数字,从i开始
<!--有序列表-->
<ol>
    <li>我是默认的</li>
	<li>我是列表第二列</li>
	<li>我是列表第三列</li>
	<li>我是列表第四列</li>
</ol>

<ol type="1">
    <li>我是1的</li>
	<li>我是列表第二列</li>
	<li>我是列表第三列</li>
	<li>我是列表第四列</li>
</ol>

<ol type="A">
    <li>我是A的</li>
	<li>我是列表第二列</li>
	<li>我是列表第三列</li>
	<li>我是列表第四列</li>
</ol>

<ol type="a">
    <li>我是a的</li>
	<li>我是列表第二列</li>
	<li>我是列表第三列</li>
	<li>我是列表第四列</li>
</ol>

<ol type="i">
    <li>我是i的</li>
	<li>我是列表第二列</li>
	<li>我是列表第三列</li>
	<li>我是列表第四列</li>
</ol>

<ol type="I">
    <li>我是I的</li>
	<li>我是列表第二列</li>
	<li>我是列表第三列</li>
	<li>我是列表第四列</li>
</ol>

在这里插入图片描述

6.3自定义列表

自定义类表--------------------------------dl标签

列表标题------------------------------------dt标签

列表的每一项-----------------------------dd标签

<!--自定义列表 语法-->
<!--
	<dl>
		<dt>第一个标题<dt>
			<dd>我是第一个标题的第一项</dd>
			<dd>我是第一个标题的第二项</dd>
		<dt>第二个标题<dt>
			<dd>我是第二个标题的第一项</dd>
			<dd>我是第二个标题的第二项</dd>
	</dl>



-->

	<dl>
		<dt>第一个标题<dt>
			<dd>我是第一个标题的第一项</dd>
			<dd>我是第一个标题的第二项</dd>
		<dt>第二个标题<dt>
			<dd>我是第二个标题的第一项</dd>
			<dd>我是第二个标题的第二项</dd>
	</dl>

在这里插入图片描述

所有的列表标签都是块级标签.

7.表格标签

定义表格---------------------table标签

定义行------------------------tr标签

定义单元格内容------------------td标签

定义表头----------------------th标签

属性值属性值:作用
border0px~npx:设置外边框大小
width0px~npx:设置宽度
height0px~npx:设置高度
<table>        <!--定义表格-->
    <tr>   		<!--定义第一行-->
		<!--定义表头-->        
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>		<!--定义第二行-->
        <!--定义第二行的内容-->
        <td>我</td>
        <td>你</td>
        <td>它</td>
    </tr>
        <tr>		<!--定义第三行-->
        <!--定义第二行的内容-->
        <td>as</td>
        <td>bs</td>
        <td>cs</td>
    </tr>
</table>

在这里插入图片描述

table标签border属性

border设置边距的宽度,值是像素(px)

语法: 

<table border="1px">        <!--定义表格-->
    <tr>   		<!--定义第一行-->
		<!--定义表头-->        
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>		<!--定义第二行-->
        <!--定义第二行的内容-->
        <td>我</td>
        <td>你</td>
        <td>它</td>
    </tr>
        <tr>		<!--定义第三行-->
        <!--定义第二行的内容-->
        <td>as</td>
        <td>bs</td>
        <td>cs</td>
    </tr>
</table>

在这里插入图片描述

caption标签

caption设置整个表格的标题;

<!--表格标签 表格标题-->
<table border="1px">        <!--定义表格-->
    <caption>我是一个标题</caption>      <!--设置整个表格的标题-->
    <tr>   		<!--定义第一行-->
		<!--定义表头-->        
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>		<!--定义第二行-->
        <!--定义第二行的内容-->
        <td>我</td>
        <td>你</td>
        <td>它</td>
    </tr>
        <tr>		<!--定义第三行-->
        <!--定义第二行的内容-->
        <td>as</td>
        <td>bs</td>
        <td>cs</td>
    </tr>
</table>

在这里插入图片描述

th,td合并属性

属性名属性值作用
rowspan合并单元格的个数合并列
colspan合并单元格的个数合并行

8.表单标签

8.1表单基本属性

定义表单------------form标签

定义输入框--------input标签

定义按钮-----------button标签

form属性

属性名属性值:作用
action收货地址:指定表单里的数据收获地
methodget/post:数据传输方式
name----:给表单起个名字,名字要和后端的程序一样

input标签属性

属性名作用
type设置输入框的类型
name元素的名称
value设置输入框内的默认值
maxlength设定输入框中的最大字符数
readonly(不用赋值)只读,不能写
disabled(不用符值)禁用
checked(不用赋值)设置多选/单选框的默认值
placeholder设置提示符

input标签的type属性

属性值作用
type文本类型
password密码类型
checkbox多选框
radio单选框
file文件域
range滑块
hidden隐藏域
number数字
button普通按钮
submit提交按钮
reset重置按钮

8.2文本输入框和密码框

<文本输入框------密码框>
    <!--定义表单-->
    <form action="#" methob="get">
        <!--定义文本输入框-->
        文本框:<input type="text">
        
        <!--定义密码框-->
        密码框:<input type="password">

    </form>

运行结果:

在这里插入图片描述

8.3多选框和单选框

<!--多选框----单选框-->
	<!--定义表单-->
	<form action="#" methob="get">
        <!--定义多选框-->
        多选框:<input type="checkbox">吃美食              
                <input type="checkbox">看电影
                <input type="checkbox">玩游戏

        <!--定义单选框-->
        <!--注意: 写单选框的时候一定要写 name属性 , 值相同代表它们是同一组的,
                    如果值name的值不同(不写),不是同一组,则变成多选.
        -->
        <br>
        单选框:<input type="radio" name="01">男
            <input type="radio" name="01">女
	</form>

运行结果:

在这里插入图片描述

7.4文件框

作用:上传文件

	<!--定义文件框-->        
<!--定义标单-->
        <form action="#" method="get">
            <!--定义文件域-->
            <input type="file">
        </form>

运行结果:
在这里插入图片描述

8.5滑动条

         <!--滑动条-->   
		<!--定义表单-->
		<form action="#" method="get">

                <!--滑动条-->>
                滑动条:<input type="range">


            </form>

运行结果:

在这里插入图片描述

7.6隐藏域

作用:有些数据不想让别人看到,但又必须要传到后台的数据

            <!--隐藏域-->
		<!--定义表单-->
		<form action="#" method="get">
                <!--隐藏域-->
                隐藏域:<input type="hidden" value="同意">
				<!--value是指定义默认值-->
            </form>

运行结果:
在这里插入图片描述

8.7数字框

				<!--数字框-->        
<!--定义标单-->
            <form action="#" method="get">
                <!--数字框-->
                数字框:<input type="number">
            </form>

运行结果:
在这里插入图片描述

8.8按钮

按钮有俩种写法

(1).input标签写法

        <!--定义标单-->
            <form action="#" method="get">

                <!--定义普通按钮-->
                <input type="button" value="普通按钮"><br>
                <!--重置按钮 重置所有的选项-->
                <input type="reset"><br>
                <!--提交按钮 递交表单里的所有数据-->
                <input type="submit"><br>
            </form>

运行结果:
在这里插入图片描述

(2)button标签写法

button标签语法<button type = "属性值" > 按钮内容 </button>

button标签type属性值

属性值作用
button普通按钮
submit提交按钮
reset重置按钮

        <!--定义表单-->   
<form action="#" method="get">
            <!--不写type,默认是提交按钮-->
            <button>默认是提交</button>
            <!--定义提交按钮-->
            <button type="submit">我是提交</button>
            <!--定义普通按钮-->
            <button type="button">我是普通按钮</button>
            <!--定义重置按钮-->
            <button type="reset">我是重置按钮</button>
        </form>

运行结果:
在这里插入图片描述

9.多媒体标签

9.1视频标签

视频标签--------------------video

video标签语法:<video src="视频路径"></video>

video标签属性

属性名属性值作用
src视频地址导入视频
autoplayautoplay自动播放
mutedmuted禁音
controlscontrols播放控件
looploop循环播放

注意: 要视频自动播放,必须设置为禁音,要不然不能自动播放,

9.2音频标签

音频标签------------audio

音频标签语法:<audio src="音频路径" controls></audio>

audio标签属性:

属性名属性值作用
src音频地址导入音频
mutedmuted禁音
controlscontrols播放控件
looploop循环播放

注意: 音频标签要设设 controls属性,才会显示

10.其它标签

10.1文本域

文本域-----------------textarea

文本域语法:<textarea>默认内容(可以不写)</textarea>

<!--定义文本域-->
<textarea></textarea>

运行结果:
在这里插入图片描述

文本域属性:

属性属性值作用
cols0px ~ npx设置文本域默认宽度
rows0px ~ npx设置文本域默认高度

10.2下拉标签

下拉标签--------------------------select

下拉标签的每一项--------------option

select标签下不能用别的标签,只能用option标签

option标签属性

selected属性是指默认值

<!--不加默认,以第一个为默认-->
<!--定义下拉标单-->
<select>
    <!--定义下拉表单的每一项-->
    <option>内容1</option>
    <option>内容2</option>
    <option>内容3</option>
    <option>内容4</option>
</select>

<!--加了默认-->
<!--定义下拉标单-->
<select>
    <!--定义下拉表单的每一项-->
    <option>内容1</option>
    <option>内容2</option>
    <option selected>内容3</option>
    <option>内容4</option>
</select>-->

运行结果:
在这里插入图片描述

11.div标签和span标签

11.1 div标签

div标签没有特定的功能,不过它很重要.

div标签是一个块级标签,常用于网页排版,div标签里可以写任何的标签

div标签可以说是个容器,把有某个功能的放到div里

语法:<div>....</div>

<div>
    <p>我是div里的p</p>
    <h4>我是div里的h4</h4>
    <div>
        我是div里的div;
        <a href="#">www.baidu.com</a>
        <a href="#">www.ddddd.com</a>
    </div>
</div>

<div>
    我是第二块div标签
</div>

运行结果:
在这里插入图片描述

11.2 span标签

span标签和div标签是差不多的

span是行内标签,

span标签语法:<span>内容</span>

span标签与div标签的区别:

span标签div标签
行内标签块级标签
举报

相关推荐

HTML基础标签

html

HTML基础&标签

html前端

html的基础标签

html前端

一、HTML基础标签

html

Html 部分基础标签

htmlhttpjavascript

HTML基础标签学习

HTML锚点下载文件Html/CSS前端开发

HTML基础标签汇总

html前端

HTML的基础标签与行标签

html5

HTML基础-html标签、标签属性及核心功能

html

HTML 中的基础标签

htmlcss表单
0 条评论