属于行级标签但可以设置宽高，可以叫做行块级标签。相当于执行了dispaly:inline-block:操作

块级标签和行级标签的转换

1.块级转换为行级标签（以p标签举例）

在style设置中加上*display：inline:*就好

<p style= "display:inline:"> 块级标签转行级标签</p>

2.块级转换为行级标签（以span标签举例）

在style设置中加上*display：block:*就好

<span style="display:block:">行级标签转为块级标签</span>

W3c规范

w3c标准由结构，表现，行为三部分组成。

标签嵌套规则

1，块元素可以包含行级元素或某些块级元素，但行级元素不可以包含块级元素，只能包含其他行级元素

<div><h1></h1><p></p></div>————对
<a herf="#"><span></span><a>————对
<span><div></div></span>——————错

2，块级元素不能放在

里面

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

3，有几个特殊的块级元素只能包含行级元素，不能再包含块级元素，这几个元素是

h1~h6,p,dt

4，块级元素与块级并列，行级元素与行级元素并列

<div><h2></h2><p></p></div>————对
<div><a href="#"></a><span></span></div>————对
<div><h1></h1><span></span></div>——————错

HTML语义化标签

1，什么是语义化标签

语义化，就是明白每一个标签的用途（在什么情况下我可以使用这个标签才合理）

比如：

网页上的文章的标签可以用“h1 ~ h6”，网页上的各个栏目名称也可以使用“h1~h6”

文章中的内容旧的放在段落标签p中，在文章中有想要强调的文本，就可以使用em标签表示强调等

2.为什么使用语义化标签

更容易被搜索引擎收录更容易让屏幕阅读器读出网页内容能够更好的体现页面的主题兼容性更好，支持更多的网络设备

3.HTML语义化标签

标签：实现超链接（强调：title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发在作用很大，主要方便搜索引擎了解链接地址的内容，语义化更友好）

标签：文字段落放在p标签中标签：文字标题，栏目标题用表示,标题标签一个有6个，h1,h2,h3,h4,h5,h6分别是一级标题，二级标题，三级标题，四级标题，五级标题，六级标题，并且依据重要性递减，h1是最高的等级。和标签，特别强调几个文字。但两者在强调的预期上有区别：表示强调，表示更强烈的强调。并且在浏览器中默认用斜体表示，用粗体表示。两个标签相比，国内更喜欢使用表示强调。标签：短文本引用。（注意要引用的文本不用加双引号），浏览器会对q标签自动添加双引号。标签：为网页加入地址信息。

<table border="~">//表格的标识,border为添加边框，~为边框的宽度
	<tr>//行的标识
		<td>~ td>//单元格的标识，~为单元格的内容
	tr>
table>

示例代码：

效果展示：

跨行/跨列属性

跨行/跨列属性主要用来绘制复杂表格。

rowspan:跨行

示例代码：

运行效果：

colspan:跨列

代码展示：

效果展示：

注意事项：在进行表格的跨行，跨列操作的时候，要记得删除在跨行后不会显示的行，不然会无法达到目的。

绘制一张完整表格：

完整表格组成：caption(标题)，thead(表头)，tbody(表体)，tfoot(表尾)四部分组成。

代码展示：

效果展示：

HTML表单表示

form表单：

表单是一个包含表单元素的区域，允许用户在表单中（比如文本域，下拉列表，单选框，复选框等等）输入信息的元素。form表单标签是所有标签最核心的标签之一。它是实现前后端交互的一个重要标签。

常用属性：

name:表单名称

action:表单数据提交的地方（通常是一个文件名（。jsp/.php./.aspx/.py等），或网址），如果是#，表示提交到当前文件下。

method:前端提交到后端的方法，主要有：get和post，默认的是get.（get方法在提交过程中会直接将信息暴露，所以在对安全要求严格的情况下使用post）

代码展示

效果展示：

表单元素

HTML表单元素的有：,,,

表单通用属性：name,value,,

name属性：规定输入字段的名称

value属性：规定字段的初始值

属性：规定输入字段为只读

属性：规定输入字段是禁用的

value

1.

input类：主要用于输入，选择或发出指令。

type:text//radio//file/button/image/submit/reset

a.text:单行文本输入框 type="text"可以不写，默认值

属性：(提示)）/name(命名)/(最少输入的字符个数)/(最多输入字符个数)/(失效，无法被修改)/(只读)/value(默认值)/pattern（正则匹配,验证输入是否符合要求）

b.:密码框，属性与text一样

c.radio:单选钮，通常是两项以上。通用属性有：name(必须要有)/value/checked(默认选中项)//.

代码展示

效果展示：

（mtf的按钮是一开始就存在的）

d.:复选框，可以用来选择0项，1项或多项

属性：name(必须要有)/value/checked(默认选中)/display/（只读）

代码展示：

效果展示：

e.file文件上传按钮

无属性

代码展示：

效果展示：

f.botton:普通按钮。通常用它去调用脚本代码
常用属性：value(按钮的标题)/disabled(失效)

代码展示：

效果：

g.image:图片按钮，用法与button一样，以一个特殊属性：src(用来加载提示图片，用它替换了value)

它有提价功能，与submit功能一样

代码展示：

效果展示：

h.submit:提交按钮，用来将表单数据提交到后台

常用属性：value（按钮的标题）/(失效)

代码展示：

效果：

点击后效果：（因为demo.php根本不存在，所以找不到）

j.reset:重置按钮，将表单所有组件输入的内容全部清空，还原为初始状态

常用属性：value（按钮标题）/(失效)

代码展示：

效果：

（向密码框里面输入数据）

点击reset按钮后：

另外的input类中经常使用label标签

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

也就是说即使在鼠标只点到选项前面的文字时，依旧可以选中要选中的选项

代码展示：

效果：

注意：

请填写红包祝福语或标题