HTML 5入门—DAY1：HT ML 基础
<!docty PE html> <html> <head> < ;m eta charset="utf-8"> <t IT le>DAY1：HTML基础</title> <style> *{ m arg in:0; padding:0;} body{ padding: 30px; padding -t op:10px; line-h ei ght: 35px; font-f ami ly: " 微软雅黑 ";} h1 ,h2{padding: 20px 0;} h3{ background: # 00AA88; color: #FF fc F4; font- Size: 20px; font-weight : 700; mar gin : 10px 0; border-radius: 4px; padding: 5px 0px 5px 15px;} p{ line-height: 40px;} ul li{ list -s tyle: none;line-height: 40px;} span{ color: #199475; font-weight: 700; font-size:18px; dis play : 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;} .mar BT om{ 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> LOG O</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 n am e="表单名称" 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="s ub mit" 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> &nbs p;
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: #FFF CF 4; 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>
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML5入门―DAY1：HTML基础 全部内容，希望文章能够帮你解决 html5教程-HTML5入门―DAY1：HTML基础 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML5入门―DAY1：HTML基础的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did219356