html 的一些基础操作
花了一天学了点html语言。。不记下来的话又白学了
基础中的基础格式
<!DOCTYPE html> <html> <head> <!-- 字符集的选择 utf-8 gbk gbk2312 --> <meta http-equiv="Content-Type" content="text/html;charset=gbk2312"> <!-- 标题标签 --> <title>我是标题</title> </head> <body> <!-- 换行标签 --> Hello world!</br> html语法不区分大小写</br> <!-- 下划线标签 --> <hr/> <!-- 加粗标签 --> <h1>h1级加粗</h1> <h2>h2级加粗</h2> <h3>h3级加粗</h3> <h4>h4级加粗</h4> <h5>h5级加粗</h5> <h6>h6级加粗</h6> <!-- 段落标签 --> <p> HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签． 通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等 </p> <p> 超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、 图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中， </p> <!-- 属性 --> <p align="right"> 向右对齐属性 </p> <p align="center"> 居中对齐属性 </p> <p align="justify"> 两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致 两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致 两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致 两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致 两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致两端空白保持一致 </p> <!-- 预格式标签：将编辑器里的文字原封不动显示到浏览器--> <pre> HTML称为超文本标记语言 ， 是一种标识性的语言。它包括一系列标签． 通过这些标签可以将网络上的文档格式 统一，使分散的Internet资源连接为一个逻辑整体。 HTML文本是由HTML命令组成的描述性文本，HTML 命令可以说明文字，图形、动画、声音、表格、链接等 </pre> <!-- 字体属性标签 --> <p> 颜色是<font color="red">红色</font> 颜色是<font color="green">绿色</font> 大小是<font size="1">1号</font> 大小是<font size="3">3号</font> 大小是<font size="7">7号</font> 字体是<font face="隶书">隶书</font> </p> <!-- 修饰标签 --> <p> <b>加粗</b> </br> <i>倾斜</i> </br> 2<sub>[下标]</sub> 2<sup>[上标]</sup> </p> <!-- 特殊符号 --> <p> 左尖括号< 右尖括号> </br> 空格 空格 </p> <!-- 为超链接定义的锚点 --> <a href="#" name="maodian"></a> <!-- 从这里就可以跳到图片列表和链接去 --> <a href="图片列表和链接.html#chapter1" ><h1>第一章</h1></a> <a href="图片列表和链接.html#chapter2" ><h1>第二章</h1></a> <a href="图片列表和链接.html#chapter3" ><h1>第三组</h1></a> </body> </html>
图片，列表和超链接
<!DOCTYPE html> <html> <head> <!-- 字符集的选择 utf-8 gbk gbk2312 --> <meta http-equiv="Content-Type" content="text/html;charset=gbk2312"> <!-- 标题标签 --> <title>我是标题</title> </head> <body> <!-- 图片标签 --> 这是我的<img src="Img/zsben.jpg" align="top"/>和文字上对齐图片</br> 这是我的<img src="Img/zsben.jpg" align="bottom"/>和文字下对齐图片</br> 这是我的<img src="Img/zsben.jpg" align="middle"/>和文字中间对齐图片</br> 给图片调整大小<img src="Img/zsben.jpg" align="bottom" width="200px" height="100px"/></br> 给图片调整大小<img src="Img/zsben.jpg" align="bottom" width="20%" height="20%"/></br> <!-- 图片替代文本 --> 给图片调整大小<img src="Img/zsbenn.jpg" align="bottom" width="2000px" height="1000px" alt="图片加载失败"/></br> <!-- 无序列表 --> <ul type="circle"> <li>两端空白保持一致两端空白保持一致两端</li> <li>两端空白保持一致两端空白保持一致两端</li> <li>两端空白保持一致两端空白保持一致两端</li> <li>两端空白保持一致两端空白保持一致两端</li> </ul> <ul type="square"> <li>两端空白保持一致两端空白保持一致两端</li> <li>两端空白保持一致两端空白保持一致两端</li> <li>两端空白保持一致两端空白保持一致两端</li> <li>两端空白保持一致两端空白保持一致两端</li> </ul> <ul type="disc"> <li>两端空白保持一致两端空白保持一致两端</li> <li>两端空白保持一致两端空白保持一致两端</li> <li>两端空白保持一致两端空白保持一致两端</li> <li>两端空白保持一致两端空白保持一致两端</li> </ul> <!-- 有序列表 --> <ol type="10"> <li>两端空白保持一致两端空白保持一致两端</li> <li>两端空白保持一致两端空白保持一致两端</li> <li>两端空白保持一致两端空白保持一致两端</li> <li>两端空白保持一致两端空白保持一致两端</li> </ol> <ol type="a"> <li>两端空白保持一致两端空白保持一致两端</li> <li>两端空白保持一致两端空白保持一致两端</li> <li>两端空白保持一致两端空白保持一致两端</li> <li>两端空白保持一致两端空白保持一致两端</li> </ol> <ol type="A"> <li>两端空白保持一致两端空白保持一致两端</li> <li>两端空白保持一致两端空白保持一致两端</li> <li>两端空白保持一致两端空白保持一致两端</li> <li>两端空白保持一致两端空白保持一致两端</li> </ol> <ol type="i"> <li>两端空白保持一致两端空白保持一致两端</li> <li>两端空白保持一致两端空白保持一致两端</li> <li>两端空白保持一致两端空白保持一致两端</li> <li>两端空白保持一致两端空白保持一致两端</li> </ol> <!-- 自定义列表 --> <dl> <dt>水果</dt> <dd>苹果</dd> <dd>香蕉</dd> <dt>运动</dt> <dd>跑步<dd> <dd>打篮球</dt> </dl> <!-- 超链接 --> <a href="基础文字格式.html">进入站内链接到基础文字格式</a></br> <a href="http://www.baidu.com">进入站外链接到百度</a> <!-- 空链接(锚点) --> <a gref="#">空链接</a> <!-- 图片链接 --> <a href="http://www.baidu.com"><img src="Img/zsben.jpg"></a></br> <!-- 超链接属性 --> <a href="基础文字格式.html" target="_blank">打开新网页进行跳转</a></br> <a href="基础文字格式.html" target="_self">在当前页面进行跳转</a></br> <a href="基础文字格式.html" title="超链接标题">鼠标滑过可显示标题</a></br> <!-- 锚点：用来进行定位跳转--> <!-- 在本页面内跳转 --> <a href="#chapter1">第一章</a></br> <a href="#chapter2">第二章</a></br> <a href="#chapter3">第三章</a></br> <a href="#" name="chapter1"></a> <h1>第一章</h1> 1</br>1</br>1</br>1</br>1</br>1</br>1</br>1</br> 1</br>1</br>1</br>1</br>1</br>1</br>1</br>1</br> 1</br>1</br>1</br>1</br>1</br>1</br>1</br>1</br> 1</br>1</br>1</br>1</br>1</br>1</br>1</br>1</br> 1</br>1</br>1</br>1</br>1</br>1</br>1</br>1</br> <a href="#" name="chapter2"></a> <h1>第二章</h1> 1</br>1</br>1</br>1</br>1</br>1</br>1</br>1</br> 1</br>1</br>1</br>1</br>1</br>1</br>1</br>1</br> 1</br>1</br>1</br>1</br>1</br>1</br>1</br>1</br> 1</br>1</br>1</br>1</br>1</br>1</br>1</br>1</br> 1</br>1</br>1</br>1</br>1</br>1</br>1</br>1</br> <a href="#" name="chapter3"></a> <h1>第三章</h1> 1</br>1</br>1</br>1</br>1</br>1</br>1</br>1</br> 1</br>1</br>1</br>1</br>1</br>1</br>1</br>1</br> 1</br>1</br>1</br>1</br>1</br>1</br>1</br>1</br> 1</br>1</br>1</br>1</br>1</br>1</br>1</br>1</br> 1</br>1</br>1</br>1</br>1</br>1</br>1</br>1</br> <!-- 跳转到其他网页的某位置 --> <a href="基础文字格式.html#maodian"><h1>跳转到基础文字格式的超链接</h1></a> <!-- 使用超链接进行下载 --> <a href="Img.zip">进行下载</a> <!-- 使用超链接访问邮箱 --> <a href="mailto:1249461124@qq.com">访问邮箱</a> </body> </html>
表格
<!DOCTYPE html> <html> <head> <!-- 字符集的选择 utf-8 gbk gbk2312 --> <meta http-equiv="Content-Type" content="text/html;charset=gbk2312"> <!-- 标题标签 --> <title>我是标题</title> </head> <body> <!-- 表格标签 边界 宽度(会自动延伸) 高度 表格居中 颜色 边框间距 单元格内容和边框间距--> <table border="20px" width="500px" height="400px" align="center" bgcolor="green" cellspacing="10px" cellpadding="10px"> <!-- 一行 --> <tr height="300px" align="right" valign="top" bgcolor="red"> <!-- 一列 --> <td width="200" bgcolor="pink">一个单元格</td> <td>一个单元格</td> <td>一个单元格</td> </tr> <tr align="center"> <!-- 一列 --> <td>一个单元格</td> <td>一个单元格</td> <td>一个单元格</td> </tr> </table> </br> <!-- 多行多列合并 --> <table border="20px" width="500px" height="200px" align="center" > <tr align="center"> <!-- 列合并---> <td colspan="2">一个单元格</td> <td>一个单元格</td> </tr> <tr align="center"> <!-- 行合并 --> <td rowspan="2">一个单元格</td> <td>一个单元格</td> <td>一个单元格</td> </tr> <tr align="center"> <td colspan="2" rowspan="2">一个单元格</td> </tr> <tr align="center"> <!-- 一列 --> <td>一个单元格</td> </tr> <tr align="center"> <!-- 一列 --> <td>一个单元格</td> <td>一个单元格</td> <td>一个单元格</td> </tr> </table> <!-- 练习 --> <table border="1px" align="center" width="500px" height="300px"> <tr align="center"> <td rowspan="2">商品</td><td colspan="2">本月</td><td colspan="2">上月</td> </tr> <tr> <td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td> </tr> </table> <!-- 设置网页百分比 嵌套表格--> <table border="1px" align="center" width="80%"> <tr align="center"> <td rowspan="2"> <table border="1px" align="center" width="50%" height="80%"> <tr align="center"> <td rowspan="2">商品</td><td colspan="2">本月</td><td colspan="2">上月</td> </tr> <tr> <td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td> </tr> </table> </td> <td colspan="2">本月</td><td colspan="2">上月</td> </tr> <tr> <td>1</td><td>1</td><td>1</td><td>1</td> </tr> <tr> <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td> </tr> <tr> <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td> </tr> <tr> <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td> </tr> <tr> <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td> </tr> </table> <!-- 设置表头 标题--> <table border="1px" align="center" width="500px" height="300px"> <caption>销售统计表</caption> <tr align="center"> <th rowspan="2">商品</td><th colspan="2">本月</td><th colspan="2">上月</td> </tr> <tr> <td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td> </tr> </table> </body> </html>
表单的一些操作
<!DOCTYPE html> <html> <head> <!-- 字符集的选择 utf-8 gbk gbk2312 --> <meta http-equiv="Content-Type" content="text/html;charset=gbk2312"> <!-- 标题标签 --> <title>我是标题</title> </head> <!-- action为表单提交路径 method控制数据提交方法:get是直接放在url里，post将数据单独封装成一个包 最后一个参数用来上传文件--> <form action="表格.html" method="post" name="register" enctype="mutipart/form-data"> <!-- 表单的一些属性 --> <table> <tr> <td>账号</td> <td><input type="text" name="text" maxlength="6" placeholder="请输入你的用户名"/></td> </tr> <tr> <td>密码</td> <td><input type="password" name="password" placeholder="请输入密码"/></td> </tr> <tr> <td>确认密码</td> <td><input type="password" name="repassword" placeholder="请输入密码"/></td> </tr> <!-- 单选框 --> <tr> <td>性别</td> <!-- 两个控件同名，只能选择一个 --> <td>男<input type="radio" name="sex" checked /> 女<input type="radio" name="sex"/></td> </tr> <tr> <td>是否是中国人</td> <td>是<input type="radio" name="isChinese" checked /> 不<input type="radio" name="isChinese"/></td> </tr> <!-- 多选框 --> <tr> <td>爱好</td> <td>读书<input type="checkbox" name="hobby" /> 游泳<input type="checkbox" name="hobby" /> 旅游<input type="checkbox" name="hobby" /> 玩游戏<input type="checkbox" name="hobby" /></td> </tr> <!-- 提交按钮，重置按钮，普通按钮 --> <tr> <td colspan="2" align="center"> <input type="reset" name="reset" value="设置为默认"> <input type="submit" name="register" value="注册"/> </td> </tr> <!-- 图片提交按钮 --> <tr> <td colspan="2" align="center"> <input type="image" src="Img/zsben.jpg" /> </td> </tr> <!-- 隐藏控件 --> <input type="hidden" name="id" value="100" /> <!-- 下拉列表 --> <tr> <td>生日</td> <td> <select name="month"> <option value="1">1月</option> <option value="2">2月</option> <option value="3">3月</option> <option value="4">4月</option> <option value="5">5月</option> <option value="6">6月</option> <option value="7" selected>7月</option> <option value="8">8月</option> <option value="9">9月</option> <option value="10">10月</option> <option value="11">11月</option> <option value="12">12月</option> </select> </td> </tr> <!-- 文本域 --> <tr> <td>交友宣言</td> <td> <textarea placeholder="可以说一下你的交友理由" rows="20" cols="20"> </textarea> </td> </tr> <!-- 文件上传 --> <tr> <td> 简历上传<input type="file" name="resume"/> </td> <td></td> </tr> </table> </form> </html>
框架切割网页
<html> <frameset rows="25%,*"> <frame src="框架1.html" name="top"/> <frameset cols="25%,*"> <frame src="框架2.html" name="bottom"/> <frame src="框架3.html" name="middle"/> </frameset> </frameset> </html>
