HTML常用标签

HTML常用标签

基础标签

<strong>粗体</strong>
<em>斜体</em>
<del style="color:#999">￥50</del>
<br>
<hr>
<div></div>
<span></span>
& lt;
& nbsp;
& gt;
<ol type="1" reversed="reversed" start="3"><!-- 1/a/A/i/I ; 倒叙 ; 从3开始排 -->
	<li>橘子</li>
	<li>香蕉</li>
	<li>西瓜</li>
</ol>
<ul type="disc"> <!-- disc实心圆；square方块；circle圈； -->
</ul>

高级标签

img标签

<img src="" alt="" title="">
<!--src 
    1.网上的url
	2.本地的绝对路径
	3.本地的相对路径 -->
	
<!-- alt图片占位符 -->
<!-- title图片提示符 -->

from标签

<form method="get" action="" ><!-- get/post --><!-- http://www.baidu.com/123.php -->
    <p>
        username:<input type="text" name="username" style="color: #999;" value="请输入用户名" onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}">
    </p>
    <p>
        password:<input type="password" name="passwerd" value="">
        <!-- var div = document.getElementsByTagName('input')[1];
        div.value -->
    </p>
    <p>
        <!-- 单选框 -->
        喜欢的水果：
        香蕉<input type="radio" name="fruit" value="banana" checked="checked">
        苹果<input type="radio" name="fruit" value="apple">
        梨<input type="radio" name="fruit" value="pear">
    </p>
    <p>
        <!-- 复选框 -->
        喜欢的水果：
        香蕉<input type="checkbox" name="fruit" value="banana" checked="checked">
        苹果<input type="checkbox" name="fruit" value="apple">
        梨<input type="checkbox" name="fruit" value="pear">
    </p>
    <p>
        <!-- 下拉列表 -->
        城市：
        <select name="province">
            <option>beijing</option>
            <option>tianjing</option>
            <option>shanghai</option>
        </select>
    </p>
	<input type="submit" value="提交">
</form>

a标签

1. 超链接

<a href="http://www.baidu.com" target="blank">百度一下</a><!-- anchor -- 锚 --><!-- hyperText reference -->

2. 锚点

<div id="demo1" style="width: 100px; height: 100px; background-color: green;">demo1</div>

<div id="demo2" style="width: 100px; height: 100px; background-color: red;">demo2</div>

<a style="display: block;position: fixed;bottom: 150px;right: 100px;border: 1px solid black;height: 50px;width: 200px;background-color: #fcc" href="#demo1">find demo1</a>

<a style="display: block;position: fixed;bottom: 100px;right: 100px;border: 1px solid black;height: 50px;width: 200px;background-color: #ffc" href="#demo2">find demo2</a>

3. 打电话

<a href="tel:155****4321">给小明打电话</a>

4. 发邮件

<a href="mailto:26****0403@qq.com">给小明发邮件</a>

5. 协议限定符

<a href="javascript:while(1){alert('让你手欠')}">手欠，点我</a><br>