HTML标签相关内容

Silence/

已于 2022-04-19 21:09:59 修改

阅读量893

点赞数 1

文章标签： html

于 2022-04-13 17:02:29 首次发布

本文链接：https://blog.csdn.net/lurance_/article/details/124147523

版权

WEB标准构成：

结构：HTML—页面骨架

样式：CSS—页面样式

行为：JS—页面动态效果

一、HTML概述

HTML：超文本标记语言，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。【html中，一切皆标签】

html中的标签进行分类：

1）只有一个的标签：非闭合标签 <标签 > <标签 />

2 ）有开始有结束的标签：闭合标签 <标签> </标签>

html的固定格式：

<!doctype>  
document type 文档类型
<html> 
	<head>
        <meta charset="UTF-8">=========》配置页面的编码集 utf-8
        <title>Title</title>===========>页面的标题 
    </head>
	<body>
		显示的内容
	</body>     
</html> html文件的根标签

二、HTML标签的分类

1、行内元素：a、b、strong、i、span标签
将默认在同一行上进行显示，宽度是随着标签中内容的变化而变化的元素，称为行内元素。

    <b>fjdfjgfgfgdkfj</b> 加粗
    <strong>fjdfjgfgfgdkfj</strong>====》简单的加粗，可以使用；细致的操作，使用css样式

    <i>jfdkjfdkljf</i> 倾斜
    <span>fhdfjkdfh</span>  普通的文本

2、块级元素：div、p、h1-h6标题标签、ol、li标签
列表 ul、li、dl、dt、dd 、table 、form

3、行内块元素：td、th、img、audio、vedio、input、textarea标签

可以设置宽高，宽度不随着内容的变化而变化，

三、常用标签

1、标题标签：<h1>h1的标签</h1>；定义一个标题

默认的标签是以下几个，也可以通过css来调整任何标签的字体大小。

//h1-h6标题标签
    <h1>h1的标签</h1>
    <h2>h2的标签</h2>
    <h3>h3的标签</h3>
    <h4>h4的标签</h4>
    <h5>h5的标签</h5>
    <h6>h6的标签</h6>

2、段落标签：<p>段落的标签</p>；定义一个段落

<p>jdsjfdskfjl</p>  以后涉及到标签中内容嵌套  尽量的不要p标签 尽量用div替代

3、超链接标签：<a href="http://www.baidu.com" target="_blank">百度一下</a>；跳转功能

    <a href="http://www.baidu.com">
        百度一下
    </a> ========》超链接  点击的可以跳转到指定的地址  href属性进行的指定
    <a href="test1.html">
        百度一下
    </a>=========》可以跳转到指定的页面
    
    <a href="test1.html" target="_blank">
        百度一下
    </a>  ========》target  跳转的目标， 默认_self 当前页面打开 ,_blank 新的窗口打开

4、图片标签：<img src="img/test.png" width="100" height="100"/>；在页面中显示图片

可加载本地图片进行项目中；也可通过http网址进行加载

    <!--src 指定图片的位置    
		src指定图片位置，找不到图片，破损图片的图标
		width 宽 height 高  默认单位 像素  
		alt:图片没有加载成功时，提醒信息
		title: 属性 放到图片上进行的提醒的信息
	-->
	<img alt="图片加载失败" title="图片的标题" src="https://gimg2.baidu.com/image_
search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100120461512E-0-lp.
jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=
jpeg?sec=1640054676&t=e6ec4345ed8fc1dee3639db87fd46c5c" width="200" height="200"  />
	注意：加载图片，一定要写height和width 
	浏览器加载图片时，计算图片的宽高，如果自己写了宽高，浏览器不用计算===>行内块元素

语音、视频标签：在网页中播放语音和视频；

区别：视频可以设置宽高，并且显示视频；

controls是否显示播放控件；autoplay自动播放；loop循环播放

	<audio src="img/day7.1.增删改封装.mp3"
		controls="controls"
		autoplay="autoplay"
		loop="loop"></audio>
	<video src="img/day7.1.增删改封装.mp4"
		width="100px" height="100px"
		controls="controls"
		autoplay="autoplay"
	   loop="loop"></video>  ==>行内块元素

5、列表标签：

有序列表，证明每一项是有顺序的，显示时行号进行标识
<ol type="a">  type 行号的标识 指定不同的类型
    <li>列表第一项</li>
    <li>列表第二项</li>
    <li>列表第三项</li>
    <li>列表第四项</li>
</ol>
无序列表   显示时图标进行标识
<ul type="square"> 行号的标识 指定不同的类型
    <li>列表第一项</li>
    <li>列表第二项</li>
    <li>列表第三项</li>
    <li>列表第四项</li>
</ul>

自定义列表    标题+内容的区分
<dl>
    <dt>标题</dt>
    <dd>内容1</dd>
    <dd>内容1</dd>
    <dd>内容1</dd>
</dl>

6、表单系列标签：

input（输入框）：基本表单控件；type：用于指定不同的控件类型，text、password、data等。

    <input readonly="readonly" type="text" placeholder="输入用户名" value="valuetest"
 name="test"  />
    <input hidden="hidden"  />  
    <input required="required" type="password" placeholder="密码" name="pwd" />
    <input type="date" name="data" />
    <input type="time" name="time" />
    <input type="datetime-local" />

单选框radio、多选框checked：

			<!--单选 成为一组 才能只选中一个
				name: 单选框name相同时，是一组
			-->
			<label>
				男：<input checked="checked" type="radio" value="男" name="sex" />
			</label>
			女： <input type="radio" name="sex" value="女" />
			<br />
			
			<label>
				唱歌：<input type="checkbox" value="s" name="fav" />	
			</label>
			跑步：<input type="checkbox" value="r" name="fav" />
			读书：<input type="checkbox" value="read" name="fav" />

select下拉菜单：name属性设置在select上；value属性设置在option上；selected属性默认选中

    <select size="1" name="sel">
        <option value="1">北京</option>
        <option value="2">天津</option>
        <option value="3">上海</option>
        <option value="4" selected="selected">河北</option>
    </select>

表单按钮：submit:提交表单，数据默认提交到地址栏；

reset：重置表单，将表单中的内容重置为默认值

button：普通按钮，

			<input type="submit" value="登录" />
			
			<input type="button" value="登录"/>
			<!--重置的-->
			<input type="reset"  />

文件选择框：file：单文件上传

			<input type="file" name="file" />
			<input type="number" min="0" max="100" step="10"  />

textarea文本域：用于输入大段文字

    <!--大文本框-->
	<textarea cols="20" rows="10">显示的宽度和高度，超出出现下拉条
			dfreg
			fert
			fdsf
    </textarea>

form表单：提交页面输入数据；

action：规定了将表单标签提交到哪个页面；

method：get：提交的参数在url可以展示；速度快于post;提交内容长度有限制

Post：参数不在url显示；速度慢与get；提交内容长度无限制

场景：get查询使用；post提交数据使用（登录、注册等）

    <form action=” ” method=“get”>
        各种表单控件
    </form>

7、布局标签：

div和span是没有语义的标签，一般用于页面布局使用（项目中会经常使用到）

盒模型：div:大盒子，独占一行；span：小盒子，一行放多个

    <div>div标签1</div>
    <div contenteditable="true">div标签1</div> 标签中的内容可以进行编辑
    
    <span>长亭外</span>

Silence/

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML标签相关内容

WEB标准构成：结构：HTML—页面骨架样式：CSS—页面样式行为：JS—页面动态效果一、HTML概述HTML：超文本标记语言，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。【html中，一切皆标签】html中的标签进行分类：1）只有一个的标签：非闭合标签 <标签 > <标签 />2 ）有开...
复制链接

扫一扫