码迷,mamicode.com
首页 > Web开发 > 详细

html基础语法学习(1)

时间:2016-07-17 17:02:11      阅读:349      评论:0      收藏:0      [点我收藏+]

标签:

1、a标签

<!DOCTYPE html>
<!--
text属性(文本的颜色)
link属性(连接的颜色)
alink属性(active点击的时候链接的颜色)
vlink属性(visited点击之后的颜色)
bgcolor属性(背景颜色)
background属性(背景图片,平铺)
-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body text="green" alink="#ffc0cb" vlink="green" bgcolor="#ffc0cb" background="chen.png">
窗前明月光
<a href="#">超链接</a>

<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
</body>
</html>
2、html基本结构

<!DOCTYPE html>
<!--
HTML基本结构 <html></html>
段落标签 <p></p>
空格标签  
标题标签  <h#>:#=1~6
图片标签 <img src="..."/>
注释标签 <!--
alt="---" 当一些原因无法显示图片的时候,会显示alt的文本
title 当光标移到图片上,显示的文本
<b></b>加粗
<hr/> 分割线
<br/> 换行
>(>),<(<),&(&),空格( )
<h#></h#>标题标签
border = 1px;边的宽度为1px
font color size
size 7是最大的
<font></font>:字体标签 size 1~7.color="green" face="仿宋"

<b>  定义粗体文本
<i> 定义意大利斜体
<tt>  定义打字机文本(等宽)
<u>  定义下划线文本
<sup> <sub>  定义上下标
<s>  定义加删除线的文本

3<sup>2</sup>+4<sup>2</sup>=5<sup>2</sup>

3<sub>2</sub>+4<sub>2</sub>=5<sub>2</sub>

<em>  定义强调文本
<strong>  定义强调文本
<code>  定义计算机代码文本
<samp>  定义计算机代码样本
<kbd>  定义键盘文本
<var>  定义文本的变量部分
<dfn>  定义定义项目
<cite>  定义引用(citation>
<smail>  定义小号文本
<big>  定义大号文本
)
alt="陈慧娴" title="小陈"

a标签的使用
超链接  href表示要连接到的地址,
target:打开新网页的方式
_blank 表示打开一个新网页
_self表示在当前页面进行跳转

a标签第二个作用
实现页面内部的跳转

-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<a name="顶端" href="#底端">回到底端</a>
<a href="www.baidu.com#百度到了">去百度</a>
<a href="mail.html#我爱你">去mail.html的我爱你</a>
<pre>
    <code>
        for(int i = 0; i< 100;I++)
        {
        Console.WriteLine("Hello World!");
        }
    </code>
</pre>
<marquee direction="right" behavior="slide">
    <img src="chen.png" />


</marquee>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="底端" href="#顶端">回到顶端</a>
</body>
</html>
3、去顶端,去底端

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<a href="mailto:1420896847@qq.com">发送邮件到1420896847@qq.com</a>
<a href="index.html#顶端">去index.html界面</a>
<a name="顶部" href="#我爱你">回到底部</a>
<a href="#">我是链接吗?</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="我爱你" href="#顶部">回到顶部</a>
</body>
</html>
4、span标签

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="background: red;height: 50px;width: 300px">
    我是div
</div>
<span>我是span</span><b>我是加粗</b>
</body>
</html>
5、table标签

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--
    cellspacing单元格之间的距离
    cellpadding文本与单元格之间的距离
    -->
</head>
<body>
<table border="1px" cellspacing="0px" cellpadding="0px">
    <tr>
        <td><a href="#">超链接</a> </td>
        <td>星期一</td>
        <td>哈哈哈</td>
    </tr>
    <tr>
        <td>傲物</td>
        <td>呜呜呜</td>
        <td><img src="chen.png " height="30px" width="30px"></td>
    </tr>
</table>
<hr/>

<table border="1px" cellspacing="0px" cellpadding="0px">
    <tr>
        <td colspan="2">学生成绩</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>98</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>95</td>
    </tr>
</table>
<hr/>

<table border="1px" cellspacing="0px" cellpadding="0px">
    <tr>
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>98</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>95</td>
    </tr>

    <tr>
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>88</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>91</td>
    </tr>
</table>
<hr/>

<table border="1px" cellspacing="1px" cellpadding="1px" height="100px" width="300px">
    <tr>
        <td><font color="blue">手机充值、IP卡</font></td>
        <td colspan="3"><font color="blue">办公设备、文具、耗材</font></td>
    </tr>
    <tr>
        <td rowspan="3">各种卡的总汇</td>
        <td>铅笔</td>
        <td>铅笔</td>
        <td>铅笔</td>
    </tr>
    <tr>
        <td>铅笔</td>
        <td>铅笔</td>
        <td>铅笔</td>
    </tr>
    <tr>
        <td>铅笔</td>
        <td>铅笔</td>
        <td>铅笔</td>
    </tr>
</table>
</body>
</html>
6、无序列表

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul type="square">
    <li>星期一吃鱼</li>
    <li>星期一吃鱼</li>
    <li>星期一吃虾米</li>
    <li>星期一吃蛤蟆</li>
    <li>星期一吃天鹅</li>
    <li>星期一吃瓜</li>
    <li>星期一吃果</li>
</ul>
<hr/>
<ol type="a">
    <li>星期一吃鱼</li>
    <li>星期一吃鱼</li>
    <li>星期一吃虾米</li>
    <li>星期一吃蛤蟆</li>
    <li>星期一吃天鹅</li>
    <li>星期一吃瓜</li>
    <li>星期一吃果</li>
</ol>
<hr/>
<dl>
    <dt>面向对象</dt>
    <dd>封装</dd>
    <dd>继承</dd>
    <dd>多态</dd>
    <dt>C#循环</dt>
    <dd>for循环</dd>
    <dd>foreach循环</dd>
    <dd>while循环</dd>
</dl>
</body>
</html>
7、表单

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
    用户名:<input type="text" name="txtName"/><br/>
    密码:<input type="password" name="txtPwd/"><br/>
    <input type="submit" value="提交到百度"/>
    <input type="reset" value="清空"/>

    <fieldset>
        <legend>性别</legend>
        <input type="radio" name="sex"/>男<br/>
        <input type="radio" name="sex"/>女<br/>
    </fieldset>
    <fieldset>
        <legend>婚姻状况</legend>
        <input type="radio" name="married"/>已婚<br/>
        <input type="radio" name="married"/>未婚<br/>
    </fieldset>

    <select size="1">
        <optgroup label="河北省">
            <option>石家庄</option>
            <option>沧州</option>
            <option>保定</option>
            <option>廊坊</option>
        </optgroup>
        <optgroup label="河南省">
            <option>郑州</option>
            <option>驻马店</option>
            <option>洛阳</option>
            <option>新乡</option>
        </optgroup>
        <optgroup label="湖北省">
            <option>武汉</option>
            <option>黄冈</option>
            <option>黄石</option>
            <option>十堰</option>
        </optgroup>
        <optgroup label="湖南省">
            <option>长沙</option>
            <option>岳阳</option>
            <option>衡阳</option>
            <option>益阳</option>
        </optgroup>
    </select>
    <br/>
    <textarea cols="100" rows="30">
        第一章 总  则
   第一条 为了完善劳动合同制度,明确劳动合同双方当事人的权利和义务,保护劳动者的合法权益,构建和发展和谐稳定的劳动关系,制定本法。
   第二条 中华人民共和国境内的企业、个体经济组织、民办非企业单位等组织(以下称用人单位)与劳动者建立劳动关系,订立、履行、变更、解除或者终止劳动合同,适用本法。
   国家机关、事业单位、社会团体和与其建立劳动关系的劳动者,订立、履行、变更、解除或者终止劳动合同,依照本法执行。
   第三条 订立劳动合同,应当遵循合法、公平、平等自愿、协商一致、诚实信用的原则。
   依法订立的劳动合同具有约束力,用人单位与劳动者应当履行劳动合同约定的义务。
   第四条 用人单位应当依法建立和完善劳动规章制度,保障劳动者享有劳动权利、履行劳动义务。
   用人单位在制定、修改或者决定有关劳动报酬、工作时间、休息休假、劳动安全卫生、保险福利、职工培训、劳动纪律以及劳动定额管理等直接涉及劳动者切身利益的规章制度或者重大事项时,应当经职工代表大会或者全体职工讨论,提出方案和意见,与工会或者职工代表平等协商确定。
   在规章制度和重大事项决定实施过程中,工会或者职工认为不适当的,有权向用人单位提出,通过协商予以修改完善。
   用人单位应当将直接涉及劳动者切身利益的规章制度和重大事项决定公示,或者告知劳动者。
   第五条 县级以上人民政府劳动行政部门会同工会和企业方面代表,建立健全协调劳动关系三方机制,共同研究解决有关劳动关系的重大问题。
   第六条 工会应当帮助、指导劳动者与用人单位依法订立和履行劳动合同,并与用人单位建立集体协商机制,维护劳动者的合法权益。
返  回
第二章 劳动合同的订立
   第七条 用人单位自用工之日起即与劳动者建立劳动关系。用人单位应当建立职工名册备查。
   第八条 用人单位招用劳动者时,应当如实告知劳动者工作内容、工作条件、工作地点、职业危害、安全生产状况、劳动报酬,以及劳动者要求了解的其他情况;用人单位有权了解劳动者与劳动合同直接相关的基本情况,劳动者应当如实说明。
   第九条 用人单位招用劳动者,不得扣押劳动者的居民身份证和其他证件,不得要求劳动者提供担保或者以其他名义向劳动者收取财物。
   第十条 建立劳动关系,应当订立书面劳动合同。
   已建立劳动关系,未同时订立书面劳动合同的,应当自用工之日起一个月内订立书面劳动合同。
   用人单位与劳动者在用工前订立劳动合同的,劳动关系自用工之日起建立。
   第十一条 用人单位未在用工的同时订立书面劳动合同,与劳动者约定的劳动报酬不明确的,新招用的劳动者的劳动报酬按照集体合同规定的标准执行;没有集体合同或者集体合同未规定的,实行同工同酬。
   第十二条 劳动合同分为固定期限劳动合同、无固定期限劳动合同和以完成一定工作任务为期限的劳动合同。
   第十三条 固定期限劳动合同,是指用人单位与劳动者约定合同终止时间的劳动合同。
   用人单位与劳动者协商一致,可以订立固定期限劳动合同。
   第十四条 无固定期限劳动合同,是指用人单位与劳动者约定无确定终止时间的劳动合同。
   用人单位与劳动者协商一致,可以订立无固定期限劳动合同。有下列情形之一,劳动者提出或者同意续订、订立劳动合同的,除劳动者提出订立固定期限劳动合同外,应当订立无固定期限劳动合同:
   (一)劳动者在该用人单位连续工作满十年的;
   (二)用人单位初次实行劳动合同制度或者国有企业改制重新订立劳动合同时,劳动者在该用人单位连续工作满十年且距法定退休年龄不足十年的;
   (三)连续订立二次固定期限劳动合同,且劳动者没有本法第三十九条和第四十条第一项、第二项规定的情形,续订劳动合同的。
用人单位自用工之日起满一年不与劳动者订立书面劳动合同的,视为用人单位与劳动者已订立无固定期限劳动合同。
   第十五条 以完成一定工作任务为期限的劳动合同,是指用人单位与劳动者约定以某项工作的完成为合同期限的劳动合同。
   用人单位与劳动者协商一致,可以订立以完成一定工作任务为期限的劳动合同。
   第十六条 劳动合同由用人单位与劳动者协商一致,并经用人单位与劳动者在劳动合同文本上签字或者盖章生效。
   劳动合同文本由用人单位和劳动者各执一份。
   第十七条 劳动合同应当具备以下条款:
   (一)用人单位的名称、住所和法定代表人或者主要负责人;
   (二)劳动者的姓名、住址和居民身份证或者其他有效身份证件号码;
   (三)劳动合同期限;
   (四)工作内容和工作地点;
   (五)工作时间和休息休假;
   (六)劳动报酬;
   (七)社会保险;
   (八)劳动保护、劳动条件和职业危害防护;
   (九)法律、法规规定应当纳入劳动合同的其他事项。
   劳动合同除前款规定的必备条款外,用人单位与劳动者可以约定试用期、培训、保守秘密、补充保险和福利待遇等其他事项。
   第十八条 劳动合同对劳动报酬和劳动条件等标准约定不明确,引发争议的,用人单位与劳动者可以重新协商;协商不成的,适用集体合同规定;没有集体合同或者集体合同未规定劳动报酬的,实行同工同酬;没有集体合同或者集体合同未规定劳动条件等标准的,适用国家有关规定。
   第十九条 劳动合同期限三个月以上不满一年的,试用期不得超过一个月;劳动合同期限一年以上不满三年的,试用期不得超过二个月;三年以上固定期限和无固定期限的劳动合同,试用期不得超过六个月。
   同一用人单位与同一劳动者只能约定一次试用期。
   以完成一定工作任务为期限的劳动合同或者劳动合同期限不满三个月的,不得约定试用期。
   试用期包含在劳动合同期限内。劳动合同仅约定试用期的,试用期不成立,该期限为劳动合同期限。
   第二十条 劳动者在试用期的工资不得低于本单位相同岗位最低档工资或者劳动合同约定工资的百分之八十,并不得低于用人单位所在地的最低工资标准。
   第二十一条 在试用期中,除劳动者有本法第三十九条和第四十条第一项、第二项规定的情形外,用人单位不得解除劳动合同。用人单位在试用期解除劳动合同的,应当向劳动者说明理由。
   第二十二条 用人单位为劳动者提供专项培训费用,对其进行专业技术培训的,可以与该劳动者订立协议,约定服务期。
   劳动者违反服务期约定的,应当按照约定向用人单位支付违约金。违约金的数额不得超过用人单位提供的培训费用。用人单位要求劳动者支付的违约金不得超过服务期尚未履行部分所应分摊的培训费用。
   用人单位与劳动者约定服务期的,不影响按照正常的工资调整机制提高劳动者在服务期期间的劳动报酬。
   第二十三条 用人单位与劳动者可以在劳动合同中约定保守用人单位的商业秘密和与知识产权相关的保密事项。
   对负有保密义务的劳动者,用人单位可以在劳动合同或者保密协议中与劳动者约定竞业限制条款,并约定在解除或者终止劳动合同后,在竞业限制期限内按月给予劳动者经济补偿。劳动者违反竞业限制约定的,应当按照约定向用人单位支付违约金。
   第二十四条 竞业限制的人员限于用人单位的高级管理人员、高级技术人员和其他负有保密义务的人员。竞业限制的范围、地域、期限由用人单位与劳动者约定,竞业限制的约定不得违反法律、法规的规定。
   在解除或者终止劳动合同后,前款规定的人员到与本单位生产或者经营同类产品、从事同类业务的有竞争关系的其他用人单位,或者自己开业生产或者经营同类产品、从事同类业务的竞业限制期限,不得超过二年。
   第二十五条 除本法第二十二条和第二十三条规定的情形外,用人单位不得与劳动者约定由劳动者承担违约金。
   第二十六条 下列劳动合同无效或者部分无效:
   (一)以欺诈、胁迫的手段或者乘人之危,使对方在违背真实意思的情况下订立或者变更劳动合同的;
   (二)用人单位免除自己的法定责任、排除劳动者权利的;
   (三)违反法律、行政法规强制性规定的。
   对劳动合同的无效或者部分无效有争议的,由劳动争议仲裁机构或者人民法院确认。
   第二十七条 劳动合同部分无效,不影响其他部分效力的,其他部分仍然有效。
   第二十八条 劳动合同被确认无效,劳动者已付出劳动的,用人单位应当向劳动者支付劳动报酬。劳动报酬的数额,参照本单位相同或者相近岗位劳动者的劳动报酬确定。

    </textarea>
</form>
</body>
</html>
8、表单练习

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
    <table border="1px" cellspacing="0px" cellpadding="0px">
        <tr>
            <td>用户名</td>
            <td><input type="text" name="txtName"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="txtPwd"></td>
        </tr>
        <tr>
            <td>验证码</td>
            <td><input type="text" name="txtJudge" style="width: 86px"><img src="chen.png" style="width: 86px;height: 20px"/></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit"/><input type="reset"/></td>
        </tr>
    </table>
</form>
</body>
</html>
技术分享
chen.png

html基础语法学习(1)

标签:

原文地址:http://blog.csdn.net/persistenta/article/details/51931174

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!