HTML基础标签笔记

来源：互联网发布：mac版搜狗输入法设置编辑：程序博客网时间：2024/05/29 18:39
<!-- 声明网页的版本 --><!DOCTYPE HTML><!-- 唯一的根元素 --><html><!-- 只有两个子元素 --><!-- 对网页进行声明 --><head><!-- 声明网页的编码 --><meta charset="utf-8" /><link><!-- 声明网页的标题 --><title>我是title，放标题</title><style>样式</style><script>js</script></head><!-- 写出网页的内容 --><!-- 注释的快捷键ctrl+shift+？ --><body><p><a href="#bottom">到底部</a>我是瞄点，链接上面的瞄点标签。</p><div><h1 style="color:#fba098">HTML基本标签演示</h1></div><br/><br/><br/><div><!--有个颜色挺好看的 style="background-color:#fba098;"  --><h2>成为<span style="color:blue">java</span>工程师学习指南</h2><ul><li>前端需要学习的内容：</li><ol><li>html</li><li>css</li><li>js</li></ol><li>后端需要学习的内容：</li><ol><li>JavaSE</li><li>JDBC</li><li>Servlet</li></ol><li>数据库需要学习的内容：</li><ol><li>oracle</li><li>mysql</li></ol></ul></div><div style="background-color:#5ca098"><p><h3>演示不同的行内元素的效果：</h3><ul><li><span style="color:blue">我是span,划块</span></li><li><i>我是i标签，斜体</i> <br/></li><li><e>我是e标签，斜体</e> <br/></li><li><b>我是b标签，加粗</b> <br/></li><li><strong>我是strong,着重</strong> <br/></li><li><del>我是del标签，删除</del> <br/></li><li><u>我是b标签，下划线</u> <br/></li><li>我是  空格  标签，html空格自行折叠，要空格需要写& nbsp;</li></ul></p></div><div><p><h2>演示图片和超链接的效果：</h2><ul><li>我是img标签，加载图片<p><!-- 图片与网页平级 --><img src="01.jpg" /><!-- 图片在网页下级 --><img src="i/02.jpg" /><!-- 图片在网页上级 --><img src="../03.jpg" /><img src="../images/04.jpg" /></p></li><li>我是a标签，是一个链接,默认本页打开。<a href="http://www.163.com">网易</a></li><li>我是href属性，是a的链接地址，例如：a href="www.163.com" 。</li><li>我是target属性，是a网址的目标打开方式，可以用_self在本页打开，或者_blank新建一页。</li><ol><li>演示本页打开target="_self"：<a href="http://www.163.com" target="_self">网易</a></li><li>演示新页打开target="_blank"：<a href="http://www.163.com" target="_blank">网易</a></li></ol></ul></p></div><div style="background-color:#5ca098"><p><h2>演示表格的效果：</h2><ol><li><table><h4>无边框表格</h4><tr><td>我是td标签</td><td>我是td标签</td></tr><tr><td>我是td标签</td><td>我是td标签</td></tr></table></li><li><table border="1"><h4>有边框表格</h4><tr><td rowspan="2">td属性rowspan是跨行，也就是竖着合并单元格</td><td>我是td标签</td></tr><tr><td>我是td标签</td></tr><tr><td colspan="2">td属性colspan是跨列，也就是横着合并单元格</td></tr><tr><td>我是td标签</td><td>我是td标签</td></tr></table></li><li><table border="1" height="300" width="500" cellpadding="1" cellspacing="2"><h4>有边框表格</h4><p><em>注意：定义了宽高了的表格，表格的宽度不会随着内容的长短改变。</em></p><p>常用的table属性。例如：属性border="1"</p><ul><li>border定义边框</li><li>height定义格高</li><li>width定义格宽</li><li>align定义位置</li><li>cellpadding定义单元格边框与内容之间的距离</li><li>cellspacing定义单元格之间的间距</li></ul><br/><tr><td>tr属性常用的有align，valign</td><td>tr是行，td是列</td></tr><tr><td>我是td标签</td><td>我是td标签</td></tr></table></li><li> <!-- 行分组 -->    <table border="1" width="30%">     <h4>行分组</h4>     <p>行分组分为thead，tbody，tfoot表头，表体，表尾；方便分别做不同的样式。</p>        <thead>            <tr>                <th>学号</th>                <th>姓名</th>                <th>成绩</th>            </tr>        </thead>        <tbody style="color:red;">                <tr>                    <td>001</td>                    <td>张三</td>                    <td>98</td>                </tr>                <tr>                    <td>002</td>                    <td>李四</td>                    <td>100</td>                </tr>        </tbody>        <tfoot>                <tr>                    <td colspan="2">总分</td>                    <td>198</td>                </tr>        </tfoot>    </table></li></ol></p></div><div><p><h2>演示表单效果：</h2>   <h4>form表单</h4><p>主要属性：action是表单提交的url</p><p>主要属性：method是表单数据提交的方式</p><p>主要属性：enctype是表单数据编码的方式</p><ul><li><p>帐号密码输入文本框</p><p>主要属性：</p><p>type属性定义文本框类型</p><p>maxlength属性定义最大输入长度</p><p>readonly属性定义只读</p>   <form action="" method="get">username:<input type="text" maxlength="10" name="帐号：" /><br/>password:<input type="password" name="密码："/></form></li><li><p>单选框，input的属性type="radio"</p><form action="">性别：<input type="radio" name="sex" value="male"/>male<input type="radio" name="sex" value="female"/>female</form></li><li><p>复选框，input的属性type="checkbox"</p><form action="">兴趣爱好：<input type="checkbox" />阅读<input type="checkbox" />画画</form></li><li><p>按钮</p><form action=""><input type="submit" value="提交"/><input type="reset" value="重置"/><input type="button" value="取消"/></form></li><li><p>隐藏域，文件选择框</p><form action=""><input type="hidden" value="9"/><label for="file">上传：</label><input type="file" id="file"/></form></li><li><p>文本域</p> <label for="address">地址：</label> <textarea cols="30" rows="5" id="address">厦门市湖里区禾山街道观日西二里</textarea></li><!--下拉选 --><li><p>下拉选框</p><label for="course">课程：</label> <select id="course"><option value="1">Java</option><option value="2">php</option><option value="3">.net</option></select></li></ul></p></div> <p><a name="bottom">我是锚点a标签，属性name，</a></p> <!-- 3)顶部默认是瞄点，没有名字 --> <p> <a href="#">顶部</a> </p> </body></html>
阅读全文
0 0