HTML页面标签设计
<div style="width: 50%;height: 100%;border-radius:15px;border: black thin solid;padding-top: 5px;">盒子标签</div><!--div盒子标签属性width：宽height：高background-color：背景色border-radius:边框圆角border：边框（颜色 细线 实线）padding-top 上边距-->
<form>form表单
</form><table border="0" style="width: 100%;"><!--表格标签--><!--表格的行<tr>标签,列标签<td>，<td>的属性align：水平方向 left right center --><tr><td><input type="password" required placeholder="密码"style="width: 90%;border-radius:4px;height: 25px;"/></td></tr>
<!--input:文本框的required属性：表示该文本框必填input:文本框的placeholder属性是未输入前，文本框默认值input:文本框的style属性 是样式 包括字体大小、颜色、边距input:文本框的type属性字体相关：font-size：设置字体大小。font-family：设置字体类型。font-weight：设置字体粗细，如bold、normal等。font-style：设置字体样式，如italic、normal等。颜色相关：color：设置文本颜色。background-color：设置背景颜色。布局相关：width：设置元素的宽度。height：对于<textarea>元素，可以设置其高度；对于<input type="text">等，通常不直接设 置高度，而是通过其他方式（如padding、line-height等）间接影响。margin：设置元素的外边距。padding：设置元素的内边距。边框相关：border：设置元素的边框样式，可以简写为border: width style color;。border-width、border-style、border-color：分别设置边框的宽度、样式和颜色。文本对齐和缩进：text-align：对于<textarea>元素，可以设置文本的对齐方式，如left、center、right。但请 注意，<input>元素通常不支持text-align属性。text-indent：主要用于<p>等块级元素，对<input>和<textarea>不适用。其他：display：设置元素的显示方式，如block、inline、inline-block等。但请注意，对于<input> 和<textarea>元素，其display属性通常被浏览器默认处理，不建议直接修改。input:文本框的type属性type="text" 文本框<input type="text" required placeholder="用户名" style="width: 90%;border- radius:4px;height: 25px;"/>type="password" 密码框<input type="password" required placeholder="密码"style="width: 90%;border- radius:4px;height: 25px;"/>type="radio" 单选框<input name="sex" type="radio" checked/>男 type="checkbox" 多选框<input type="checkbox" checked/>游泳<input type="checkbox"/>读书type="submit" 提交按钮type="file" 文件域type="image" 图片按钮type="email" 邮箱框type="url" 网址框type="number" 数字框type="range" 滑块placeholder 文本框的提示内容设置required 非空select:下拉框textarea:多行文本域--></table>
内联框架<a
<iframe name="mainframe" width="800px" height="150px" scrolling="yes" onresize="onresize()" src="login.html"/>
一基础标签
1：<html>：网页标签
2：<head>：头部（网页标题等信息）
3：<body>：主体（网页的所有内容）
4：<title>标签：网页标题（在浏览器窗口标题栏显示）
5：<meta>标签：网页信息摘要
6：<h1></h1> 到 <h6>:标题标签(一段文字的标题，由大道小)
7：<p>段落标签（一段文字的内容）段落之间会有一段距离
8：<br/>换行标签（！！没有结束标签）行与行之间比较紧凑
9：<hr/>水平线标签(！！没有结束标签)
10：字体样式<strong>...</strong>字体加粗<em>...</em>字体倾斜
11：注释<!-- 注释内容 -->
12：特殊符号特殊符号 字符实体 空格 大于号(>) > 小于号(<) < 引号(") "（成对出现） 版权符号@ ©
13：图像标签<img src="path" alt="text" title="text" width="x" height="y" />src:图片的地址 alt:图像替代文字 title:鼠标悬停提示文字 width:宽度 height:高度
14：链接标签<a href="path" target="目标窗口位置">链接文本或图像</a>href:链接路径 target:链接在那个窗口打开（常用值：_self【自身】、_blank【新建】）①：面间链接从一个页面链接到另外一个页面 ②：锚链接： A页面甲位置到A页面的乙位置在页面乙位置：<a name="名字" >目标乙的位置</a>在页面甲位置：<a href="#名字">甲位置</a> A页面甲位置到B页面的乙位置 在页面乙位置：<a name="名字" >目标乙的位置</a>在页面甲位置：<a href="页面.html#名字">甲位置</a> ③：功能性链接：二：列表：数据的一种展示形式
1：无序列表（各个列表项之间没有顺序级别之分）<ul type="">：列表声明<li>桔子</li>：每个类表项的起始<li>香蕉</li><li>苹果</li> </ul>取值 说明disc 项目符号显示为实体圆心,默认值square 项目符号显示为实体方心circle 项目符号显示为空心圆2：有序列表（各个列表项之间有顺序之分）<ol type=""><li>桔子</li><li>香蕉</li><li>苹果</li> </ol>取值 说明1 使用数字作为项目符号A/a 使用大写/小写字母作为项目符号I/i 使用大写/小写罗马数字作为项目符号
3：定义列表（自定义列表，是标题和注释的结合）<dl>：列表的开始<dt>所属学院</dt>：列表项的起始<dd>计算机应用</dd>：列表项注释的内容<dt>所属专业</dt><dd>计算机软件工程</dd></dl>
三：表格：由指定行和列组成的。<table><tr><td>第1个单元格的内容</td><td>第2个单元格的内容</td>……</tr><tr><td>第1个单元格的内容</td><td>第2个单元格的内容</td>……</tr> </table><table>属性：边框宽度属性：border<td>属性：属性 值 说明alignleft 左对齐水平对齐方式 center 居中对齐right 右对齐valign垂直对齐方式 top 顶端对齐middle 居中对齐bottom 底端对齐baseline 基线对齐<td colspan="n">单元格内容</td>：所跨的列数 <td rowspan="n"> </td>：所跨的行数四：框架1：框架：<frameset>适用于整个页面都用框架实现的场合。注意：！！！！！改文档声明：Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">不能有body标签！！！！！<frameset>描述窗口分割<frame>定义放置在每个框架中的HTML页面。<frameset cols="25%,50%,*" rows ="50%,*" border="5"> <frame src="the_first.html "/> <frame src="the_second.html "/></frameset> cols="25%,50%,*" ：将页面横向分割3列，1列占总窗口的25%，2列占50%，3列占剩余部分rows="50%,*" ：将页面纵向分割2行,1行占窗口的50%，2行占剩余部分窗口间的关联(触发链接的时候，second.html将在名为firstframe的<frame>部分中显示)框架页面中：<frame src="first.html " name="firstframe"/> 分页面中：<a src="second.html" target="firstframe">....</a>2：内联框架：<iframe>：适用于将部分框架内嵌入页面的场合。<iframe src="引用的页面地址" name="框架名称" width="框架宽度" height="框架高度"framborder="边框粗细" scrolling="是否出现滚动条" noresize="是否可以调整框架窗口大小"<a href="third.html" target="mainFrame">下边显示第三页</a><br /><iframe name="mainFrame" width="800px" height="150px" scrolling="yes" noresize="noresize" src="subframe/the_second.html" />五：表单<form>：表单创建（其他的标签需在它的里面才能生效）<form method="提交方式" action="提交地址" > </form>1：method="post"; 【比较安全】提交后，地址栏中的URL信息没有发生变化，不显示表单数据2:method="get";提交后，地址栏中URL信息中清晰的显示出表单提交的数据内容具体表单1：文本框<input type="text" name="标签的名字" value="默认值" size="文本框的长度" maxlength="输入数据的长度"/>2：密码框<input type="password" ......................../>3:单选按钮框（在一组单选框中的name值必须相同，单选功能才生效）<input type="radio" name="gen" value="女" checked="checked(默认选项)"/> 男 <input type="radio" name="gen" value="男"/>女 4：复选框（在一组复选框中的name值一般取相同，这样可以根据name一次性提交）<input type="checkbox" name="interest" value="sports" checked="checked"/> 运动<input type="checkbox" name="interest" value="talk" />聊天<input type="checkbox" name="interest" value="play"/>玩游戏5:列表框<select name="列表名称" ><option value="可选项的值" selected="selectde"(默认显示)/>一月</option><option value="2" >二月</option><option value="3" >三月</option></select>5.1图片提交按钮(虽然type属性不是submit,但是依然具备提交的功能)<input type="image" src="图片地址" />6:普通按钮<input type="button" name="" value="" onclick="alert(this.value)"/>7:重置按钮<input type="reset" name="" value="重置"/>8:提交按钮<input type="submit" name="" value="提交" />9:多行文本域（不能用css样式的width和height来控制多行文本框的大小）<textarea name="" cols="列的宽度" rows="行数" >内容.....</textarea>10:文件域<form action="" method="post" enctype="multipart/form-data">enctype="multipart/form-data"
:将表单数据分为多部分提交（提交表单的数据包括表单数据和文件数据等多部分内容） <input type="file" name="" /><input type="submit" name="" value="上传"/>11：隐藏域（不需要展示给用户，但程序调用时要用到的值，写在隐藏域中）1:<input type="hidden" value="000" name="" />12:表单的只读（readonly)与禁用(disabled)设置<input type="text" name="" value="admin" readonly="readonly"/> <input type="submit" name="" value="提交" disabled="disabled" />13：语义化的表单（结构合理，代码简洁）①：域的定义：将表单元素放到域中，浏览器就会以特殊的方式显示他们<fieldset></fieldset>②：域标题：给设置的域设置一个标题<legend></legend>③:表单元素的标注：增强鼠标的可用性<label for="表单元素的id" >标注的文本</label><input type="radio" name="" id="表单元素id"/>