简单HTML

来源：互联网发布：910九玩诛仙手游端口编辑：程序博客网时间：2024/06/09 22:45

<!DOCTYPE html><html>  <head>    <title>标题</title>    <meta charset="UTF-8"/>  </head>    <body>      显示空格&nbsp空格内容<br>换行<br> <!--圆角情况下的空格可用-->        <a href="http://www.baidu.com" title="光标选择展示标题" target="_blank">百度一下</a> <!--超链接，属性：可自定义（data-....）target="_blank":打开新窗口-->        <!--div标签可以看成一个可以存放标签的容器-->    <div>我是div元素</div>    <!--换行-->    <!--块级元素，占据整行-->        <!--使用span标签来组合内联元素，以便通过css来美化它-->    <span>我是span元素</span>  <!--不换行-->  <!--内联元素-->        <hr /> <!--划线，单标签-->        <h1>主题内容标签，块级元素，双标签</h1>    <h2>主题内容标签，块级元素，双标签</h2>    <h5>主题内容标签，块级元素，双标签</h5>    <h6>主题内容标签，块级元素，双标签</h6>        <p>段落，块级元素，双标签</p>        <ul>      <li>无序列表标签</li>      <li>无序列表标签</li>      <li>无序列表标签</li>        </ul>        <ol>      <li>有序列表标签</li>      <li>有序列表标签</li>      <li>有序列表标签</li>        </ol>            <dl>   <!--定义列表-->      <dt>标题</dt>      <dd>        详情......      </dd>    </dl>        <img src="C:\Users\liuguan\Desktop\微微吗.png" alt="说明信息" width="100" height="100" /> <!--加载图片“./：当前目录；../：上一级目录”-->    <img src="C:\Users\liuguan\Desktop\微微吗.png" alt="说明信息" width="30%" height="30%" />  <!--百分比：相对于body页面的比例，自由缩放-->        <!--对图片的某个区域加超链接，也可以整体加链接<a href=""><img str="" /></a>-->    <img src="C:\Users\liuguan\Desktop\微微吗.png" usemap="#image" /> <!--被加链接的图片，被map标签所作用的图片 usemap="#id名称"-->    <map id="image" name="image"> <!--id:保持唯一性；name:保持兼容性-->      <area shape="rect" coords="100,100,177,177" href="http://www.baidu.com" alt="链接说明信息" target="_blank" />  <!--shape：定义连接的形状，常用值（rect,circle）;coords：确定区域坐标位置（左上角右下角的相对坐标）；href：链接地址；alt：说明信息-->              </map>              </body></html>

HTML表格

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>标题</title>    </head>    <body>        <table border="1"><!--表格：tr行，td列，th表头单元格（加粗）属性：cellpadding（单元格大小）cellspacing（单元格间距大小）-->            <tr><th>姓名</th><th>性别</th><th>年龄</th><th>部门</th></tr>            <tr><th>刘冠</th><td> 男 </td><td> 23 </td><td>信心中心</td></tr>            <tr><th>刘冠</th><td> 男 </td><td> 23 </td><td>信心中心</td></tr>        </table>    <!--td属性：colspan（规定单元格可横跨的列数，向后顶）rowspan（规定单元格可横跨的行数，向下顶）-->    </body></html>

HTML表单

<!DOCTYPE html>      <html>               <head>                  <title>页面标题</title>         <meta charset="UTF-8">    </head>    <body>                  <h3>登录界面</h3>        <form action="表单提交地址" name="表单名字" target="_blank" method="get" ><!--method:get/post-->            用户名：<input type="text" /><br/><br/>            密码：  <input type="password" /><br/><br/>            头像：<input type="file" /><br/><br/>            性别：<input type="radio" name="sex"/>男  <!--通过name属性的一致来实现单选-->                  <input type="radio" name="sex" id="boy" /><label for="boy">男</label> <!--这种方式增强用户体验（直接点击文字即可选中）-->                  <input type="radio" name="sex" checked="checked" />女<br/><br/>            爱好：<input type="checkbox" />足球  <!--复选框-->                  <input type="checkbox" checked="checked" />篮球<br/><br/>   <!--在单/复选框中checked="checked" 写到哪默认那个被选中-->            自我介绍：<textarea cols="20" rows="3">多行输入框</textarea><br/><br/> <!--cols:粗略的每行可输入字符个数,rows:行数-->            下拉菜单：<select> <!--multiple="multiple"选择列表展开，并且可以多选-->                            <optgroup label="必修课"><!--optgroup分组-->                                <option value="集成电路">集成电路</option>                                <option value="数字信号处理">数字信号处理</option>                                <option value="信号与系统">信号与系统</option>                            </optgroup>                            <optgroup label="选修课">                                <option value="初级刀术">初级刀术</option>                                <option value="二十四式太极拳" selected="selected">二十四式太极拳</option> <!--默认选中-->                                <option value="三路长拳">三路长拳</option>                            </optgroup>                       </select>  <br/><br/>                                         <!--disabled="disabled"不可操作状态-->                  <!--readonly="readonly"只读模式-->                  <!--size="size"输入框长度-->                  <!--input type="button"value="按钮" /-->                                    <input type="submit" value="登录"/>&nbsp&nbsp&nbsp  <!--提交-->                  <input type="reset" />   <!--重置：清空信息-->        </form>    </body></html>

补充

    <head>                  <title>页面标题</title>         <meta charset="UTF-8" />        <meta name="keywords" content="搜索关键字1,搜索关键字2" />        <meta name="description" content="描述内容" />        <meta http-equiv="refresh" content="等待秒数;URL=跳转 url 地址" />        <meta http-equiv="pragma" content="no-cache"> <!--不缓存-->        <!--            title:例如百度搜索列表中的标题            description:例如百度搜索列表中的标题下边的描述                    -->    </head>

阅读全文

0 0