05-24-HTML相关标签总结_html点击打开文件用哪个标签-CSDN博客

本文链接：https://blog.csdn.net/qq_52565297/article/details/117232126

这篇博客详细介绍了HTML的基本语法，包括双标签和单标签的使用，以及网页的基本结构，如<head>和<body>。重点讲解了HTML中的标题、段落、文字格式化以及图片和超链接的插入。此外，还深入探讨了表单的相关标签，如<input>、<form>、<textarea>、<select>以及不同类型的输入框，如文本、密码、复选、单选等，并提到了颜色选择器、文件选择和日期时间选择器的使用。

摘要由CSDN通过智能技术生成

总结

html

HTML的标签语法

html是通过不同的标签来个网页提供不同的内容,标签分文双标签和单标签两种
双标签: <标签名属性名1=“属性值1” 属性名2=“属性值2”> 标签内容</标签名>
单标签: <标签名/> 或者<标签名>

注意: 双标签的内容可以是文字也可以是其他标签–>
网页基本机构:
整个网页是一个html标签.(有多少网页就有多少个html标签,就有多少个html文件
head负责网页头部的显示
body负责网页内容的显示

  <!-- 设置html文件的编码方式 -->
  	<meta charset="utf-8" />
  	<!-- 设置网页标题 -->
  	<title>网页标题</title>
  	<!-- 设置网页图标
  	 link标签是用来导入外部文件的
  	 rel  设置导入文件的作用, icon-图标,stylesheet-样式表
  	 type - 设置被导入的文件的类型和格式:文件类型/文件后缀,image/png - 表示导入的文件是图片,后缀是png
  	 href - 被导入的文件的路径-->

HTML中的标题分为h1~h6
HTML中的段落用p表示用HTML的自有格式
普通文字用或者
相关的符号与分段

  	 <!-- 4.文字相关符号和分段
  	  强制换行 - <br>
  	  @nbsp - 空一个像素
  	  @emsp - 空一格-->
  	  <!-- 字体
  	   <b></b> <strong></strong> - 加粗
  	   
  	   <i></i> - 倾斜-->

HTML中常用标签

图片:img标签

<!-- 1.图片：img标签 
		src属性 - 图片地址
		title属性 - 图片标题(鼠标悬停在图片上以后才显示)
		alt属性 - 图片加载失败出现的提示消息-->

  <!-- 2.超链接:a标签
  		 <a href="跳转地址">可见可点击内容</a>
  		 href属性 - 跳转地址
  		 target属性 - 跳转方式,默认是_self(当前页面显示新的页面)
  		 _blank(新的窗口打开新的页面-->

表单相关标签

  <html>
  	<head>
  		<meta charset="utf-8">
  		<title></title>
  	</head>
  	<body>
  		<!-- 1.表单标签 
  		表单标签用来对变淡中所有相关标签进行重置和提交,
  		单独使用没有价值-->
  		<form action="" method="">
  			
  		</form>
  		<!-- 2.标签相关标签 -->
  		<!-- 2.1 input标签
  		 type属性 - 值不同,标签的表现和作用完全不同
  		 -->
  		 <form action="" method="post">
  		 	
  		 普通文本输入框:<input type="text"id="uesrname" value="小明" placeholder="请输入:" maxlength="20"/> <br><br>
  		 <!-- value属性  -  输入框中的内容
  		 placeholder属性  -  占位符,输入提示信息
  		 maxlength属性  -  最大长度限制
  		 
  		  -->
  		 密码输入框:<input type="password" 
  		 value="***---" placeholder="请输入密码:"/><br>
  		 <!-- 单选按钮需要通过lable标签来提供选项,
  		 当lable的for和input的id一致时,点击lable可以选择input
  		  如果希望多个选项中有且只有一个选择选项处于选中状态,需要将多个选项的name属性设置成一样的
  		  -->
  		 单选按钮:<input type="radio" value="男" id="sex1" name="sex" checked="checked" /><label for="sex1">男</lable>
  				<input type="radio" name="sex" id="sex2" value="女"/><label for="sex2">女</label>
  				<br><br>
  		 复选按钮:<input type="checkbox"  /><label >足球</label>
  				<input type="checkbox" /><label >篮球</label><br><br>
  		 普通按钮:<input type="button"  /><label>篮球</label><br><br>
  		 
  		 <!-- 重置按钮只能重置和重置按钮在同一个form标签里面的内容 -->
  		 重置按钮:<input type="reset" /><br><br>
  
  		 </form>
  		 颜色选择器:<input type="color"  /><br><br>
  		 文件选择:<input type="file" /><br><br>
  		 时间选择器:<input type="datetime-local"  /><br><br>
  		 日期选择器:<input type="date" /><br>
  		 
  	</body>
  </html>

  <html>
  	<head>
  		<meta charset="utf-8">
  		<title></title>
  	</head>
  	<body>
  		<!-- 1.多行文本输入 -->
  		<textarea rows="4" cols="100"placeholder="请说点什么吧:">小明</textarea><br><br>
  		<!-- 2.下拉列表 -->
  		<select name="city">
  			<option value="成都">成都市</option>
  			<option value="绵阳">绵阳</option>
  			<option value="达州">达州</option>
  		</select><br><br>
  		<!-- 2.列表 -->
  		<!-- 1)有序列表 -->
  		<ol>
  			<li>Python</li>
  			<li>java</li>
  			<li>c++</li>
  			<li>h5</li>
  		</ol>
  		<!-- 2).无序标签 -->
  		<ul>
  			<li>java</li>
  			<li>c</li>
  			<li>C++</li>
  			<li>H5</li>
  		</ul>
  		<!-- div标签 -->
  		<!-- 无意义标签.用来进行简单的合并分类,对具有相同属性或者相同意义的内容放在一起 -->
  	</body>
  </html>