HTML
相关知识
HTML不具有运算功能
html以标签的形式组织页面的内容,只能用默认的枯燥格式。
css(层叠样式表)决定怎样表示内容(颜色,字体,图片大小),更丰富多彩。
<标签名 属性=“值”> </标签名>
标签
杂项
<!DOCTYPE html> <!--document type 声明文档类型是html5,如果是4的版本要跟一串很长的东西,!的含义是声明-->
<html> <!--根标签必是html,分成head和body-->
<head><!--页面中的一些设置--><!--head内东西不会在页面上展示-->
<meta charset="utf-8" /> <!--mate 含义是元(道),源数据。 charset 字符集,utf-8(万国码),类似ascll码和iso-8859-1-->
<title>hehehe</title> <!--设置页面的标题-->
<body> <!--显示在页面的主体部分-->
分类
单标签 :只要起始标记 <标签名 属性=“值”/>
不能有内容,只能通过设置属性操作
双标签:双标签内可嵌套标签
众多简单标签<!-- -->
<h1>hehe</h1><!-- 标题标签,字会变大加粗,随1~6逐渐变小 -->
<p>大威天龙</p><!-- 段落标签 -->
<a href="http://www.4399.com">4399小游戏</a> <!-- 超链接标签,可以带上其他网站 --> <!--新窗口打开连接 target设置页面打开方式 _self 替换 _blank 新建空白页打开 _parent html中存在双重嵌套 iframe frameset(基本废弃) --> <a href="http://www.baidu.com" target="_blank">百度</a>
<img src="img/ntt.png" width="200px" height="200px"> <!-- 图片标签,可以在网页内插入图片,修改大小 -->
<hr > <!-- 一条横线 --> <br > <!-- 网页内换行 --> <b>加粗</b> <strong></strong> <!--加粗标签--> <i>斜体</i> <em></em><!--斜体标签 -->
<sup></sup> <!--上角标标签 upup--> n<sup>2</sup> <sub></sub> <!--下角标标签 bottom--> H<sub>2</sub>O
<span></span> <!--span标签 无显示 仅配合css进行布局-->
组合标签
表格
<!--表格--> <h1>表格</h1> <table border="1" cellspacing="0" cellpadding="10"width="90%"> <!--表格最外层标签 边框的宽度为1 边框颜色 边框大小--> <caption></caption> <tr> <!--表格的一个行 t row t h表格的一表头,加粗居中--> <td>第一行第一个单元格</td> <td>第一行第二个单元格</td> <td>第一行第三个单元格</td> </tr> <tr> <td>第二行第一个单元格</td> <td>第二行第二个单元格</td> <td>第二行第三个单元格</td> </tr> <tr> <td>第三行第一个单元格</td> <td>第三行第二个单元格</td> <td>第三行第三个单元格</td> </tr>
列表
<!--列表--> <h1>有序列表</h1> <ol> order list <li>第一项</li> list item <li>第二项</li> <li>第三项</li> </ol> <h1>无序列表</h1> <!--使用最多 可应用于css控制排列方式--> <ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul> <!--自定义列表 define list 基本上不用了--> <h1>自定义列表</h1> <dl> <dt>标题</dt><!--标题--><dd>内容</dd><!--内容--> <dt>标题</dt><dd>内容</dd> <dt>标题</dt><dd>内容</dd> <dt>标题</dt><dd>内容</dd> </dl>
表单
<!--表单--> <form action="表单数据提交的地址,服务器能接受表单数据的页面" method="设置HTTP请求方式,get/post"> <!--method传输协议--> <!--表单元素 可放在form内 并可以向服务器提交数据的标签--> <input type="input类型" name="提交时数据的名字,参数名" placeholder="输入框的提示信息" value="默认值"/> <!--默认值或者对应值--> <!--input类型 text 文本输入框 password 密码输入框 --> </form> <form action="" method="get"> 账号: <input type="text" name="username" placeholder="请输入账号" value=""/> <br > 密码: <input type="password" name="password" placeholder="请输入密码" value=""/> <br /> 体重: <input type="number" name="weight" placeholder="请输入体重" value=""/> <br /> 邮箱: <input type="email" name="email" placeholder="请输入邮箱" value=""/> <br /> 照片: <input type="file" name="photo" placeholder="请上传照片" value=""/> <br /> 性别:<!-- 单选按钮 --> <input type="radio" name="sex" value="男" checked/>男 <!--凭name都叫sex,自动组成组 checked使默认选中--> <input type="radio" name="sex" value="女"/>女 <br> 爱好:<!-- 复选按钮 --> <input type="checkbox" name="hobby" value="吃饭"/>吃饭 <input type="checkbox" name="hobby" value="睡觉"/>睡觉 <input type="checkbox" name="hobby" value="打豆豆" checked/>打豆豆 <br /> 班级:<!--下拉列表--> <select name="clazz"> <option value="BD01">软工01</option> <option value="BD02" selected>软工02</option> <option value="BD03">软工03</option> <option value="BD04">软工04</option> <option value="BDcx">软工创新</option> </select> <br> 个人信息:<!-- 多行文本域 --> <textarea name="" id="" cols="50" rows="5"></textarea> <br> <!-- 按钮1: --> <input type="submit" value="立即提交"/> <!-- <br /> --> <!-- 按钮2: --> <input type="reset" value="重新填写"/> <br /> <!-- 按钮3 button双标签可以嵌套图片 input按钮不行--> <button></button> </form>