您现在的位置是:首页 > web开发 > 前端1 HTML

前端1 HTML

web开发作者:dayu日期:8天前点击:2
技术分享
<!--字符集 两种都可以-->
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<!--页面刷新 content为多少自动秒刷新一次-->
<meta http-equiv="Refresh" content="3">

<!--三秒刷新重定向至url-->
<meta http-equiv="Refresh" content="3;url=http://www.baidu.com">

<!--关键字,便于搜索引擎抓取-->
<meta name="Keywords" content="培训,老男孩,python">

<!--描述-->
<meta name="Description" content="培训机构">

<!--IE兼容-->
<meta http-equiv="X-UA-COMPATIBLE" content="IE=IE9;IE=IE8;IE=IE7">

meta标签

meta标签

title标签

技术分享技术分享
<!--设置标题-->
<title>首页</title>

title标签

link标签

技术分享技术分享
<!--小图标-->
<link rel="shortcut icon" href="image/favicon.ico">
 
<!--引入css文件-->
<link rel="stylesheet" href="commons.css">

link标签

body中的常用标签

p标签,表示段落,属于块级标签

技术分享技术分享
<p>123</p>

p标签

br标签,表示换行

技术分享技术分享
<p>123<br />123</p>

br标签

h标签,表示标题,属于块级标签

技术分享技术分享
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>

h标签

span标签,表示组合行内标签无特殊意义,属于行内标签

技术分享技术分享
<span>123</span>
<span>123</span>
<span>123</span>

span标签

div标签,表示块无特殊意义,属于块级标签

技术分享技术分享
<div></div>

div标签

form标签,表示表单,属于块级标签

技术分享技术分享
<!--form标签用于表单提交,action是要发送到哪里,method为模式,GET请求将表单数据放到头部发送,POST请求将表单数据放到body部发送-->
<form action="http://localhost:8888/index" method="POST">
</form>

<!--上传文件时要设置enctype="multipart/form-data"属性-->
<from action="http://www.baidu.com" method="POST" enctype="multipart/form-data">
</form>

form标签

input标签,表示输入、按钮等等,属于行内标签

技术分享技术分享
<!--input标签一般包含在form标签内,type表示input标签的类型,name用于后台获取数据,value可以设置默认值,placeholder可以设置输入提示-->

<!--文本类型-->
<input type="text" name="username" placeholder="请输入用户名" value="默认值"/>

<!--密码类型-->
<input type="password" name="password"/>

<!--按钮类型,和js配合,单独使用无任何意义-->
<input type="button"  value="登录1" />

<!--提交表单,提交后页面刷新-->
<input type="submit"  value="登录2" />

<!--单选框,name设置一致只能选一个,checked为默认值-->
<p>请选择性别:</p>
男:<input type="radio" name="gender" value="1" checked="checked" />
女:<input type="radio" name="gender" value="2" />
<input type="submit" value="提交" />

<!--复选框,checked为默认值-->
<p>爱好:</p>
篮球:<input type="checkbox" name="favor" value="1" checked="checked" />
足球:<input type="checkbox" name="favor" value="2" checked="checked" />
台球:<input type="checkbox" name="favor" value="3" />
网球:<input type="checkbox" name="favor" value="4" />
<input type="submit" value="提交" />

<!--重置按钮,清空表单所有内容-->
<input type="reset" value="重置" />

input标签

input标签

textarea标签,表示多行文本输入,属于行内标签

技术分享技术分享
<!--多行文本输入 默认值在两个标签内-->
<textarea name="meno" >aaaaa</textarea>

textarea标签

select标签,表示下拉框,属于行内标签

技术分享技术分享
<!--下拉框,如果设置multiple="multiple"表示多选,size="10"显示多个,selected="selected"表示默认选中-->
<select name="city" size="10" multiple="multiple">
    <option value="1">北京</option>    
    <option value="2" selected="selected">上海</option>
    <option value="3">广州</option>
</select>

select标签

a标签,表示超链接、锚,属于行内标签

技术分享技术分享
<!--超链接,跳转 href="链接URL", target="_blank"在新标签页中打开-->
<div>
    <a href="https://www.baidu.com" target="_blank">百度</a>
</div>


<!--锚,href="#标签ID",ID不能重复-->
<div>
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <a href="#i4">第四章</a>
    <div id="i1" style="height: 600px">第一章内容</div>
    <div id="i2" style="height: 600px">第二章内容</div>
    <div id="i3" style="height: 600px">第三张内容</div>
    <div id="i4" style="height: 600px">第四章内容</div>
</div>

a标签

列表标签,属于块级标签

技术分享技术分享
<!--列表-->

<!---->
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

<!--序号-->
<ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>

<!--分层-->
<dl>
    <dt>ttt</dt>
    <dd>ddd</dd>
    <dd>ddd</dd>
    <dd>ddd</dd>
</dl>

列表标签

table标签,表示表格,属于行内标签

技术分享技术分享
<table border="1">
    <thead>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
        <th>表头4</th>
    </tr>
    </thead>
    <!--表内容 colspan="2"横向占两列 rowspan="2"纵向占两行-->
    <tbody>
    <tr>
        <td>第一行,第1列</td>
        <td colspan="2">第一行,第2、3列</td>
        <td>第一行,第4列</td>
    </tr>
    <tr>
        <td rowspan="2">第二、三行,第1列</td>
        <td>第二行,第2列</td>
        <td>第二行,第3列</td>
        <td>第二行,第4列</td>
    </tr>
    <tr>
        <td>第三行,第2列</td>
        <td>第三行,第3列</td>
        <td>第三行,第4列</td>
    </tr>
    <tr>
        <td>第四行,第1列</td>
        <td>第四行,第2列</td>
        <td>第四行,第3列</td>
        <td>第四行,第4列</td>
    </tr>
    </tbody>
</table>

table标签

label标签,表示标记,属于行内标签

技术分享技术分享
<!--for和input中的id要对应,点击label标签光标跳到input标签中-->
<label for="username">用户名:</label>
<input id="username" type="text" name="username">

label标签

fieldset标签,表示外围框,属于块级标签

技术分享技术分享
<!--画圈,外围画一个框-->
<fieldset>
</fieldset>

fieldset标签

HTML中的一些特殊符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

前端1 HTML

原文地址:http://www.cnblogs.com/qiang8216/p/7212557.html


下一篇       上一篇