html
一天教会三岁表弟html,你值得拥有 -凯发ag旗舰厅登录网址下载
目录:
1.html基本骨架
2.head内部的可放标签
3.文本所用标签
4.列表标签
5.表格标签
6.表单标签
7.导入图片和超链接
8.行内元素和块元素
9. 特殊符号在网页中的转换和注释
10.框架
对于骨架各部分的概述
骨架部分概述是一个文档声明,表示这是一个html页面,也表示表示网页是按照html5标准编写的 | |
是最根本的标签表示整个网页,是一个双标签 | |
网页的头部里边是一些网页的配置除了title标签其余都不可见,是一对双标签,标签内容是帮浏览器解析页面的 | |
里边是一个网页使用的字符集 | |
表示网页的标题 | |
用户所能看到的内容区域 |
有时候我们会在html这个标签里边,看到一条属性:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">xmlns是html的第一个属性是一个命名空间,规定不同用户在浏览器中标签语义遵循的统一标准,第二个属性就是lang代表所有的标签语言都是英文
2.1title标签
2.1meta标签
:单标签,一般用于定义页面的特殊信息,如页面关键字,页面描述等,提供给搜索引擎,告诉搜索引擎这个页面是做什么的
meta标签有两个属性:
1.name属性:常用取值只有2个:keywords、description,结合content一起用,属性keywords主要是网页的关键字,description则是对网页的描述
2.http-equiv属性:常用属性值content-type和refresh,结合content一起用,content-type是定义网页所用的编码
refresh是定义网页自动刷新跳转:
注意在html5中定义网页所用编码可以直接用:
2.2其他标签
:标签内写css的代码
2.3script标签
:标签内写javascript代码
2.3link标签
:导入css文件
3.1h标签
:分别对应六种标题1~6从大到小,h1标题所占权重最高最便利搜索引擎搜索,一个页面一般要有一个h1标签一般将这个标签给logn(能代表整个网页的图标)3.2p标签
:段落标签3.3两个单标签
:单标签,换行标签
:单标签,水平线标签
3.4文本标签(双标签)
标签名作用strong或者b | 粗体标签 |
i或者em或cite | 斜体标签 |
sup | 上标标签(比如5的平方,那么平方的2就可以使用sup修饰) |
sub | 下标标签(化学方程式用的较多) |
s | 中划线标签 |
u | 下划线标签 |
big | 大字号标签 |
small | 小字号标签 |
3.5div标签span标签
:可以在网页划分区域,可以用于网页的整体的布局,无特殊含义:没有特殊含义,代表小的范围,文本级标签,不能放容器级标签,通常和css连用
4.1有序列表
<ol><li></li><li></li><li></li><li></li></ol>比如我们使用a,b,c进行排序:
注意:ol标签和li标签需要配合使用,不能单独使用,而且ol的子标签只能是li标签
4.2无序列表
//可用ul>li*4这种快捷键生成如下代码 <ul><li></li><li></li><li></li><li></li> </ul>注意ul标签里边只能是li标签,文本不能直接放在ul标签内,而是放在标签内
4.3定义列表
<dl>//定义列表<dt>名词</dt>//定义标题<dd>描述</dd>//定义解释.... </dl>举个例子
注意:dt后边可以有多个dd对dt进行解释,dt后边也可以不跟dd也不会影响整体结构
5.1表格标签
标签作用table | 表格 |
tr | 代表行 |
td | 代表单元格 |
caption | 表格标题 |
th | 表头单元格 |
thead | 划分表头部分 |
tbody | 划分表身部分 |
tfoot | 表脚 |
行,单元格等都需要放在table标签里边,其实th和td在本质上都是单元格,但是浏览器会对th进行加粗居中,但是不会对td一居中加粗,后三个标签没有语义就是把表格分为三个部分,让表格的代码更具有可读性
例子:
table标签属性border:代表整个表格边框颜色的深度,0代表没有边框(默认是0),以后边框深度依次加深比如:
5.2合并单元格
标签作用rowspan | 合并行 |
colspan | 合并列 |
例子:
6.1form标签
我们把表单标签都放在form标签中
form标签属性
属性作用name | 表单的名字 |
method | 提交方式 |
action | 提交地址 |
6.2input标签
是一个单标签
关于input的type属性
6.3单行文本框
input属性值为text
从上边的介绍,我们可以看到,单行文本框的浏览器效果,我们还可以给单行文本框设置属性,常用的单行文本的属性为:
属性说明value | 设置单行文本框的默认值,也就是默认情况下单行文本框显示的内容 |
size | 设置单行文本框的长度 |
maxlength | 设置单行文本框最多可以输入的字符数 |
例子:
6.4密码文本框
input属性值为password
同样的我们可以为密码文本框设置属性
属性说明value | 设置密码文本框的默认值,也就是默认情况下密码文本框显示的文字 |
size | 设置密码文本框的长度 |
maxlength | 设置最大输入字符数 |
6.5单选框
input属性值为radio
我们单选框是必备两个属性的:
属性作用name | 表示单选框按钮所在的组名 |
value | 表示单选框的可取值 |
举个例子:
当name属性一样的时候,我们只能勾选一个,但是当name属性不一致的时候,那么就都可以勾选,所以name属性的一致性需要特别注意。还有一个缺点,那么就是只要我们不手动勾选,那么系统是不会默认勾选的,所以我们这里还有一个属性可以为我们默认勾选,那就是checked,有两种写法都会默认的勾选女:
6.6复选框
input属性值为checkbox
和单选框一致我们复选框也是三个属性的:
属性作用name | 表示单选框按钮所在的组名 |
value | 表示单选框的可取值 |
checked | 默认勾选 |
6.7按钮
input属性值分为三个button,submit,reset,分别表示普通按钮,提交按钮,重置按钮
和value属性搭配使用,value里边的内容就是按钮上的内容
按钮类型说明普通按钮 | 一般都是搭配js操作 |
提交按钮 | 给服务器提交数据 |
重置按钮 | 重置用户在表单输入的内容(重置按钮只能重置它所在的form标签) |
6.8多行文本框
多行文本框不是放在input标签里,他有自己的标签textarea
两个属性:
属性属性值row | 行数 |
cols | 列数 |
6.9下拉列表
同样的不需要input标签,是靠着select和option两个标签来完成的
1.关于select标签:
他有两种属性:
multiple | 设置下拉列表可以选择多项(无属性值) |
size | 设置下拉列表显示几个列表项,取值为整数 |
想要多选需要按住ctrl加鼠标左键
2.option标签:
两个属性:
selected | 是否选中(默认选中) |
value | 选项值(可以不加,他是和js配合使用) |
我们使用一下select属性:
可以看到默认的jquery被选中
6.10文件上传
input属性值为file
6.11综合:
7.1导入图片
:单标签
三个属性:
属性作用src | 指定图片路径,可以是相对和绝对路径 |
alt | 用于图片描述,这个描述是给搜索引擎看的,当我们的图片无法显示的时候,页面会显示alt属性的内容 |
title | 也是用于图片描述,不过是描述给用户看的,当我们鼠标移动到图片上的时候会显示title上的文字 |
7.2超链接
:实现页面的跳转,有两个属性,第一个是是herf,第二个是target
herf就不用多说了,关于target的属性值:
属性值作用_self | 在原来窗口打开链接(默认值) |
_blank | 在新的窗口打开链接 |
如果我们在一个项目下面有多个网页,同样也可以在这些网页之间实现相互跳转
7.3锚点跳转
这个比如博主写博客,点击博主的目录就会跳到本页面对应的位置,这个就叫做锚点跳转(跳转到本页面的指定位置)
h标签内有一个id属性可以设置一个id值,可以让a标签的属性href等于# id值,这样就可以实现页面内的跳转
比如:
<a href="#a1" >1.简介<a href="#a2" >2.说明 <h1 id="a1">1.简介</h1> <h1 id="a2">2.说明</h1>1.块元素:独占一行的元素,不管有多少内容,都会独占一行
2.行内元素:只占自身大小,不会占一行
常见的块元素:
块元素说明h1~h6 | 标题元素 |
p | 段落元素 |
div | div无特殊含有,与网页布局有关 |
hr | 水平线 |
ol | 有序列表 |
ul | 无序列表 |
块元素的特点:
- 块元素独占一行,排斥其他元素(包括块元素和行内元素)与其位于同一行;
- 块元素内部可以容纳其他块元素和行内元素
行内元素:
常见行内元素:
strong | 粗体元素 |
em | 斜体元素 |
a | 超链接 |
span | 常用行内元素,结合css定义样式 |
9.1特殊符号在网页中的转换
特殊符号代码> | > |
< | ⁢ |
& | & |
空格 |
9.2注释
第一种:
第二种:ctrl /
框架的意思是从页面里边再嵌套页面
格式及说明:
<iframe src="链接地址" width="数值" height="数值"></iframe>我们举个例子:
总结
以上是凯发ag旗舰厅登录网址下载为你收集整理的一天教会三岁表弟html,你值得拥有的全部内容,希望文章能够帮你解决所遇到的问题。
如果觉得凯发ag旗舰厅登录网址下载网站内容还不错,欢迎将凯发ag旗舰厅登录网址下载推荐给好友。
- 上一篇: 详解linux的压缩解压缩命令
- 下一篇: css基础汇总