HTML5入门 - 奋斗德路

HTML5入门

html是网站开发前端展现，下面是介绍最基本的用法

请求GET与POST的区别，他俩并没有安全上的区别

GET : 提交信息时把用户老顽童有人内容放在url中发出去
POST：提交信息时把用户输入的内容打包在head中发出去

标签的分类

块级标签：h系列标签、p标签、div标签(白板内容)
行内标签：span标签、input标签、a标签

空格、大于、小于等于号

使用下面的形式是为了避免于其它标签中的尖括号产生冲突，从而导致程序不可读性

空格:  
大于： >
小于： <
等于： &eq;

p 标签

行内标签，即每一个<p></p>代表一行
内容中空格使用

br 标签

换行的作用，在一个段落中使用，可以达到换行的效果： <br />

h 标签

设置字体内容的大小，h1/h2/h3/h4/h5/h6 字体是从大到小：<h1>hello</h1>

span 标签

行内标签，可以当作是块状，在一个div中，有多少个都会在一行中: <span></span>

input 标签

输入内容的标签，可以使用text属性，让使用者输入信息提交到后端 <input type="text" disabled /> # disabled表示不可以输入，不写的话就是可以输入的
button属性，是按钮，用于提交 <input type="button" />
submit属性，也是按钮，用于提交到后端的交互 <input type="submit" />
reset属性，作用是重置，把已经输入或者产生的行为进行还原 <input type="reset" />
radio属性，是作为单选框　　 <input type="radio" />
checkbox属性，是复选框，可以同时选择多个　　 <input type="checkbox" />
file 属性，用于文件上传 <iput type="file" />
number属性，与min和max同时使用，可以通过点击小箭头增减数字大小 <input type="number" min="100" max="200" />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--文件上传依赖与form表单的属于enctype -->
    <form enctype="multipart/form-data">
        <div>
            <p>上传文件:</p>
            <!--"file"文件提交标签-->
            <input type="file" name="file_name" />
        </div>
    </form>
</body>
</html>

input的file属性

效果显示：

选项框 radio与checkbox属性的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>choose</title>
</head>
<body>
    <form>
        <div>
            <p>选择性别:</p>
            <!--"radio"为单选框-->
            <!--把三个选项命名为同一个name的值，就会出现互斥的效果，value用于提交到后台程序的值-->
            <!--"checked"为默认选项-->
            男：<input type="radio" name="gender" value="1" checked="checked"/>
            女：<input type="radio" name="gender" value="2"/>
            中：<input type="radio" name="gender" value="3"/>
            <p>兴趣爱好</p>
            <!-- "checkbox"为复选框，可以同时选择多个，checked为默认选上-->
            游戏：<input type="checkbox" name="favor" value="1" checked="checked" />
            跑步：<input type="checkbox" name="favor" value="2" />
            篮球：<input type="checkbox" name="favor" value="3" checked="checked"/>
            睡觉：<input type="checkbox" name="favor" value="4" />
        </div>
        <input type="submit" value="提交" />
        <!--"reset"把已产生的状态还原到开始的状态-->
        <input type="reset" value="重置" />
    </form>
</body>
</html>

input的radio与checkbox属性的应用

效果如下：

label 标签

label一般与Input一起使用，效果是在鼠标点击"input"或者输入框内都可以进行编辑 <label></label>

fieldset 标签

可以设置一个大的框框，并在框线的其中部分设置字体内容 <fieldset></fieldset>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>field_label标签</title>
</head>
<body>
    <!--label 鼠标点击"用户名"或者输入框内都可以进行编辑-->
    <!--"fieldset" 设置一个大框框-->
    <fieldset>
        <!--legend在框线上设置内容-->
        <legend>登陆</legend>
        <label for="username">
            <span style="color: red;">*</span>
            用户名：
        </label>
        <input id="username" type="text" name="user" />
        <label for="password">
            <span style="color: red;">*</span>
            密码：
        </label>
        <input id="password" type="password" name="pass" />
        <!--按钮，value是按钮上的内容-->
        <input type="button" value="登陆" />
    </fieldset>
</body>
</html>

input/span/label/fieldst/legend 标签混合使用

效果显示：

a 标签

行内标签，一般用在页面的跳转上使用 <a></a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--title 是在浏览器的标签上显示的内容-->
    <title>Title</title>
</head>
<body>
    <!--点击"我的博客"会跳转到指定页面-->
    <a href="http://blog.zdb2.com">我的博客</a>
</body>
</html>

a标签跳转

textarea 标签

多行文本框，可以输入多行内容，与input的text属性类似
用法： <textarea style="height: 50px;width: 200px;" >默认值</textarea>
显示

select 标签

下拉选项，选择标签，内置属性size值默认为1
multiple属性，多选功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>下拉选项</p>
    <!-- "select" 下拉选项 提交时会把value值给city到后台 -->
    <!--"size"可以把下拉框的内容都列出来,size的默认值为1-->
    <!--"multiple" 可以多选下拉框的内容-->
    <select name="city" size="5" multiple="multiple">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">南京</option>
        <option value="4">成都</option>
    </select>
</body>
</html>

select标签使用

size为2的效果显示：

size为4的效果显示：

form表单

与后台进行交互，把前端的数据提交给后端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索</title>
</head>
<body>
    <form action="https://sogou.com/web">
        <!--text标签 默认值为alex-->
        <input type="text" name="query" value="alex" />
        <input type="submit" value="搜索"/>
    </form>
</body>
</html>

form表单action属性

此例子是把输入的text文件直接在https://sogou.com上进行搜索

table表

tr 属性表示行
td 属性表示列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--border表的边框大小-->
    <table border="1">
        <!--tr表示行 td表示列-->
        <tr>
            <td>hostname</td>
            <td>port</td>
            <td>操作记录</td>
        </tr>
        <tr>
            <td>1.1.1.1</td>
            <td>57522</td>
            <td>
                <!--点击"操作记录"跳转到index.html页面-->
                <a href="index.html">操作记录</a>
                <!--"#" 与上一个a标签在一起-->
                <a href="#">修改</a>
            </td>
        </tr>
    </table>
</body>
</html>

table表用法

效果显示：

img 标签

显示图片的作用
用法 <img src='1.jpg' title='妹子' style= "heigth:300px;width:200px" alt="没有"/> title为图片的头当1.jpg图片不存在时，会显示"没有"

sdfa fdsfas fa fd

ul/ol/dl 标题标签

ul 以原点为分段标题
ol 以数字为分段标题
dl 里面有两个属性，dt和dd, dt是大标题，dd是小标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--列表 项目标题-->
    <!--以原点为分段-->
    <ul>
        <li>aaaa</li>
        <li>dddd</li>
        <li>cccc</li>
    </ul>
    <!--以数字分段-->
    <ol>
        <li>aaaa</li>
        <li>bbbb</li>
        <li>cccc</li>
    </ol>
    <!--dt是大标题 dd是内容-->
    <dl>
        <dt>a</dt>
        <dd>aaaa</dd>
        <dd>bbbb</dd>
        <dd>cccc</dd>
        <dt>b</dt>
        <dd>aaaa</dd>
        <dd>bbbb</dd>
    </dl>
</body>
</html>

标题应用

posted on 2017-06-25 10:41 奋斗德路阅读(108) 评论(0) 收藏举报