首页 > 代码库 > HTML标签的应用(新手)

HTML标签的应用(新手)

一:
1.HTML样式
<style>定义样式定义。
<div>定义文档中的节或区域(块级)。

例: <div style="border: 5px solid red;height: 50px"></div>
释义;边框宽度为5像素红色边框,高度50像素

<span>定义文档中的行内的小块或区域

图片的跳转
<img src="http://www.mamicode.com/images/xxx" alt="xxx"(一般不超过2层文件夹)

锚点(回到顶部,指向锚点)
例:<a href=""name="first">有马公生</a>
<a href="http://www.mamicode.com/#first">男主角</a>

<hr>分割线
<pre></pre>预格式文本
src-UR路径
2.内联框架
例; <iframe src="" frameborder="1" name="qaq" width="600px" height="260px"></iframe>
<a href="http://www.mamicode.com/firstone.html" target="qaq">niceboy</a>
释义;点击niceboy在显示的页面框内显示first.html文件内容
缺点:刷新重新加载
3.表格
例:<table border="1" align="center" cellpadding="20px" cellspacing="20px">
释义:显示边框表格对齐的表格,内边距外边距都为20像素
<th>表头<tr>行<td>
<thead>页眉<tbody>主体<tfoot>页脚
例:<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

显示为无边框
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
4:列表
ul-li 无序列表
ol-li 有序列表
dl-dt=dd 自定义列表
二:
重要单词释义

align=xx表格专用
padding 内边距
spacing 空白
caption 标题
<tr>table row 行
<td>table data 数据(单元格0

1.表单
input type="submit"→自带提交功能
input type="button"→不带提交功能+value="http://www.mamicode.com/文本"
<butten></button>→标签(HTML5)
2.input: HTML5:
text文本 file文件
password密码 date日期
button按钮 datetime时间
submit带提交的按钮 email邮件
reset重置 number数字
radio单选 search搜索
checkbox多选
image图片 month月
color颜色 time时间
hidden隐藏 week周
3.HTML5新属性
autofocus自动聚焦
readonly
>只读(区别:有无底纹)
disabled
placeholder底层阴影字符
4.关于name,id,class的使用区别
-------------------------------------------------------------
名称 使用
name 姓名 相同 后台交互
id # 唯一性 JS部分
class 类 相同 HTML,CSS的前端页面
-------------------------------------------------------------
例:<input type="rideo" name:"sex"checked>男
<input type="rideo" name:"sex">女
释义:单项选择,默认选中男
5.下拉菜单

<select name "**"id"**"(size多项显示ORmultiple多项选择>
<option value="http://www.mamicode.com/**"selected>**</option>

6.fieldset+(input)
legend标记
-----------------------------------------------
例:<fieldset>
<legend>**</legend>
<input***>
-----------------------------------------------
form action表单处理的地址
method="get\past"提交方式
"get"地址栏显示用户信息-完全性低-快(不加密)用于查询不修改服务器的信息
<form action="#" method=<
"past"不会显示用户信息-完全性高-慢(加密)

 

HTML标签的应用(新手)