首先,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