每一个HTML文件都是有自己固定的结构的,每一个文件的基本结构又都包含有三个标记:HTML文件标记;HEAD文件头部标记;BODY文件主体标记;接下来我们就来具体看一下HTML基本结构的代码。 基本结构代码: 1 2 ... 3 ... 4 登入後複製 代码讲解: 1. 称为根标签,所有的网页标签都在中。 2. 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有、、 <style>、<link>、 <meta>等标签,头部标签在下一小节中会有详细介绍。</p> <p>3. <body></body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。</p> <p>4.<p></p>是文章的段落标签</p> <p>5.<hx></hx>表示文章标题(x表示数字,为文章标题等级1-6)</p> <p>6.<em></em>表示斜体</p> <p>7.<strong></strong>表示加粗</p> <p>8.<style></p> <p> span{</p> <p> 在这里配置样式,比如文字大小,颜色等</p> <p> }</p> <p> </style></p> <p> <span></span>设置单独样式</p> <p>9.<q></q>引用,会自动加上双引号</p> <p>10.<blockquote></blockquote>缩进</p> <p>11.<br />换行</p> <p>12. 输入空格</p> <p>13.<hr/>添加水平横线</p> <p>14.<address></address>输入地址信息(默认以 斜体表示)</p> <p>15.<code></code>代码标签</p> <p>16.<pre></pre>大段代码标签</p> <p>17.无序列表</p> <p><ul></p> <p> <li>内容</li></p> <p> <li>内容</li></p> <p> <li>内容</li></p> <p></ul></p> <p>18.有序列表(列表会自动加上序号)</p> <p> <ol></p> <p> <li>内容</li></p> <p> <li>内容</li></p> <p> <li>内容</li></p> <p> </ol></p> <p>19.<div>…</div>:划分区域(独立逻辑)</p> <p>20.<div id="版块名称">…</div>:划分板块并给板块命名</p> <p>21.表格展示(没有框线)</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><table> <tbody> <tr> <th>班级</th> <th>学生数</th> <th>平均成绩</th> </tr> <tr> <td>一班</td> <td>30</td> <td>89</td> </tr> </tbody> </table></pre><div class="contentsignin">登入後複製</div></div><p>22.<table summary = "内容"></table>为表格添加摘要</p><p>23.<caption></caption>为表格添加标题</p><p>24.<a href = "网址" title = "提示">..</a>加入网页链接(在当前页面打开)</p><p>25.<a href="目标网址" target="_blank">..</a>加入网页链接(新建页面)</p><p>26.在网页中链接Email地址</p><p><img src="https://img.php.cn/upload/article/000/000/009/3f42f799e2cf172b3f4e7947790376aa-0.png" alt="" style="max-width:90%" style="max-width:90%"/></p><p><img src="http://www.php.cn/static/ueditor/themes/default/images/spacer.gif"/ alt="如何來簡述html的基本結構(附程式碼)" >如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。</p><p>27.<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">:为网页插入图片</p><p>28.表单标签:表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><form method="传送方式" action="服务器文件"></pre><div class="contentsignin">登入後複製</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>表单标签</title> </head> <body> <form method="post" action="save.php"> <label for="username">用户名:</label> <input type="text" name="username" id="username" value="" /> <br/> <label for="pass">密 码:</label> <input type="password" name="pass" id="pass" value="" /> <input type="submit" value="确定" name="submit" /> <input type="reset" value="重置" name="reset" /> </form> </body> </html></pre><div class="contentsignin">登入後複製</div></div><p>输出:</p><p style="margin-left: 60px;"> <img src="https://img.php.cn/upload/article/000/000/009/3f42f799e2cf172b3f4e7947790376aa-3.png" alt=""/></p><p>29.输入大段内容:(文本域)<textarea cols = "50" rows = "10">..</textarea> </p><p> cols = "行数"</p><p> rows = "列数"</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>文本域</title> </head> <body> <form action="save.php" method="post" > <label>个人简介:</label> <textarea cols = "50" rows = "10">在这里输入内容...</textarea> <input type="submit" value="确定" name="submit" /> <input type="reset" value="重置" name="reset" /> </form> </body> </html></pre><div class="contentsignin">登入後複製</div></div><p>输出:</p><p style="margin-left: 60px;"> <img src="https://img.php.cn/upload/article/000/000/009/3f42f799e2cf172b3f4e7947790376aa-5.png" alt=""/> </p><p>30.单选/复选框</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><input type="radio/checkbox" value="值" name="名称" checked="checked"/></pre><div class="contentsignin">登入後複製</div></div><p style="max-width:90%">1、type:</p><p style="margin-left: 30px;"> 当 type="radio" 时,控件为单选框</p><p style="margin-left: 30px;"> 当 type="checkbox" 时,控件为复选框</p><p style="margin-left: 30px;">2、value:提交数据到服务器的值(后台程序PHP使用)</p><p style="margin-left: 30px;">3、name:为控件命名,以备后台程序 ASP、PHP 使用</p><p style="margin-left: 30px;">4、checked:当设置 checked="checked" 时,该选项被默认选中</p><p style="margin-left: 30px;"> (同一组的单选按钮,name 取值一定要一致,这样同一组的单选按钮才可以起到单选的作用。)</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>单选框、复选框</title> </head> <body> <form action="save.php" method="post" > <label>性别:</label> <label>男</label> <input type="radio" value="1" name="gender" /> <label>女</label> <input type="radio" value="2" name="gender" /> </form> </body> </html></pre><div class="contentsignin">登入後複製</div></div><p>输出:</p><p style="margin-left: 60px;"> <img src="https://img.php.cn/upload/article/000/000/009/07a35cd20dd5ec48da40602e9c95af0b-7.png" alt=""/></p><p>31.下拉框表<select>..</select></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>下拉列表框</title> </head> <body> <form action="save.php" method="post" > <label>爱好:</label> <select> <option value="看书">看书</option> <option value="旅游" selected = "selected">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select> </form> </body> </html></pre><div class="contentsignin">登入後複製</div></div><p>输出:<br/></p><p style="margin-left: 60px;"><img src="https://img.php.cn/upload/article/000/000/009/07a35cd20dd5ec48da40602e9c95af0b-8.png" alt=""/></p><p style="max-width:90%"><select>..</select>下拉框列表</p><p style="margin-left: 30px;">selected = "selected":默认选中</p><p>32.下拉框表支持复选:multiple = "multiple"</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><select multiple = "multiple">..<select></pre><div class="contentsignin">登入後複製</div></div><p>输出:</p><p style="margin-left: 60px;"><img src="https://img.php.cn/upload/article/000/000/009/07a35cd20dd5ec48da40602e9c95af0b-10.png" alt=""/></p><p>(在 windows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项)</p><p>33.提交按钮</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>提交按钮</title> </head> <body> <form method="post" action="save.php"> <label for="myName">姓名:</label> <input type="text" value=" " name="myName " /> <input type="submit" value="提交" name="submitBtn" /> </form> </body> </html></pre><div class="contentsignin">登入後複製</div></div><p>输出:</p><p style="margin-left: 60px;"> <img src="https://img.php.cn/upload/article/000/000/009/07a35cd20dd5ec48da40602e9c95af0b-13.png" alt=""/> </p><p>34.重置按钮</p><p> 在33中把type的值改为reset.</p><p>35.form表单中的label标签</p><p> label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用 户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><label for="控件id名称"></pre><div class="contentsignin">登入後複製</div></div><p> 注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>form中的lable标签</title> </head> <body> <form> <label for="male">男</label> <input type="radio" name="gender" id="male" /> <br /> <label for="female">女</label> <input type="radio" name="gender" id="female" /> <br /> <label for="email">输入你的邮箱地址</label> <input type="email" id="email" placeholder="Enter email"> <br/><br/> 你对什么运动感兴趣:<br /> <label for="jog">慢跑</label> <input type="checkbox" name="jog" id="jog" /><br /> <label for="climb">登山</label> <input type="checkbox" name="climb" id="climb" /><br /> <label for="basketball">篮球</label> <input type="checkbox" name="basketball" id="basketball" /> </form> </body> </html></pre><div class="contentsignin">登入後複製</div></div><p>输出:</p> <p style="margin-left: 60px;"><img src="https://img.php.cn/upload/article/000/000/009/07a35cd20dd5ec48da40602e9c95af0b-14.png" alt=""></p> <p> 相关推荐:</p> <p><a href="http://www.php.cn/div-tutorial-385334.html" target="_self">HTML的基本结构有哪些</a></p> <p><a href="http://www.php.cn/div-tutorial-358568.html" target="_self">HTML基本结构介绍</a></p>