HTML(HyperText Markup Language)超文本标记语言——标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。
W3Cschool提供了完整的各种标签的介绍,详细可以看这里HTML 参考手册,所以这里我们只介绍常用的标签。
下面是一个简单的网页,基本所有的常用标签都有使用,大家在实践中体会吧。
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>网页标题</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!--gb2312--> <meta name="keywords" content="英文逗号隔开" /> <meta name="description" content="英文逗号隔开" /> <link rel="stylesheet" type="text/css" href="相对地址或URL"> <script type='text/javascript' src='相对地址或URL'></script> </head> <body> <p>标题标签</p> <h1>标题一(h1)</h1> <h2>标题二(h2)</h2> <h3>标题三(h3)</h3> <hr /> <P> <p>p是段落标签</p> <br> <em>em是斜体</em> <br> <strong>strong是粗体标签</strong> <br> <span>span没有具体的样式,他的作用就是方便用户设置单独的样式用的</span> <br> <q>q标签从语议上表引用别人的话,表现为自动为内容添加双引</q> <br> <blockquote>长文本的引用 浏览器解析为缩进样式</blockquote> <br> <hr /> <!--分割线(水平横线)--> <br /> <!--回车符--> <!--空格符--> <a href=”” targrt=”_blank”></a> <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"> <address> 地址标签,默认样式为斜体+另起一行</address> <code> 单行代码 </code> </P> <h2>列表标签</h2> <p> <h3>无序列表</h3> <ul> <li>无序列表第一行</li> <li>无序列表第二行</li> <li>无序列表第三行</li> <li>无序列表第四行</li> </ul> <h3>有序列表</h3> <ol> <li>有序列表第一行</li> <li>有序列表第二行</li> <li>有序列表第三行</li> <li>有序列表第四行</li> </ol> </p> <hr /> <h2>表格标签</h2> <table> <caption>表格标题标签</caption> <tr> <th>姓名</th> <th>性别</th> <th>学号</th> <th>星座</th> </tr> <tr> <td>张三</td> <td>男</td> <td>B150</td> <td>摩羯</td> </tr> <tr> <td>李四</td> <td>男</td> <td>B150</td> <td>水瓶</td> </tr> <tr> <td>王二</td> <td>女</td> <td>B150</td> <td>处女</td> </tr> </table> <hr /> <h2>表单标签</h2> <form method="post" action="user.php"> <!--method="传送方式(post/get)" action="服务器文件"--> <h3>文本输入框</h3> <label>用户名:</label> <input type="text" name="username" value="请输入用户名" /> <h3>密码输入框</h3> <label>密码:</label> <input type="password" name="password" value="" /> <h3>文本域输入框</h3> <textarea cols="50" rows="10">请输入内容</textarea> <h3>单选</h3> <label>性别:</label> <input type="radio" name="性别" value="1" checked="checked">和尚</input> <input type="radio" name="性别" value="0" >尼姑</input> <input type="radio" name="性别" value="2" >人妖</input> <input type="radio" name="性别" value="3" >太监</input> <h3>复选</h3> <label>爱好:</label> <input type="checkbox" name="爱好" value="0">吹牛</input> <input type="checkbox" name="爱好" value="1">瞎BB</input> <input type="checkbox" name="爱好" value="2">乱放屁</input> <input type="checkbox" name="爱好" value="3">打撸</input> <input type="checkbox" name="爱好" value="4">吃</input> <h3>人性化单/复选</h3> <input type="radio" name="性别" id="1"> <label for="1">和尚</label> <!--当点击label对应的文本时即会自动跳转到for里面对应的控件id里去--> <input type="radio" name="性别" id="2"> <label for="2">尼姑</label> <input type="radio" name="性别" id="3"> <label for="3">人妖</label> <input type="radio" name="性别" id="4"> <label for="4">太监</label> <h3>下拉选择框</h3> <label>爱好:</label> <select> <!--multiple="multiple" size="x"多选,最多选x项--> <option value="0" select="selected">逛淘宝</option> <option value="1">逛京东</option> <option value="2">逛唯品会</option> <option value="3">逛天猫</option> </select> <h3>提交按钮</h3> <input type="submit" value="提交" name="submitBtn" /> <h3>重置按钮</h3> <input type="reset" value="重置"> </form> <hr /> </body> </html>
Comments | NOTHING