博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html文件基本结构
阅读量:6656 次
发布时间:2019-06-25

本文共 3475 字,大约阅读时间需要 11 分钟。

以下内容整理于慕课网:http://www.imooc.com/learn/9
 
一个HTML文件是有自己固定的结构的。
1 2     ...3     ...4 
代码讲解:
 
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.
&nbsp;输入空格
 
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.表格展示(没有框线)
1 
2
3
4
5
6
7
8 9
10
11
12
13
14
15
班级 学生数 平均成绩
一班 30 89
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.表单标签:表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
1  2  3  4 
5 表单标签 6 7 8
9
10
11 12
13 14
15
16 17
18
19
20 21
输出:
 
 
 
29.输入大段内容:(文本域)
<textarea cols = "50" rows = "10">..</textarea> 
    cols = "行数"
    rows = "列数"
1  2  3  4 
5 文本域 6 7 8
9
10
11
12
13
14 15
输出:
 
 
 
30.单选/复选框
1、type:
        当 type="radio" 时,控件为单选框
        当 type="checkbox" 时,控件为复选框
2、value:提交数据到服务器的值(后台程序PHP使用)
3、name:为控件命名,以备后台程序 ASP、PHP 使用
4、checked:当设置 checked="checked" 时,该选项被默认选中
  (同一组的单选按钮,name 取值一定要一致,这样同一组的单选按钮才可以起到单选的作用。)
1  2  3  4 
5 单选框、复选框 6 7 8
9
10
11
12
13
14
15 16
输出:
 

 

31.下拉框表<select>..</select>
1  2  3  4 
5 下拉列表框 6 7 8
9
10
16
17 18
输出:
<select>..</select>下拉框列表
selected = "selected":默认选中
 
 
32.下拉框表支持复选:multiple = "multiple"
输出:

 

(在 windows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项)
 
 
33.提交按钮
1  2  3  4 
5 提交按钮 6 7 8
9
10
11
12
13 14
输出:
 
 
 
 
34.重置按钮
     在33中把type的值改为reset.
 
 
35.form表单中的label标签
          label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用     户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
  注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
1  2  3  4 
5 form中的lable标签 6 7 8 9
10
11
12
13
14
15
16
17
18 19
20 21 你对什么运动感兴趣:
22
23
24
25
26
27
28 29
30 31 32
输出:
 

转载于:https://www.cnblogs.com/Arsene/p/6661253.html

你可能感兴趣的文章
evt dvt pvt mp代表什么阶段_什么是人设:抖音IP人设的商业价值你知道吗?
查看>>
天锋w2019_不知道为什么那么多人喜欢三星W2019,直到入手这款天锋W2019手机
查看>>
pcm输出还是源码输出_日本成辣条最大进口国?网友:文化输出还是得靠卫龙
查看>>
进栈顺序为abcd则出栈顺序为_矫正做题顺序,搞定行测高分
查看>>
为什么me域名不能备案_注册域名后要做解析吗?怎么操作?
查看>>
一秒钟世界上会发生多少事_这一秒钟,却不止一秒钟
查看>>
typescript的基本结构_Vue 3.0前的 TypeScript 最佳入门实践
查看>>
tp5指向public_TP5和VUE同域名, 宝塔二级域名配置
查看>>
git pull 是到工作区还是暂存区_打好地基Git学习
查看>>
win10删除多余账户_【凡凡经验05】win10进入安全模式的三种方法
查看>>
命令及串口命令_单片机很好玩5,花三分钟,学会使用电脑发送“命令”控制单片机...
查看>>
里写注释 postman_5步学完spring boot单元测试,与postman有什么优点?
查看>>
提取一行数据列表_实例30_一键往Word文档的表格中填写数据
查看>>
例子 write_浅谈关于Linux内核write系统调用操作的原子性
查看>>
5传递参数丢失_为什么阿里巴巴不建议使用Intent传递大的数据
查看>>
顶部有一道线_蓄势待发!揭开S1线永中站的神秘面纱
查看>>
应用实例_一个栅格系统应用的实例分享
查看>>
程序怎么启动vasp_【你怎么看】两名游客故宫内抽烟还发视频炫耀 警方启动调查程序...
查看>>
12伏的蓄电池有几个单格组成_蓄电池的构造
查看>>
八段锦八个动作名称_八段锦自编口诀版,先收藏了再说
查看>>