HTML中基本标签

最新推荐文章于 2022-12-28 11:16:38 发布

Destiny,635

最新推荐文章于 2022-12-28 11:16:38 发布

阅读量547

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_56319791/article/details/122312583

版权

标签的分类
块级标签：独占一行，可以设置宽高
行内标签：在一行内显示，不会独占一行，并且不能设置宽高，一般在行内标签内不包含块级标签，会影响页面布局
行内块标签：也是在一行内展示，不会独占一行，但是行内块标签可以设置宽高

虽然行内标签不能设置宽高，但是可以使用样式中的display属性将行内标签转换为块级标签，或者转换为行内块标签，这样就可以对行内标签设置宽高了

display:
block 表示将行内标签转换为块标签
inline-block 表示将行内标签转换为行内块标签
2. 页面基本框架

 <!DOCTYPE html>
 <html>
 	<!--头标签，一般设置页面的配置信息-->
	<header>
	   <!--设置页面的编码形式-->
		<meta charset="utf-8" /> 
		<!--设置页面的标题-->
		<title>页面标题</title>
		<!--设置页面的logo-->
		 <link rel="shortcut icon" URL/href="图片位置" type="image/x-icon"/>
		 <!--设置页面的样式-->
		 <style type="text/css"> </style>
		 <!--链接外边文件-->
		 <link />
		 <!--编写页面的js脚本-->
		 <script></script>
	</header>
	<!--body标签，一般页面的内容都放在这里面-->
	<body>
	</body>
</html>

p 标签文本标签 / 块标签独占一行，在p标签内部可以包含文本，img标签和表单
div标签块级标签进行分割页面用的可包含任何标签
span 标签行内标签
列表标签块标签

 ul  无序列表标签 子标签 <li></li>  可以嵌套列表标签
		   type="square/circle" 默认是实心圆点
		  square 实心小方块
		  circle 空心圆点
ol 有序列表标签  子标签<li></li>  也可以进行嵌套标签
		  type="1/a/i"  
		  1 表示是数字
		  a  表示字母
dl 表示定义标签 子标签 <dt><dt/> <dd></dd>
dt 定义列表标题
dd  对标题进行描述

a 超链接标签行内标签

<a href="链接的资源" target="_self/_blank" />
href 表示链接的资源
target 表示在那个窗口打卡， _self表示在当前窗口打开 _blank表示在一个新的窗口打开

img 图片标签行内块标签

<img src="图片的地址" alt="" />
src 表示图片链接的地址
alt 表示图片加载失败的时候显示的内容

form 表单标签

 <form action="提交的地址" method="GET/POST">
	<!--表示提交的内容/如登录的用户名密码等内容都可以发送到服务端-->
	action 表示提交的url地址 如 http://127.0.0.1:8080/路由信息/
	method 表示提交使用的方法 get/post（注册，提交文件）
	a img link 默认是get请求
</form>

input 输入框行内块标签

<input type="text/password/submit/reset" value="提交的值"
 placeholder="请输入内容" />
<!--type 表示输入框的类型, 
text表示文本类型，
password表示输入的是密码
格式，
submit表示一个提交按钮，
reset表示重置按钮，
spaceholder表示页面显示输入框的提示信息
button 表示一个按钮
file 表示提交文件 需要早form表单中设置属性Enctype="multipart/form-data"
radio 表示单选框
checkbox 表示复选框
-->

h1 ~ h6 标签块标签

<!--标题标签，显示内容依次从大到小-->
<h1>hello world</h1>
 <h2>hello world</h2>
  <h3>hello world</h3>
   <h4>hello world</h4>
    <h5>hello world</h5>
     <h6>hello world</h7>

行内标签转换为块标签或行内块标签

<!DOCTYPE html>
<html>
<header>
	<title>hello</title>
	<meta charset="utf-8" />
	<style>
		a{
		display:block/inline-block;
		width:300px;
		height:300px;
		}
	</style>
</header>
<body>
<!--a标签包含图片标签，在页面展示的时候，高度和宽度并不是一致的，但是这
也是行内标签包含行内标签，a标签是行内标签不能设置宽度和高度，这样我就会
需要转换为行内标签或者块标签，再进行设置宽度和高度-->
<a href="#">
	<img src="http://www.baidu.com" alt="百度一下" width="300px" height="300px"/>
</a>
</body>
</html>

label 标签，表示与某一个表单控件的id相关联，行内标签
table 表格标签 tr表示行 td 表示列
caption 表示表格的标题描述
colspan 表示列合并 rowspan表示行合并
border 表示表格的边框
border-collapse:collapse; 表示去掉表格边框之间的空隙
select 标签

 <select name="">
   <option value="1" selected>内容</option>
   <option value="2">内容2</option>
   <option value="3">内容3</option>
   <option value="4">内容4</option>
   <option value="5">内容5</option>
   <option value="6">内容6</option>
   .........
   <!--selected 表示默认选中的内容-->
</select>

textarea 文本区域
rows 表示行数，决定高度
cols 表示列数，决定宽度

<textarea rows="" cols="" name="" id=""></textarea>

Destiny,635

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML中基本标签

标签的分类块级标签：独占一行，可以设置宽高行内标签：在一行内显示，不会独占一行，并且不能设置宽高，一般在行内标签内不包含块级标签，会影响页面布局行内块标签：也是在一行内展示，不会独占一行，但是行内块标签可以设置宽高虽然行内标签不能设置宽高，但是可以使用样式中的display属性将行内标签转换为块级标签，或者转换为行内块标签，这样就可以对行内标签设置宽高了display:block 表示将行内标签转换为块标签inline-block 表示将行内标签转换为行内块标签2. 页面基.
复制链接

扫一扫