当前位置：凯发k8官方网 > 前端技术 > html >内容正文

html

一天教会三岁表弟html，你值得拥有 -凯发k8官方网

发布时间：2024/10/14 html 47 豆豆

凯发k8官方网收集整理的这篇文章主要介绍了一天教会三岁表弟html，你值得拥有小编觉得挺不错的,现在分享给大家,帮大家做个参考.

目录:
1.html基本骨架
2.head内部的可放标签
3.文本所用标签
4.列表标签
5.表格标签
6.表单标签
7.导入图片和超链接
8.行内元素和块元素
9. 特殊符号在网页中的转换和注释
10.框架

<!doctype html> <html><head><meta charset="utf-8"><title></title></head><body></body> </html>

对于骨架各部分的概述

骨架部分概述

	是一个文档声明，表示这是一个html页面，也表示表示网页是按照html5标准编写的
	是最根本的标签表示整个网页，是一个双标签
	网页的头部里边是一些网页的配置除了title标签其余都不可见，是一对双标签，标签内容是帮浏览器解析页面的
	里边是一个网页使用的字符集
	表示网页的标题
	用户所能看到的内容区域

有时候我们会在html这个标签里边，看到一条属性：

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有序列表

比如我们使用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定义列表

举个例子

注意：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	提交地址

这里的提交方式指指表单元素使用哪一种http提交方式，method的属性值有两个，一个是get一个是post

提交地址用于指定表单数据提交到哪一个地址处理

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，有两种写法都会默认的勾选女：

<input type="radio" name="a" value="女" checked />女<input type="radio" name="a" value="女" checked="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值,这样就可以实现页面内的跳转

比如：

1.块元素：独占一行的元素，不管有多少内容，都会独占一行
2.行内元素：只占自身大小，不会占一行

常见的块元素：

块元素说明

h1~h6	标题元素
p	段落元素
div	div无特殊含有，与网页布局有关
hr	水平线
ol	有序列表
ul	无序列表

块元素的特点：

块元素独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行；
块元素内部可以容纳其他块元素和行内元素

行内元素：
常见行内元素:

行内元素说明

strong	粗体元素
em	斜体元素
a	超链接
span	常用行内元素，结合css定义样式

9.1特殊符号在网页中的转换

特殊符号代码

>	>
<	⁢
&	&
空格

9.2注释

第一种：
第二种：ctrl /

框架的意思是从页面里边再嵌套页面

格式及说明：

我们举个例子：

总结

以上是凯发k8官方网为你收集整理的一天教会三岁表弟html，你值得拥有的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。