html标签

来源：互联网发布：vue.js tomcat 编辑：程序博客网时间：2024/06/08 01:03

HTML标签整理：
HTML语言指的是：超文本标记语言，用于制作静态网页。
语法类似与XML，但是具有W3C要求的对应HTML版本的标签库约束。
目前学习的版本为XHTML1.0
目前最新版本为HTML5

HTML的基本结构：
<html>
<head>
<title>标题</title>
</head>
<body>页面显示内容</body>
</html>

按照标签结构划分：
单标签，和双标签
其中单标签常用：<meta /><hr /><br /><input /><img />
其他都是双标签。

按照显示区域划分：
行级标签和块级标签。
行级标签表示，不会自动换行的标签内容。<a><img><input>...
块级表示独占正行的标签内容。<h1><p><hr>...

标题标签：大<h1>~<h6>小
段落标签：<p></p>显示效果为上下各有一个空行
水平线标签：<hr />
换行标签：<br />（唯一可在页面中换行的方式）
转义字符：
空格( ),大于号(>),小于号(<),双引号("),版权符号(©)

常用布局结构标签：
无序列表：<ul><li></li>...</ul> ul具有type属性：默认disc实心园，square实心方块，circle空心圆
有序列表：<ol><li></li>...</ol> ol具有type属性：默认1 ，I/i
定义列表：
<dl>
<dt>这里的内容顶行显示</dt>
<dd>这里的内容存在一个制表位的缩进</dd>
<dd>这里的内容存在一个制表位的缩进</dd>
</dl>
使用场景：
无序列表一般用于制作导航菜单，树状菜单
有序列表一般用于制作排行榜单
定义列表一般用于制作图文混编内容，如商品列表

表格和表单
表格：
<table>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table>
表格的显示是规整形状的，已横行，竖列的形式展示数据。
表格中每行的高度由该行中最高的单元格高度决定，
每列中的宽度由该列中最宽的单元格决定。
表格本身可以显示边框：border="1"
表格中的相邻单元格可以合并：
跨行：rowspan="个数"
跨列：colspan="个数"
注意：被跨越的单元格要删除.

表单：
<form action="提交表单的URL地址" method="get/post">

</form>

属性集：
<fieldset>表示一个边框的矩形区域。
在<fieldset>中使用<legend>表示边框上显示的文本,可以通过align="left/center/right"设置显示位置

常用表单元素标签：
<input />,
<select>
<option></option>
...
</select>,
<textarea></textarea>

<input />元素：
常用属性：
name表示元素的民称，value表示元素值
当type="text/password"时，size用于设置显示宽度，maxlength表示限制输入字符个数.
当type="radio/checkbox"时，checked用于设置单选、多选框默认选中状态。

type的10中类型：
text（默认值）:单行文本框
password:密码框
radio:单选按钮
checkbox:复选框
hidden:隐藏表单域
file:文件域
submit:提交按钮
reset:重置按钮
image:图片按钮
button:普通按钮

<select>下拉列表
使用时：在select标签中设置name属性，在每一个option标签中设置value属性值
当用户选中某个option时，则name与其value对应。
使用selected属性设置默认选中的option。若没有设置该属性，则默认显示第一个option。

<textarea></textarea>多行文本域
通过name设置名称。
通过cols和rows设置显示区域
值显示在文本内容中。

只读属性：readonly="readonly"
禁用属性：disabled="disabled"

0 0