html 基础

html元素(标签)

<!DOCTYPE html>
<html>
    <head> <!-- 头标签用于存放<meta><title>等标签 -->
    <meta charset="utf-8"> <!-- 设置编码 -->
    <title>html5</title> <!-- 设置标题 -->
    <link rel="stylesheet" type="text/css" href="mystyle.css"><!-- 定义了外部文件 -->
    <style type="text/css"></style> <!-- 样式 -->
    <script></script> <!-- javascript脚本 -->
    </head>
    <body> <!-- 用户所收到的页面 -->
        <p>段落标签</p>
        <a href=""  target="_blank"> target="_blank"</a>
        <img src="url" alt="" height="" width=""> <!-- 图片标签 -->
        <hr> <!-- 定义水平线 -->
        <br> <!-- 换行 -->
        <table border="1"> <!-- 表格 -->
            <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>
        <ul> <!-- 无序列表 <ol>是有序列表 <dl>自定义列表-->
            <li></li>
        </ol>
            <li>元素1</li>
            <li>元素2</li>
        </ul>
        <div></div> <!-- 块级元素 -->
        <span></span> <!-- 内联元素 -->
        <form><input type="" name=""></form> <!-- 表单 -->
        <iframe src="URL"></iframe> <!-- 框架 -->
    </body>
</html>

1.块级元素(block)特性:
1.1.总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
1.2.宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
1.3.设置display:block;可以将元素转换块级元素。
2.内联元素(inline)特性:
2.1.和相邻的内联元素在同一行;
2.2.宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;
2.3.设置display:inline;可以将块状元素转换为内联元素

表单form

表单属性

属性描述
accept-charset定表单提交时使用的字符编码,默认值是保留字符串 “UNKNOWN”(表示编码为包含 元素的文档的编码),常用:UTF-8 ;ISO-8859-1
action当表单提交时向何处发送表单数据,默认向自己发送,绝对 URL - 指向另一个网站(action="http://www.example.com/;相对 URL - 指向网站内的一个文件(比如 action=“example.htm”)
autocomplete自动完成,默认开启(on/off)
enctype将表单数据发送到服务器之前如何对其进行编码,默认application/x-www-form-urlencoded(将空格转换为 “+” 符号,特殊字符转换为 ASCII HEX 值)
methodmethod 方法规定如何发送表单数据(form-data)(表单数据会被发送到在 action 属性中规定的页面中)
name表单的名称
novalidate当提交表单时不对表单数据(输入)进行验证
target默认_self(统一窗口打开),_blank(新窗口打开),_parent(父窗口打开),_top(整个窗口打开),framename(指定iframe打开)

method:
get:
1.将表单数据以名称/值对的形式附加到 URL 中
2.URL 的长度是有限的(大约 3000 字符)
3.绝不要使用 GET 来发送敏感数据!(在 URL 中是可见的)
post:
1.将表单数据附加到 HTTP 请求的 body 内(数据不显示在 URL 中)
2.没有长度限制

表单输入和输出

1.提交按钮submit button和文本域('text’类型的input标签)
当用户点击submit类型的input标签时,整个form内包含的数据将会发送给action属性指定的页面.
本例中,将会发送name=user,value=用户输入的值给new.html页面

	<form action="new.html" method="get">
		Username: <input type="text" name="user">
	<input type="submit" value="Submit">
</form>

2.密码('password’类型的input标签)
当点击submit时,向acttion指定页面(默认本页面)发送name=pwd,value=用户输入

<form>
	Password: <input type="password" name="pwd">
	<input type="submit" value="Submit">
</form>

3.单选按钮
当点击submit时,向action指定页面发送name=sex,value=用户选择

<form>
	<input type="radio" name="sex" value="male">Male<br>
	<input type="radio" name="sex" value="female">Female
	<input type="submit" value="Submit">
</form>

4.复选框
当点击submit时,向action指定页面发送name=sex,value=用户选择

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
<input type="submit" value="Submit">
</form>

参考文献

http://write.blog.csdn.net/mdeditor
input type
http://blog.csdn.net/chen_zw/article/details/8713205

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值