首页 > 代码库 > Html踩坑集锦

Html踩坑集锦

2024-08-25 20:57:02   220人阅读

行内标签根据自己的内容撑开 用width宽度没有作用 eg:<span>
 
p元素文字无论有多少个空格 html只显示一个空格
&gt; 大于号 > &lt; 小于号 < &copy; 版权号 &quot; 双引号
 
img ../ 上一级文件夹 eg: ../img/1.jpg
img alt属性 如果图片未加载成功 会有文字说明
img title属性 鼠标悬停显示的文字说明
 
图片如果只设置宽度或高度 会自适应比例
宽度高度都设置 会强制拉伸缩小
 
 
 
ul 有序列表 ol 无序列表
dl dt dd 自定义
 
表格：table th第一行头部 tr行 td单元格 <table cellspacing="1" border="1" >
cellspacing属性是“外边距” 单元格之间的空隙距离 上下左右的空间都改变
cellpadding 内边距
<tr><th>头第一行加粗字体th</th></tr>
<tr><td>正常单元格</td></tr>
横向对齐方式 align：“left/center/right” 纵向对齐方式 valign: "top/middle/bottom"
表格标题：caption
跨列（包括本身的列）属性：colspan
跨行属性：rowspan
thead tbody 语义化
制作表格先把多少行列写出来再改样式
 
高度的百分比是对浏览器没有作用的
 
 
action
是要写的属性值 是 服务器的有效地址 向服务器提交表单信息
method
get 以地址形式提交数据 （url） 欠缺安全性 提交的数据量较小
post （请求头）提交数据 安全性较好 提交的数据量较大
 
表单提交必须有name
表单name 是给后端查看
value 当前的值 单复选框也要必须写value （后端需要）
单选框 如男女只能选一个 name必须要一致
默认选 checked
input button 不能用来表单提交 可以用来触发脚本效果
<button>可以提交表单 必须在form表单里
type="submit" <button> type="image" 这三个可以提交表单
 
fieldset域（用得少） legend
 
 1 <form action=""method="get">
 2 <fieldset>
 3     <legend>用户名&nbsp;密码</legend>
 4            用户名：<input type="text" name="username" value="用户名"/><br/>
 5 
 6            密&nbsp;码：<input type="password" name="password"/><br/>
 7 </fieldset>
 8 
 9            照&nbsp;片：<input type="file" name="photo"/><br/>
10 
11            生&nbsp;日：<select name="sel" id="">
12            <option value="">1988</option>
13            <option value="">1989</option>
14            <option value="">1990</option>
15            <option value="">1991</option>
16                         </select>年<br/>
17 
18            城&nbsp;市：<select name="city" id="city">
19            <option value="1">北京</option>
20            <option value="2" selected>上海</option>
21            <option value="3">广州</option>
22                         </select><br/>
23 
24            性&nbsp;别：<input type="radio" checked name="gender" value="1"/>男 <input type="radio" name="gender" value="0"/>女<br/>
25 
26            爱&nbsp;好： <input type="checkbox" name="ck" value="1"/>吃
27                         <input type="checkbox" name="ck" value="2"/>喝
28                         <input type="checkbox" name="ck" value="3"/>玩
29                         <input type="checkbox" name="ck" value="4"/>乐<br/>
30 
31            <textarea name="ta" id="ta" cols="30" rows="10" readonly>协议</textarea><br/>
32 
33            <input type="submit" value="登录"/>
34 
35            <input type="button" value="搜索"/>
36 
37            <input type="reset" value="重置"/>
38 
39            <button disabled>注册2</button>
40 
41            <input type="image" src="img/wallhaven-245065.png" width="50px"/>
42            
43 
44        </form>

 

 

Html踩坑集锦


联系
我们