<!DOCTYPE html> <!-- 这是HTML的注释 --> <html lang="en" id="myHtml"> <head> <!-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HtmlAll</title> </head> <body bgcolor="grey" background="" id="myBody"> <!-- h1到H6是html预留的标题字,和word的标题字相同 --> <h1>标题</h1> <h2>标题</h2> <p>黛玉葬花,我来啦</p> <p>ABC,Hello</p> <br> <!-- 这里的color和width都是属性 --> <hr color="green" width="50%"> <!-- 语法松散 --> <a href="#">你好</a> <!-- 预留格式用pre隔起来 --> <pre> <p>黛玉葬花,我来啦</p><h1>标题</h1> </pre> <del>删除字</del> <ins>插入字</ins> <b>粗体字</b> <i>斜体字</i> 10<sup>右上角</sup> 10<sub>右下角</sub> <font color="red" size="50">字体标签</font> <br> <!-- 实体符号特点是&开始;结束,lt是小于,gt是大于 --> <a<小于b大于>c> <br> 空 格 号 <!-- 设置表格边框为1像素 --> <!-- thead,tbody,tfoot不是必须的,只是为了方便我们进行JS代码的编写 --> <table border="5px" width="500px" height="200px"> <!-- align设置对齐方式 --> <!-- TH也是单元格标签,自带居中和加粗 --> <thead> <tr> <th>员工编号</th> <th>员工薪资</th> <th>部门名称</th> </tr> </thead> <tbody> <tr align="center"> <td>a</td> <td>a</td> <td>a</td> </tr> <tr> <!-- rowspan是上下合并,最好删除下面的那个 --> <!-- colspan是左右合并,对删除无要求,因为在同一个行内 --> <td colspan="2" align="center">a</td> <td rowspan="2" align="center">a</td> </tr> <tr align="center"> <td>a</td> <td>a</td> </tr> </tbody> <!-- 便于以后进行JS代码的编写 --> <tfoot> <tr align="center"> <td>1</td> <td>2</td> <td>3</td> </tr> </tfoot> </table> <img src="1.png" width="100px" title="图片1" alt="图片找不到喔"> <br> <!-- 图片不要设置高度,设置高度会失真,设置宽度即可,会自动缩放的 --> <img src="1.png" width="100px" title="图片2"> <a href="www.baidu.com">百度</a> <a href="https://www.hao123.com"> <!-- 浏览器上输入一个地址,我们称为URL统一资源定位符 --> <img src="1.png" width="200px" title="hao123"/> <!-- 超链接的作用就是浏览器向服务器发送请求 --> <!-- 本质没区别,就是超链接更加方便罢了 --> </a> <!-- 有序列表 --> <!-- 无序列表 --> <ul type="circle"> <li>中国 <ul type="square"> <li>北京 <ul type="disc"> <li>东城区</li> <li>西城区</li> <li>海淀区</li> <li>朝阳区</li> </ul> </li> <li>天津</li> <li>上海</li> </ul> </li> <li>美国</li> <li>日本</li> </ul> <ol type="a"> <li>水果 <ol type="I"> <li>苹果</li> <li>西瓜</li> <li>桃子</li> </ol> </li> <li>蔬菜 <ol type="i"> <li>西红柿</li> <li>黄瓜</li> </ol> </li> <li>甜点</li> </ol> <br> <form action="/baidu" method="post"> <!-- 表单请求路径 --> 用户名<input type="text" name="username"/><br> 密码<input type="password" name="password"/><br> <input type="submit" value="submit" /><br> </form> <form action="http://www.baidu.com"> <input type="submit" value="百度"/> <input type="text" name="122" value="123"/> </form> <form action="/baidu" method="post"> <!-- 如果我们需要提交就一定要加name,因为提交格式是name=value --> <!-- 包括submit在内都是如此 --> <table> <tr align="center"> <td>用户名</td> <td><input type="text" name="username"/></td> </tr> <tr align="center"> <td>密码</td> <td><input type="password" name="password"/></td> </tr> <tr align="center"> <td colspan="2"> <input type="submit" value="提交" /> <input type="reset" value="清空" /> </td> </tr> </table> </form> <form action="/oa/index.html"> 用户名 <input type="text" name="username"/> <br> 密码 <input type="password" name="password"/> <br> 确认密码 <input type="password"/> <br> 性别 男<input type="radio" name="gender" value="男" checked/> 女<input type="radio" name="gender" value="女"/> <br> 兴趣爱好 抽烟<input type="checkbox" name="interest" value="Smoke"/> 喝酒<input type="checkbox" name="interest" value="Wine"/> 烫头<input type="checkbox" name="interest" value="Hair"/> <br> 学历 <!-- 下拉列表,最终提交的也是name和value --> <select name="grade"> <option value="senior">高中</option> <option value="eng">大专</option> <option value="uni" selected>本科</option> <option value="doct">硕士</option> </select> <br> 简介 <textarea rows="10" cols="60" name="introduction"></textarea> <br> <input type="submit"/> </form> <!-- 下拉列表怎么支持多选 --> <form> <select multiple="multiple" size="5"> <!-- size用来设置选项条数 --> <option>河北省</option> <option>河南省</option> <option>山东省</option> <option>山西省</option> </select> <!-- file控件文件上传专用 --> <input type="file"/> <!-- 隐藏域,网页中不显示,但是会跟表单一起提交 --> <input type="hidden" name="userId" value="111"/> <!-- get还是会显示的 --> <input type="submit"/> </form> <form action="/OA/Test"> <!-- 能看到改不了 --> 用户名<input type="text" value="skajdka" readonly/> <!-- 能看到互动不了,而且不会提交上去 --> 密码<input type="text" value="skjczjcz" disabled/> <input type="submit"/> </form> <!-- input控件的maxlength控件 --> <!-- 设置最大的长度 --> <input type="text" maxlength="3"/> <!-- 在这个HTML文档中,任何元素(节点)都有ID属性,ID是其唯一属性,不能重复 --> <form id="myForm"> <input type="tel" name="tel" id="tel"/> <input type="username" name="username" id="username"/> </form> <div> 我是一个div </div> <span>我是一个Span</span> <!-- span不会独自占用一行 --> <span>我是一个Span</span> <div> 我是一个div <div>Test</div> </div> </body> </html><!DOCTYPE html>
<!-- 这是HTML的注释 -->
<html lang="en" id="myHtml">
<head>
<!-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HtmlAll</title>
</head>
<body bgcolor="grey" background="" id="myBody">
<!-- h1到H6是html预留的标题字,和word的标题字相同 -->
<h1>标题</h1>
<h2>标题</h2>
<p>黛玉葬花,我来啦</p>
<p>ABC,Hello</p>
<br>
<!-- 这里的color和width都是属性 -->
<hr color="green" width="50%">
<!-- 语法松散 -->
<a href="#">你好</a>
<!-- 预留格式用pre隔起来 -->
<pre>
<p>黛玉葬花,我来啦</p><h1>标题</h1>
</pre>
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
10<sup>右上角</sup>
10<sub>右下角</sub>
<font color="red" size="50">字体标签</font>
<br>
<!-- 实体符号特点是&开始;结束,lt是小于,gt是大于 -->
<a<小于b大于>c>
<br>
空 格 号
<!-- 设置表格边框为1像素 -->
<!-- thead,tbody,tfoot不是必须的,只是为了方便我们进行JS代码的编写 -->
<table border="5px" width="500px" height="200px">
<!-- align设置对齐方式 -->
<!-- TH也是单元格标签,自带居中和加粗 -->
<thead>
<tr>
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<!-- rowspan是上下合并,最好删除下面的那个 -->
<!-- colspan是左右合并,对删除无要求,因为在同一个行内 -->
<td colspan="2" align="center">a</td>
<td rowspan="2" align="center">a</td>
</tr>
<tr align="center">
<td>a</td>
<td>a</td>
</tr>
</tbody>
<!-- 便于以后进行JS代码的编写 -->
<tfoot>
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tfoot>
</table>
<img src="1.png" width="100px" title="图片1" alt="图片找不到喔">
<br>
<!-- 图片不要设置高度,设置高度会失真,设置宽度即可,会自动缩放的 -->
<img src="1.png" width="100px" title="图片2">
<a href="www.baidu.com">百度</a>
<a href="https://www.hao123.com">
<!-- 浏览器上输入一个地址,我们称为URL统一资源定位符 -->
<img src="1.png" width="200px" title="hao123"/>
<!-- 超链接的作用就是浏览器向服务器发送请求 -->
<!-- 本质没区别,就是超链接更加方便罢了 -->
</a>
<!-- 有序列表 -->
<!-- 无序列表 -->
<ul type="circle">
<li>中国
<ul type="square">
<li>北京
<ul type="disc">
<li>东城区</li>
<li>西城区</li>
<li>海淀区</li>
<li>朝阳区</li>
</ul>
</li>
<li>天津</li>
<li>上海</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
<ol type="a">
<li>水果
<ol type="I">
<li>苹果</li>
<li>西瓜</li>
<li>桃子</li>
</ol>
</li>
<li>蔬菜
<ol type="i">
<li>西红柿</li>
<li>黄瓜</li>
</ol>
</li>
<li>甜点</li>
</ol>
<br>
<form action="/baidu" method="post">
<!-- 表单请求路径 -->
用户名<input type="text" name="username"/><br>
密码<input type="password" name="password"/><br>
<input type="submit" value="submit" /><br>
</form>
<form action="http://www.baidu.com">
<input type="submit" value="百度"/>
<input type="text" name="122" value="123"/>
</form>
<form action="/baidu" method="post">
<!-- 如果我们需要提交就一定要加name,因为提交格式是name=value -->
<!-- 包括submit在内都是如此 -->
<table>
<tr align="center">
<td>用户名</td>
<td><input type="text" name="username"/></td>
</tr>
<tr align="center">
<td>密码</td>
<td><input type="password" name="password"/></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="提交" />
<input type="reset" value="清空" />
</td>
</tr>
</table>
</form>
<form action="/oa/index.html">
用户名
<input type="text" name="username"/>
<br>
密码
<input type="password" name="password"/>
<br>
确认密码
<input type="password"/>
<br>
性别
男<input type="radio" name="gender" value="男" checked/>
女<input type="radio" name="gender" value="女"/>
<br>
兴趣爱好
抽烟<input type="checkbox" name="interest" value="Smoke"/>
喝酒<input type="checkbox" name="interest" value="Wine"/>
烫头<input type="checkbox" name="interest" value="Hair"/>
<br>
学历
<!-- 下拉列表,最终提交的也是name和value -->
<select name="grade">
<option value="senior">高中</option>
<option value="eng">大专</option>
<option value="uni" selected>本科</option>
<option value="doct">硕士</option>
</select>
<br>
简介
<textarea rows="10" cols="60" name="introduction"></textarea>
<br>
<input type="submit"/>
</form>
<!-- 下拉列表怎么支持多选 -->
<form>
<select multiple="multiple" size="5">
<!-- size用来设置选项条数 -->
<option>河北省</option>
<option>河南省</option>
<option>山东省</option>
<option>山西省</option>
</select>
<!-- file控件文件上传专用 -->
<input type="file"/>
<!-- 隐藏域,网页中不显示,但是会跟表单一起提交 -->
<input type="hidden" name="userId" value="111"/>
<!-- get还是会显示的 -->
<input type="submit"/>
</form>
<form action="/OA/Test">
<!-- 能看到改不了 -->
用户名<input type="text" value="skajdka" readonly/>
<!-- 能看到互动不了,而且不会提交上去 -->
密码<input type="text" value="skjczjcz" disabled/>
<input type="submit"/>
</form>
<!-- input控件的maxlength控件 -->
<!-- 设置最大的长度 -->
<input type="text" maxlength="3"/>
<!-- 在这个HTML文档中,任何元素(节点)都有ID属性,ID是其唯一属性,不能重复 -->
<form id="myForm">
<input type="tel" name="tel" id="tel"/>
<input type="username" name="username" id="username"/>
</form>
<div>
我是一个div
</div>
<span>我是一个Span</span>
<!-- span不会独自占用一行 -->
<span>我是一个Span</span>
<div>
我是一个div
<div>Test</div>
</div>
</body>
</html>
05-16
246
246
02-12
830
830
07-05
297
297
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
