看程序学html

1、html基本结构
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>Hello HTML</p>	//P标签
    <p>这是我的第一个HTML网页!</p>
    <h1>大标题</h1>	//h标签
    <br/>	//br标签
    <br/>
    <h2>小一点的标题</h2>
    <h3>再小一点的标题</h3>
    <h4>更小一点的标题</h4>
    <h1 >未设置居中的标题</h1>
    <!--align属性用于对齐-->
    <h1 align="center">居中标题</h1>		//属性
    <ins>使用ins标签实现的下划线效果</ins>		//下划线效果
    <br/>
    <u>使用u标签实现的下划线效果,但是不建议使用</u>
</body>
</html>

2、一个综合应用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--完成一个阶段应用-->
<h1>英雄联盟(电子竞技类游戏)</h1>
<!--strong 粗体 i斜体 u下划线 del删除线-->
<p><strong>《英雄联盟》</strong>(简称LOL)是由美国<i>Riot Games</i>开发,中国大陆地区由腾讯游戏运营的网络游戏。</p>
<p><strong>《英雄联盟》</strong>除了即时战略、团队作战外,还拥有一百多位特色各异的英雄、丰富的地图及玩法、自动匹配的战网平台,包括天赋树、召唤师系统、符文等元素。<u>[1]</u></p>
<p>2016年1月,根据官方数据显示,LOL全球最高同时在线已突破<del>750</del>900万,全球日活跃高达2700万,全球月活跃已达6700万,注册用户亿计,LOL已经成为当今世界最具人气和影响力的网络游戏之一。<u>[2]</u></p>
</body>
</html>

3、一个综合应用
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<a href="http://www.12306.com">		//超链接
    <img src="http://how2j.cn/example.gif"/>		//图像作为超链接
</a>
<div align="left">		//div及其位置定义	
    <img src="http://how2j.cn/example.gif"/>
</div>

<div align="center">
    <img src="http://how2j.cn/example.gif"/>
</div>

<div align="right">
    <img src="http://how2j.cn/example.gif"/>
</div>
<h2>英雄技能</h2>
<table border="1" >		//表格
    <tr  bgcolor="#ddd">
        <td width="115"><strong>技能名</strong></td>		//表格栏目宽度
        <td width="48"><strong>触发</strong></td>
        <td width="98"><strong>技能属性</strong></td>
        <td width="445"><strong>技能效果</strong></td>
        <td width="65">图标</td>
    </tr>
    <tr>
        <td><strong>坚韧</strong></td>
        <td><strong>被动</strong></td>
        <td colspan="2">盖伦如果在9秒内不受到任何伤害,之后的每秒都会回复自己最大生命值的0.4%。小兵的伤害不会中断坚韧效果。</td>		//跨栏设置
        <td><img src="skill1.png" width="65" height="65" /></td>
    </tr>
    <tr>
        <td><strong>致命打击</strong></td>
        <td><strong>Q</strong></td>
        <td>冷却时间:8</td>
        <td>盖伦移除身上的所有减速效果,并获得30%移动速度加成,持续1.5/2/2.5/3/3.5秒。<br />
            在接下来的4.5秒内,他的下次普通攻击会造成30/55/80/105/130(+1.4AD)物理伤害,并沉默目标1.5秒。</td>
        <td><img src="skill2.png" width="64" height="64" /></td>		//栏目内容为图像
    </tr>
    <tr>
        <td><strong>勇气</strong></td>
        <td><strong>W</strong></td>
        <td>冷却:24/23/22/21/20</td>
        <td><strong>被动:</strong>击杀一个单位会永久提供0.25护甲和魔法抗性加成,最大值:30<br />
            <strong>主动:</strong>盖伦获得一个持续2/3/4/5/6秒的防御护盾,减少即将到来的30%伤害。</td>
        <td><img src="skill3.png" width="64" height="65" /></td>
    </tr>
    <tr>
        <td><strong>审判</strong></td>
        <td><strong>E</strong></td>
        <td>冷却:9</td>
        <td>盖伦快速地旋舞大剑,持续3秒,在持续期间对周围敌人总共造成物理伤害——14/18/22/26/30加上他总攻击力的34/35/36/37/38%,5次(英雄每升3级加1次)。<br />
            E【审判】会在攻击单个敌人时造成33%额外伤害。<br />
            取消E【审判】会返还相当于剩余持续时长的冷却时间。<br />
            E【审判】可以暴击,并造成额外伤害。</td>
        <td><img src="skill4.png" width="64" height="64" /></td>
    </tr>
    <tr>
        <td><strong>德玛西亚正义</strong></td>
        <td><strong>R</strong></td>
        <td>冷却:120/100/80</td>
        <td><strong>被动:</strong>最近获得最多击杀数的敌人会成为<strong>大反派</strong>。盖伦的E【审判】和普攻会对<strong>大反派</strong>造成额外真实伤害,伤害值为<strong>大反派</strong>1%的最大生命值。<br />
            <strong>主动:</strong>盖伦召唤德玛西亚之力,试图斩杀一名敌方英雄,目标损失的生命越多,则此技能造成的伤害越高。造成175/350/525魔法伤害加上目标已损失生命值的28/33/40%。对<strong>大反派</strong>造成真实伤害。</td>
        <td><img src="skill5.png" width="64" height="64" /></td>
    </tr>
</table>
<a href="http://www.12306.com">12306</a><br/>
<a href="http://www.12306.cn" target="_blank">http://www.12306.cn</a><br/>		//超链接的目标窗设置
<a href="http://www.12306.com" title="跳转到http://www.12306.com">www.12306.com</a>
</html>

4、一个综合应用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table width="100%" >
    <tr>
        <td align="right"><font color="#FF0000">*</font>用户名:</td>
        <td><input type="text" size="30"/> <font color="red">用户名不得小于3个字符</font></td>
    </tr>
    <tr>
        <td align="right"><font color="#FF0000">*</font>密码:</td>
        <td><input name="text" type="text" size="30"/></td>
    </tr>
    <tr>
        <td align="right"><font color="#FF0000">*</font>确认密码:</td>
        <td><input name="text2" type="text" size="30"/></td>
    </tr>
    <tr>
        <td align="right"><font color="#FF0000">*</font>Email:</td>
        <td><input name="text3" type="text" size="30"/></td>
    </tr>
    <tr>
        <td align="right"><font color="#FF0000">*</font>真实姓名:</td>
        <td><input name="text4" type="text" size="30"/></td>
    </tr>
    <tr>
        <td align="right"><font color="#FF0000">*</font>性别:</td>
        <td>
            <select>		//下拉列表
                <option>男</option>
                <option>女</option>
            </select>
        </td>
    </tr>
    <tr>
        <td align="right"><font color="#FF0000">*</font>生日:</td>
        <td><select name="select">
            <option>1980</option>
            <option>1981</option>
            <option>1982</option>
            <option>1983</option>
            <option>1984</option>
            <option>1985</option>
            <option>1986</option>
            <option>1987</option>
            <option>1988</option>
            <option>1989</option>
            <option>1990</option>
            <option>1991</option>
        </select>
            <select name="select2">
                <option>1</option>
                <option>2</option>
                <option>...</option>
                <option>12</option>
            </select>
            <select name="select3">
                <option>1</option>
                <option>2</option>
                <option>...</option>
                <option>31</option>
            </select></td>
    </tr>
    <tr>
        <td align="right"><font color="#FF0000">*</font>手机:</td>
        <td><input name="text7" type="text" size="30"/></td>
    </tr>
    <tr>
        <td align="right"><font color="#FF0000">*</font>居住地:</td>
        <td><select name="select4">
            <option>四川省</option>
            <option>河南省</option>
            <option>广东省</option>
            <option>河北省</option>
            <option>黑龙江省</option>
            <option>海南省</option>
            <option>安徽省</option>
            <option>内蒙古省</option>
            <option>广西省</option>
            <option>湖南省</option>
            <option>湖北省</option>
            <option>浙江省</option>
        </select>
            <select name="select5">
                <option>成都市</option>
                <option>重庆市</option>
                <option>...</option>
                <option>北京市</option>
            </select> <select name="select6">
                <option>成华区</option>
                <option>龙泉驿区</option>
                <option>...</option>
                <option>金牛区</option>
            </select> <select name="select7">
                <option>三圣乡</option>
                <option>星辉路</option>
                <option>...</option>
                <option>蜀都大道</option>
            </select></td>
    </tr>
    <tr>
        <td align="right"><font color="#FF0000">*</font>QQ:</td>
        <td><input name="text9" type="text" size="30"/>
            <br />
            <font size="-1" color="#0099FF">设置我的QQ在线状态</font>
        </td>
    </tr>
</table>
</body>
</html>

5、div和span的区别
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
这没有标签
<div> 这是一个div </div>
<span>这是一个span</span>
<img style="margin-left:50px" src="http://how2j.cn/example.gif"/>
<br/>
<img style="margin-left:50px" src="http://how2j.cn/example.gif"/>

<div style="margin-left:100px" >
    <img src="http://how2j.cn/example.gif"/>
    <br/>
    <img src="http://how2j.cn/example.gif"/>
</div>
<div>
    第一个div
</div>
<div>
    第二个div
</div>
<span>
 第一个span
</span>
<span>
 第二个span
</span>
</body>
</html>

6、不同字号、颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<font color="green">绿色默认大小字体</font>
<br>
<font color="blue" size="+2">蓝色大2号字体</font>
<br>
<font color="red" size="-2">红色小2号字体</font>
<font color="red" >用red表示红色字体</font>
<br>
<font color="#ff0000" >用#ff0000表示红色字体</font>
</body>
</html>

7、列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>DOTA</li>
    <li>LOL</li>
</ul>
<ol>
    <li>地卜师</li>
    <li>卡尔</li>
</ol>
</body>
</html>

8、预格式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
<p>这里是没有用预格式的情况:</p>
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World");
}
}
<br/>
<br/>
<p>使用预格式的情况:</p>
<pre>
public class HelloWorld {

    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}

</pre>
</body>
</html>

9、表单
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" value="有初始值的文本框"><br/>
<input type="text" placeholder="请输入账号"><br/>
<input type="password"><br/>
<form method="get" action="http://how2j.cn/study/login.jsp">
    账号:<input type="text" name="name"> <br/>
    密码:<input type="password" name="password" > <br/>
    <input type="submit" value="登陆"><input type="reset" value="重置">
</form>
<form method="post" action="http://how2j.cn/study/login.jsp">
    账号:<input type="text" name="name"> <br/>
    密码:<input type="password" name="password" > <br/>
    <input type="submit" value="登陆"><input type="reset" value="重置">
</form>
<p>今天晚上做什么?</p>

学习java<input type="radio" name="activity" value="学习java" > <br/>
东京热<input type="radio" checked="checked"  name="activity" value="tokyohot" > <br/>
dota<input type="radio" name="activity" value="dota" > <br/>
LOL<input type="radio" name="activity"  value="lol"> <br/>

<p>今天晚上做什么?</p>

学习java<input type="checkbox" value="学习java" > <br/>
东京热<input type="checkbox" checked="checked"  name="activity" value="tokyohot" > <br/>
dota<input type="checkbox" value="dota" > <br/>
LOL<input type="checkbox" value="lol"> <br/>

<select >
    <option >苍老师</option>
    <option >高树玛利亚</option>
    <option >遥美</option>
</select>

<select  size="2">
    <option >苍老师</option>
    <option >高树玛利亚</option>
    <option >遥美</option>
</select>

<select size="3" multiple="multiple">
    <option >苍老师</option>
    <option >高树玛利亚</option>
    <option >遥美</option>
</select>

<select size="3" multiple="multiple">
    <option >苍老师</option>
    <option selected="selected">高树玛利亚</option>
    <option selected="selected">遥美</option>
</select><br/>
<textarea cols="30" rows="8">123456789012345678901234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890</textarea><br/>
普通按钮不能提交
<form action="../study/login.jsp" method="get">
    账号:<input type="text" name="name"> <br/>
    密码:<input type="password" name="password" > <br/>
    <input type="button" value="登陆">
</form>
<form action="../study/login.jsp">
    账号:<input type="text" name="name"> <br/>
    密码:<input type="password" name="password" > <br/>
    <input type="image" src="http://how2j.cn/example.gif">
</form>
<button><img src="http://how2j.cn/example.gif"/></button>
</body>
</html>

10、iframe
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<iframe src="http://how2j.cn/" width="600px" height="400px">
</iframe>
</body>
</html>

11、关于表格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>

    <tr>
        <td>3</td>
        <td>4</td>
    </tr>

    <tr>
        <td>a</td>
        <td>b</td>
    </tr>

</table>
<table border="1">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>

    <tr>
        <td>3</td>
        <td>4</td>
    </tr>

    <tr>
        <td>a</td>
        <td>b</td>
    </tr>

</table>
<table border="1" width="200px">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>

    <tr>
        <td>3</td>
        <td>4</td>
    </tr>

    <tr>
        <td>a</td>
        <td>b</td>
    </tr>

</table>
<table border="1" width="200px">
    <tr>
        <td width="50px">1</td>
        <td>2</td>
    </tr>

    <tr>
        <td>3</td>
        <td>4</td>
    </tr>

    <tr>
        <td>a</td>
        <td>b</td>
    </tr>

</table>
<table border="1" width="200px">
    <tr>
        <td width="80%">1</td>
        <td>2</td>
    </tr>

    <tr>
        <td>3</td>
        <td>4</td>
    </tr>

    <tr>
        <td>a</td>
        <td>b</td>
    </tr>

</table>
<table border="1" width="200px">
    <tr>
        <td width="50%" align="left">1</td>
        <td>2</td>
    </tr>

    <tr>
        <td align="center">3</td>
        <td>4</td>
    </tr>

    <tr>
        <td align="right">a</td>
        <td>b</td>
    </tr>

</table>
<table border="1" width="200px">
    <tr>
        <td width="50%" valign="top" >1</td>
        <td>
            2   <br/>
            2   <br/>
            2   <br/>
        </td>
    </tr>

    <tr>
        <td valign="middle"  >3</td>
        <td>
            4   <br/>
            4   <br/>
            4   <br/>
        </td>
    </tr>

    <tr>
        <td valign="bottom" >a</td>
        <td>
            b   <br/>
            b   <br/>
            b   <br/>
        </td>
    </tr>

</table>
<table border="1" width="200px">
    <tr>
        <td colspan="2" >1,2</td>
    </tr>

    <tr>
        <td>3</td>
        <td>4</td>
    </tr>

    <tr>
        <td>a</td>
        <td>b</td>
    </tr>

</table>
<table border="1" width="200px">
    <tr>
        <td rowspan="2">1,3</td>
        <td>2</td>
    </tr>

    <tr>
        <td>4</td>
    </tr>

    <tr>
        <td>a</td>
        <td>b</td>
    </tr>

</table>
<table border="1" width="200px">
    <tr bgcolor="gray">
        <td width="50%">1</td>
        <td>2</td>
    </tr>

    <tr>
        <td>3</td>
        <td>4</td>
    </tr>

    <tr>
        <td>a</td>
        <td  bgcolor="pink">b</td>
    </tr>

</table>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值