HTML5入门—DAY1:HTML基础
程序员文章站
2022-06-26 16:32:43
HTML5入门—DAY1:HTML基础
<...
HTML5入门—DAY1:HTML基础
<!doctype html> <html> <head> <meta charset="utf-8"> <title>DAY1:HTML基础</title> <style> *{ margin:0; padding:0;} body{ padding: 30px; padding-top:10px; line-height: 35px; font-family: "微软雅黑";} h1,h2{padding: 20px 0;} h3{ background: #00AA88; color: #FFFCF4; font-size: 20px; font-weight: 700; margin: 10px 0; border-radius: 4px; padding: 5px 0px 5px 15px;} p{ line-height: 40px;} ul li{ list-style: none;line-height: 40px;} span{ color: #199475; font-weight: 700; font-size:18px; display: block; border-radius: 4px; padding: 10px; font-size: 18px; padding-left: 0px;} em{ font-style: normal; color:red;} .other{ color:#044D22;} .oo{ color:red; display:inline; font-size:18px; font-weight:normal;} .marleft{ margin-left:30px;} .marbtom{ margin:15px 0; font-weight:600;} .borderbtm{ border-bottom: solid 1px #eee; padding-bottom: 15px;margin-bottom: 15px;} .textcon{ margin: 10px 0; border: solid 1px #ddd; border-left-width: 6px; padding: 10px; border-radius: 4px; border-color: #f60; } </style> </head> <body> <p class="boxs"> <h1>DAY1:HTML基础</h1> <h2 class="borderbtm"> </h2> <p class="marleft"> <p><span>HTML的基本语法</span></p> <blockquote class="textcon"> <p><strong class="oo">1、<常规标记></strong><br> <标记 属性=“属性值” 属性=“属性值”></标记><br> 例如:<head></head></p> </blockquote> <blockquote class="textcon"> <p><strong class="oo">2.空标记</strong><br> <标记 属性=“属性值” /><br> 例如:<meta charset=”utf-8”> <br/></p> <br> </blockquote> </p> <h3>五、HTML常用标记</h3> <p class="marleft"> <p class="marbtom">1、文本标题(h1-h6) </p> <blockquote class="textcon"> <p><h1>LOGO</h1> <br> <h2>次要栏目或标题-小标题H2</h2> <br> <h3>再次要栏目或分类小标题H3</h3> <br> <h4>文中分类小标题H4</h4> <br> <h5>二级标题</h5><br> <h6>六级标题</h6></p> <p><strong>html标题标签使用原则</strong>:</p> <p>H1在一个网页中最好只使用一次,如对一个网页LOGO使用。<br> </p> </blockquote> <p class="marbtom">2、段落文本(p) </p> <blockquote class="textcon"> <p><p>段落文本内容</p><br> 标识一个段落(段落与段落之间有段间距)</p> </blockquote> <p class="marbtom">3、空格 </p> <blockquote class="textcon"> <p> <br> 所占位置没有一个确定的值,这与当前字体字号都有关系.</p> </blockquote> <p class="marbtom">4、换行(br) </p> <blockquote class="textcon"> <p><br /><br> 换行是一个空标记(强制换行)<br> </p> </blockquote> <strong class="marbtom">5、加粗 加粗有两个标记</strong><br> <blockquote class="textcon"> A、<b>加粗内容</b><br> B、<strong>加粗内容</strong><br> </blockquote> <strong class="marbtom">6、倾斜<br></strong> <blockquote class="textcon"> <em></em> ,<i></i></p> </blockquote> <p><strong class="marbtom">7、水平线</strong> <blockquote class="textcon"> <hr />空标记<br></blockquote> <strong class="marbtom">8、列表(ul,ol,dl)</strong> <blockquote class="textcon"> <p>HTML中有三种列表分别是:无序列表,有序列表,自定义列表<br> <p style="overflow:hidden"> <p style="float:left; height:220px; margin-right:30px; "> *无序列表<br> 无序列表组成:<br> <ul>(unordered list)<br> <li></li><br> <li></li><br> ......<br> </ul><br> </p> <p style="float:left; height:220px; margin-right:30px; "> *有序列表<br> 有序列表组成:<br> <ol>(ordered list)<br> <li></li><br> <li></li><br> ......<br> </ol><br> </p> <p style="float:left; height:220px; margin-right:30px; overflow:hidden; "> *自定义列表<br> <dl>(definition list)<br> <dt>名词</dt><br> <dd>解释</dd><br> (definition description)<br> ......<br> </dl><br> <br> </p> </p> </p> <br> </p> </blockquote> <p class="marbtom">9、插入图片</p> <blockquote class="textcon"> <p><img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" /><br> </p></blockquote> <strong class="marbtom">10、超链接的应用</strong></p> <blockquote class="textcon"> <p>语法:<br> <a href="目标文件路径及全称/连接地址" title="提示文本">链接文本/图片</a><br> <a href="#"></a>空链接<br> </p> </blockquote> <p class="marbtom"> 11、p和span的用法</p> <blockquote class="textcon"> <p><p ></p></p> <p>没有具体含义,统称为块标签,<br> 用来设置文档区域,是文档布局常用对象</p> <p><span> </span><br> 文本结点标签<br> 可以是某一小段文本,或是某一个字。 <br> </p> </blockquote> <p class="marbtom">12、数据表格的作用及组成</p> <blockquote class="textcon"> <p >作用:显示数据<br> </p> <p> 表格组成<br> <table width="value" height="value" border="value" bgcolor="value" cellspacing="value" cellpadding="value"><br> <tr><br> <td></td><br> <td></td><br> </tr><br> </table></p> <p><strong class="oo">注:一个tr表示一行;一个td表示一列(一个单元格)</strong><br> *数据表格的相关属性<br> 1)width="表格的宽度"<br> 2)height="表格的高度"<br> 3)border="表格的边框"<br> 4)bgcolor="表格的背景色" bg=background<br> 5)bordercolor="表格的边框颜色"<br> 6)cellspacing="单元格与单元格之间的间距"<br> 7)cellpadding="单元格与内容之间的空隙"<br> 8)对齐方式:align="left/center/right";<br> 9)合并单元格属性:<br> colspan=“所要合并的单元格的列数"合并列; </p> <p>rowspan=“所要合并单元格的行数”合并行;</p> </blockquote> <p class="marbtom">13、表单的作用及组成</p> <p><span class="oo">表单的作用:用来收集用户的信息的;</span></p> <p>1)、表单框<br> <blockquote class="textcon"> <form name="表单名称" method="post/get" action=""></form><br> </blockquote> 2)文本框<br> <blockquote class="textcon"> <input type="text" value="默认值"/><br></blockquote> 3)密码框<br> <blockquote class="textcon"> <input type="password" /><br> <input type="password" placeholder="密码" /></p></blockquote> <p>4)重置按钮<br> <blockquote class="textcon"> <input type="reset" value="按钮内容" /><br></blockquote> 5)单选框/单选按钮<br> <blockquote class="textcon"> <input type="radio" name="ral" /><br> <input type="radio" name="ral" checked="checked" /><br> 单选按钮里的name属性必须写,同一组单选按钮的name属性值必须一样。<br> checked="checked"(默认选中;) disabled="disabled"禁用</p></blockquote> <p>6)复选框<br> <blockquote class="textcon"> <input type="checkbox" name="like" /><br> <input type="checkbox" name="like" disabled="disabled" /> (disabled="disabled" :禁用)<br> (checked="checked" :默认选中)</p></blockquote> <p> 7)下拉菜单<br> <blockquote class="textcon"> <select name=""><br> <option>菜单内容</option><br> </select><br></blockquote> 8)多行文本框(文本域)<br> <blockquote class="textcon"> <textarea name="textareal" cols="字符宽度" rows="行数"><br> </textarea><br></blockquote> 9)按钮<br> <blockquote class="textcon"> <input name="'" type="button" value=“按钮内容” /><br> <input name="'" type="submit" value=“按钮内容” /><br> <button></button></p></blockquote> <p class="oo"> <p ><br> </p> </p> </p> <p style=" width: 130px; height: 45px; line-height: 44px; text-align: center; color: #f00; background: #000; border-radius: 4px; position: fixed; bottom: 50px; cursor:pointer; right: 10px; "><br /> <br /> <br /> </p> </body> </html>