html常用标签及相互关系

	首先,HTML(Hyper Text Markup Language )业技术也就是超文本标记语言关于标签的分类有很多种,下面我介绍一些常用的标签:
块元素(block element)
	独占一行,默认宽高0*0,但可以设置宽高
  • div - 常用块级容易,也是css layout的主要标签
  • dl - 定义列表
<dl>
	<dt>…</dt>
	<dd>…</dd>
</dl>
  • form - 交互表单 (只能用来容纳其它块元素)
<form method=”GET/POST” action=”where” enctype=””>
	…
</form>
method: 
GET:显式提交		地址栏挂载?key=val&key2=val2…	
POST:隐式提交		流式
action:
	后台方法的别名(方便+安全)		键值对
enctype:
	application/x-www-form-urlencoded  文本
	application/multipart					文件
	application/json						json格式数据
	application/xml						xml格式数据
  • h1 - 大标题
  • h2 - 副标题
  • h3 - 3级标题
  • h4 - 4级标题
  • h5 - 5级标题
  • h6 - 6级标题
  • hr - 水平分隔线
  • menu - 菜单列表
  • ol - 有序列表
<ol>
	<li>…</li>
	<li>…</li>
	…
</ol>
  • p - 段落
  • ul - 无序列表
		<ul>
			<li>…</li>
			<li>…</li>
			…
		</ul>
  • H5 块:
    header 头
    footer 页脚
    aside 侧边栏
    nav 导航
    article 独立块
    section 专题块
内联元素(inline element)
	一般都是基于语义级(semantic)的基本元素,只能容纳文本或者其它内联元素。也可以细分为行级元素(按行显示,无宽高也不可以设置宽高,内容决定其真实大小)和行级块级元素(按行显示,有默认宽高也可以设置宽高)。
  • acronym - 首字
  • b - 粗体(不推荐)
  • big - 大字体
  • br - 换行
  • cite - 引用
  • code - 计算机代码(在引用源码的时候需要)
  • dfn - 定义字段
  • em - 强调
  • i - 斜体
  • input - 输入框
name		java后台取值用的键
id			js前端取值用、美化用的键
value		表单元素的值

<input type=”” name=”” id=”” value=””/>
type
	text				文本框
		autocomplete=”off”			关闭文本自动提示
		readonly						只读
	password		密码框
	radio			单选按钮
		name必须相同 必须提供value的值
		可以通过label的for属性捆绑id实现扩展选择
		checked		默认选中			
checkbox		复选框
	name必须相同 必须提供value的值
	可以通过label的for属性捆绑id实现扩展选择
date/datetime-local	日期
	number			数字框
		min		最小值
		max		最大值
		step		步幅
	email			邮箱框
tel				电话框
range			滑条
		min		最小值
		max		最大值
file				文件域
  • q - 短引用
  • samp - 定义范例计算机代码
  • select - 项目选择
<select name=”province”>		下拉列表
	<option value=”0”>请选择</option>
	<option value=”1”>江苏</option>
	<option value=”2”>安徽</option>
	<option value=”3”>浙江</option>
</select>
可以通过selected属性设置某option为默认选中项
  • span - 常用内联容器,定义文本内区块
  • strike - 中划线
  • strong - 粗体强调
  • sub - 下标
  • sup - 上标
  • textarea - 多行文本输入框
  • u - 下划线
  • a - 锚点
1.	超链接	<a target=”显示方式” href=”地址” title=”内容”>简要提示内容</a>
target:  _self		覆盖当前窗口
		_blank		打开新窗口
		_parent		覆盖父窗口(frameset/iframe/div)
		frameName	指定框架名称内显示
href:	目标页面地址
title:	悬窗提示文本                     文本、图片、邮箱、…
2.	锚链接
<a href=”页面地址#锚名”>提示内容</a>		# 当前页面(#前面不写)
<a name=”锚名”>[提示内容]</a>				[] 可选操作
  • == button - 按钮==
<button type=””>按钮文本</button>		
	type:
		submit		提交按钮
		reset 		重置按钮
		button		普通按钮
	disabled			禁用按钮
  • 非表单元素:
<img src=”” alt=”” title=””/>              提示信息
	src:		图片的地址(本地、网络)
	alt:		替换文本
	style:   float:left/right  左、右浮动
<video autoplay controls>
	<source src=”” type=”video/mp4”/>
	…
</video >
<audio autoplay controls >
	<source src=”” type=”audio/mp3”/>
	…
</audio>
	关于html其他常用的标签我这里就不一一列举了,大家可以查看[菜鸟教程html帮助手册](https://www.runoob.com/tags/html-reference.html)进行学习。
块级元素和内联元素的嵌套规则:

最基本:内联不能嵌套块级,块级可以嵌套内联元素;块级元素与块级元素并列、内联元素与内联元素并列

<div><h1></h1><p></p></div>     		正确(块级并列)
<div><a href="#"><span></span><span></span></a></div>     	
										正确(内联嵌套内联)
<span><div></div></span>     			错误(内联嵌套块级)
<div><h2></h2><span></span></div>  	错误(块级和内联并列)

有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:h1、h2、h3、h4、h5、h6、p、dt。所以说p里面不能嵌套div,就是我犯的错误。

<p><ol><li></li></ol></p> —— 错
<p><div></div></p> —— 错

• 特殊的li里面可以嵌套div(li可以但p不行)
a标签不能嵌套a

猜你喜欢

转载自blog.csdn.net/BigData_Hobert/article/details/106976104