怎样来简述html的根本构造(附代码)
根本构造代码:
1 <html> 2 <head>...</head> 3 <body>...</body> 4 </html>
代码讲解:
1. <html></html>称为根标签,所有的网页标签都在<html></html>中。
2. <head></head>标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签,头部标签鄙人一小节中会有具体介绍。
3. <body></body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在阅读器中显示出来。
4.<p></p>是文章的段落标签
5.<hx></hx>表示文章标题(x表示数字,为文章标题等级1-6)
6.<em></em>表示歪体
7.<strong></strong>表示加粗
8.<style>
span{
在这里配置样式,比方文字大小,色彩等
}
</style>
<span></span>设定独自样式
9.<q></q>援用,会主动加上双引号
10.<blockquote></blockquote>缩进
11.<br />换行
12. 输入空格
13.<hr/>增加水平横线
14.<address></address>输入地址信息(默许以 歪体表示)
15.<code></code>代码标签
16.<pre></pre>大段代码标签
17.无序列表
<ul>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>
18.有序列表(列表会主动加上序号)
<ol>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ol>
19.<div>…</div>:划分区域(独立逻辑)
20.<div id="版块名称">…</div>:划分板块并给板块命名
21.表格展现(没有框线)
<table> <tbody> <tr> <th>班级</th> <th>学生数</th> <th>均匀结果</th> </tr> <tr> <td>一班</td> <td>30</td> <td>89</td> </tr> </tbody> </table>
22.<table summary = "内容"></table>为表格增加摘要
23.<caption></caption>为表格增加标题
24.<a href = "网址" title = "提醒">..</a>参加网页链接(在当前页面翻开)
25.<a href="目标网址" target="_blank">..</a>参加网页链接(创建页面)
26.在网页中链接Email地址
假如mailto后面同时有多个参数的话,第一个参数必需以“?”开头,后面的参数每一个都以“&”分隔。
27.<img src="图片地址" alt="下载失败时的更换文本" title = "提醒文本">:为网页插入图片
28.表单标签:表单是可以把阅读者输入的数据传送到效劳器端,这样效劳器端程序就可以处置表单传过来的数据。
<form method="传送方式" action="效劳器文件">
<!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>
输出:
29.输入大段内容:(文本域)<textarea cols = "50" rows = "10">..</textarea>
cols = "行数"
rows = "列数"
<!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>
输出:
30.单选/复选框
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type="radio" 时,控件为单选框
当 type="checkbox" 时,控件为复选框
2、value:提交数据到效劳器的值(后台程序PHP使用)
3、name:为控件命名,以备后台程序 ASP、PHP 使用
4、checked:当设定 checked="checked" 时,该选项被默许选中
(统一组的单选按钮,name 取值必然要一致,这样统一组的单选按钮才可以起到单选的作用。)
<!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>
输出:
31.下拉框表<select>..</select>
<!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>
输出:
<select>..</select>下拉框列表
selected = "selected":默许选中
32.下拉框表支撑复选:multiple = "multiple"
<select multiple = "multiple">..<select>
输出:
(在 windows 操纵系统下,停止多选时按下Ctrl键同时停止单击(在 Mac下使用 Command +单击),可以选中多个选项)
33.提交按钮
<!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>
输出:
34.重置按钮
在33中把type的值改为reset.
35.form表单中的label标签
label标签不会向会员显现任何非凡结果,它的作用是为鼠标会员改善了可用性。假如你在 label 标签内点击文本,就会触发此控件。就是说,当用 户单击选中该label标签时,阅读器就会主动将焦点转到和标签相关的表单控件上(就主动选中和该label标签相干系的表单控件上)。
<label for="控件id名称">
留意:标签的 for 属性中的值应当与相关控件的 id 属性值必然要雷同。
<!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>
输出:
相关引荐:
HTML的根本构造是什么
HTML根本构造介绍
以上就是怎样来简述html的根本构造(附代码)的具体内容,更多请关注百分百源码网其它相关文章!