资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

html的基本结构是什么-创新互联

这篇文章将为大家详细讲解有关html的基本结构是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联是专业的包河网站建设公司,包河接单;提供成都做网站、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行包河网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

每一个HTML文件都是有自己固定的结构的,每一个文件的基本结构又都包含有三个标记:HTML文件标记;HEAD文件头部标记;BODY文件主体标记;接下来我们就来具体看一下HTML基本结构的代码。

基本结构代码:

1 
2     ...
3     ...
4 

代码讲解:

1. 称为根标签,所有的网页标签都在中。

2. 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有、<script>、 <style>、<link>、 <meta>等标签,头部标签在下一小节中会有详细介绍。</p><p>3. <body></body>标签之间的内容是网页的主要内容,如<h2>、<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><pre><table> <tbody> <tr> <th>班级</th> <th>学生数</th> <th>平均成绩</th> </tr> <tr> <td>一班</td> <td>30</td> <td>89</td> </tr> </tbody> </table></pre><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="/upload/otherpic39/8724.jpg" alt="html的基本结构是什么"></p><p><img src="/upload/otherpic39/8725.jpg" alt="html的基本结构是什么">如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。</p><p>27.<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">:为网页插入图片</p><p>28.表单标签:表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。</p><pre><form method="传送方式" action="服务器文件"></pre><pre><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>表单标签


29.输入大段内容:(文本域)

cols = "行数"

rows = "列数"





文本域


输出:

html的基本结构是什么

30.单选/复选框

1、type:

当 type="radio" 时,控件为单选框

当 type="checkbox" 时,控件为复选框

2、value:提交数据到服务器的值(后台程序PHP使用)

3、name:为控件命名,以备后台程序 ASP、PHP 使用

4、checked:当设置 checked="checked" 时,该选项被默认选中

(同一组的单选按钮,name 取值一定要一致,这样同一组的单选按钮才可以起到单选的作用。)





单选框、复选框


31.下拉框表





下拉列表框


输出:

html的基本结构是什么

下拉框列表

selected = "selected":默认选中

32.下拉框表支持复选:multiple = "multiple"

输出:

html的基本结构是什么

(在 windows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项)

33.提交按钮





提交按钮


34.重置按钮

在33中把type的值改为reset.

35.form表单中的label标签

label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用     户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。

注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。





form中的lable标签

 





你对什么运动感兴趣:


输出:

html的基本结构是什么

关于html的基本结构是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


分享名称:html的基本结构是什么-创新互联
标题URL:http://cdkjz.cn/article/cdhjos.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220