HTML5入门—DAY1:HTML基础
来源:互联网 发布:nba2k17mc捏脸数据 编辑:程序博客网 时间:2024/06/05 12:27
<!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><div class="boxs"> <h1>DAY1:HTML基础</h1> <h2 class="borderbtm"> </h2> <div 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> </div> <h3>五、HTML常用标记</h3> <div 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> <div style="overflow:hidden"> <div style="float:left; height:220px; margin-right:30px; "> *无序列表<br> 无序列表组成:<br> <ul>(unordered list)<br> <li></li><br> <li></li><br> ......<br> </ul><br> </div> <div style="float:left; height:220px; margin-right:30px; "> *有序列表<br> 有序列表组成:<br> <ol>(ordered list)<br> <li></li><br> <li></li><br> ......<br> </ol><br> </div> <div 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> </div> </div> </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、div和span的用法</p> <blockquote class="textcon"> <p><div ></div></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> </div> </div><div 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 /></div></body></html>
阅读全文
0 0
- HTML5入门—DAY1:HTML基础
- Day1(移动开发基础-html5+css入门)
- HTML——基础DAY1
- HTML5基础——HTML入门
- 前端入门DAY1-html
- HTML5——Day1
- Html学习—Day1
- 前端小白入门day1 freecodecamp学习到的html和css基础
- Day1 html5
- 零基础学习 HTML Day1 Lession4
- 零基础学习 HTML Day1 Lession1
- Web前端攻城狮-Day1-HTML基础
- html5基础入门
- HTML5基础入门
- HTML5基础入门
- HTML5基础入门篇
- 基础day1
- HTML5基础篇之HTML
- 编译错误:Failed to save the updated manifest to the file ..........
- [opengl笔记]2017年8月17日
- 2017 Multi-University Training Contest
- C
- 配置NC65与安装UAP-STUDIO中遇到的问题总结
- HTML5入门—DAY1:HTML基础
- cs224n assignment 2 代码
- HDU 6143 Killer Names(容斥+组合)
- windows下搭建spark环境
- 物联网开发必知的8大安全关键技术
- 线程并发问题
- Linux(CentOS 6.5) 安装redis集群
- 字符串乘方(POJ NO.1408)
- 2017.8.7测试 题三 机器选择