html常见基础标签大汇总

头部标签

meta标签

<!-- 声明必写 -->
<!DOCTYPE html> 
<!--常用字符编码-->
<meta charset="UTF-8">
<!--规定语言——英语-->
<html lang="en">
<!--作者信息-->
<meta name="anthor" content="http://www.yt4561761.com" />
<!--网页关键字-->
<meta name="keywords" content="html,网页"
<!--网页描述-->
<meta name="description" content=我的第一个网页 />
 <!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <!-- 三秒后页面重定向 -->
<meta http-equiv="refresh" content="3;url=http://www.baidu.com" />

link标签

<!-- 外部css链接,也可以链接js,或者其他外部资源 -->
<link rel="stylesheet" type="text/css" href="css1.css"/>

title标签

<title>
			我的个人博客
</title>

块级标签

<h1></h1>...<h6></h6>
<hr/>
<br/>
<p></p>
<blockquote cite="http://www.yt4561761.com"></blockquote>
<pre></pre>

最常见的div

<div>
	zzh
</div>

列表类

<!-- 三种列表 -->	
		<!-- 无序列表,有序列表,定义列表 -->
		<!--  无序列表
		 ul标签:列表体
		 li标签:列表项
		 通过type属性,修改列表状态,可选值:disc,square,circle
		 一般不使用以上默认值
		 如果需要使用项目符号,可以设置背景图片
		 ul和li都是块元素 -->
		 <ul>
		 	<li>zzh</li>
			<li>ldn</li>
			<li>mwh</li>
		 </ul>
		 
		 <!-- 有序列表
		  ol,li都是块元素
		  type可以改变序号类型
		  1,a,A,i,I-->
		  <ol type="I">
		  	<li>结构</li>
			<li>表现</li>
			<li>行为</li>
		  </ol>
		  
		  <!-- 对事物进行定义 
		  dl标签来创建一个定义列表-->
		  <dl>
			  <dt>武松</dt>
			  <dd>景阳岗打虎英雄,战斗力99.</dd>
			  <dd>后打死西门庆,投奔梁山。</dd>
			  <dl>
				  <dt>武大</dt>
				  <dd>卖烧饼的</dd>
			  </dl>
		  </dl>
		  <!-- 三种列表可以相互嵌套,都是块元素 -->

figure标签

<!--对插图进行描述 -->
<figure>
  <p>妹子</p>
  <p>拍摄者:zzh  拍摄时间:2019 年 9 月</p>
  <img src="girl.jpg" width="520" height="1314" />
</figure>

行内元素

<span style="color:red; font-size66px;">zzh</span>
<img src="zzh.jpg"/>
<q>hello</q>
<a href="#">我是超链接</a>

有关字体样式的

<!-- 总结 -->
		<pre>
			<!-- em 标签: --><em>用于强调的文本,一般显示为斜体字</em>
			<!-- strong 标签: --><strong>用于特别强调的文本,显示为粗体字</strong>
			<!-- cite 标签: --><cite>用于引证和举例,通常是斜体字</cite>
			<!-- code 标签: --><code>用来指出这是一组代码</code>
			<!-- small 标签: --><small>规定文本以小号字显示</small>
			<!-- big 标签: --><big>规定文本以大号字显示</big> 
			<!-- samp 标签: --><samp>显示一段计算机常用的字体,即宽度相等的字体</samp>
			<!-- kbd 标签: --><kbd>由用户输入文本,通常显示为较粗的宽体字</kbd>
			<!-- var 标签: --><var>用来表示变量,通常显示为斜体字</var>
			<!-- dfn 标签: --><dfn>表示一个定义或说明,通常显示为斜体字</dfn>
			<!-- sup 标签: -->12<sup>2</sup>=144
			<!-- sub 标签:硫酸亚铁的分子式是 --> Fe<sub>2</sub>SO<sub>4</sub> 
			<!-- ins插入标签 -->
			<!-- del删除内容标签 -->

表格标签

<!--两行三列的表格-->
<table>
			<!--行-->
			<tr>
				<td>a1</td><!--列-->
				<td>a2</td>
				<td>a3</td>
			</tr>
			<tr>
				<td>b1</td>
				<td>b2</td>
				<td>b3</td>
			</tr>
		</table>

表单标签

<!-- form标签中必须指定action属性,指向的是服务器地址 -->
			<form action="按钮.html">
<!-- 一个空白表单 -->
<!-- 使用fieldset为表单分组 -->
			<fieldset>
				<legend>必须输入</legend>
				
<!-- 文本框 -->
			用户名:<input type="text" name="user-name" value="大傻子">

<!-- 密码框 -->
			密码:&nbsp;&nbsp;&nbsp;<input type="password" name="password" value="000000">
			</fieldset>
			<fieldset>
				<legend>其他方面</legend>
				
<!-- 单选框 
通过name分组,达到单选的效果
如果希望在单选框和多选框中设置默认选中
使用 :checked=checked""-->
			性别:<input type="radio" name="i1" value="male" checked="checked"/>男<input name="i1" type="radio" value="female"/>女
			
<!-- 多选框
type=‘checkbox’-->
			爱好:<input type="checkbox" name="hobby" value="football"/>足球
				  <input type="checkbox" name="hobby" value="basketball" checked="checked"/>篮球
				  <input type="checkbox" name="hobby" value="badminton"/>羽毛球

<!-- 下拉列表
name属性必须给select
value属性给option
selected="selected"默认选项
给select选择属性multiple="multiple"-->
			你喜欢的明星:
			<select name="star" multiple="multiple">
				<optgroup label="男明星">
				<option value ="dc">邓超</option>
				<option value ="xs">许嵩</option>
				</optgroup>
				<optgroup label="女明星"><!-- 对选项进行分组 -->
				<option value ="dlrb" selected="selected">迪丽热巴</option>
				</optgroup>
			</select>
			 </fieldset>
			 
			 <fieldset>
				 <legend>自我介绍</legend>
				 
<!-- 多行文本框,文本域 -->
			 自我介绍<textarea rows="10" cols="20" name="textarea">
			 	"无畏"
			 </textarea>
			 </fieldset>
			 
<!-- 重置按钮 -->
			<input type="reset"/>
			<input type="button" value="单纯的按钮"/>
			
<!-- 提交按钮 -->
			<input type="submit" value="提交"/>
			<button type="button">单纯按钮</button>
			<button type="reset">重置</button>
			<button type="submit">提交</button>
			
<!-- 有一个表单提示标签 
for 属性指向一个表单项的id值-->
			<label for="">表单提示文字</label>

		</form>

后续会继续补充,,,

发布了29 篇原创文章 · 获赞 129 · 访问量 8721

猜你喜欢

转载自blog.csdn.net/weixin_44072077/article/details/101122135