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>属性:
属性 值 说明
align
left 左对齐
水平对齐方式 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"/>
4429

被折叠的 条评论
为什么被折叠?



