跨行合并居中html标记语言,html

html是网页骨架，是结构，是网页必须的一部分，很重要。

##什么是网页：

1.网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

2.网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。

###网页的组成：

1.网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。

###什么是HTML：

1.HTML指的是超文本标记语言(HyperTextMarkupLanguage)，它是用来描述网页的一种语言。

2.HTML不是一种编程语言，而是一种标记语言(markuplanguage)。标记语言是一套标记标签(markuptag)。

###网页的总结：

1.网页是图片、链接、文字、声音、视频等元素组成,其实就是一个html文件(后缀名为html)

2.网页生成制作:有前端人员书写HTML文件,然后浏览器打开,就能看到了网页.

3.HTML:超文本标记语言,用来制作网页的一门语言.有标签组成的.比如图片标签链接标签视频标签等…

###浏览器：**常用的浏览器**

谷歌(chrome)，火狐(firefox)，Safari和Opera，还有IE。

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。

###为什么需要Web标准：

主要包括《结构Structure》、《表现(Presentation)》和《行为(Behavior)》三个方面。

Web标准提出的最佳体验方案：**结构、样式、行为相分离**。

简单理解：**结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中

1.结构类似身体

2.表现类似外观装饰

3.行为类似行为动作HTML标签通常是成对出现的，例如和，我们称为**双标签**，标签对中的第一个标签是开始标签，第二个标签是结束标签。有些特殊的标签必须是单个标签(极少情况)，例如
，我们称为**单标签**。

双标签关系可以分为两类：包含关系和并列关系###基本结构标签：

编辑器可以按！直接生成网页所需头部

**标题标签

---

(重要)

**为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题，即

-

。

标题标签

标题标签

标题标签

标题标签

标题标签

标题标签

###段落标签：

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，

标签用于定义段落，它可以将整个网页分为若干个段落。具体实现：

我是一个段落标签

​特点：

1.文本在一个段落中会根据浏览器窗口的大小自动换行。

2.段落和段落之间保有空隙。###换行标签在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签
。

具体实现：

特点：

1.
是个单标签。

2.
标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。###文本格式化标签：在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

加粗  加粗

倾斜  倾斜

下划线  下划线

删除线  删除线

###div和span标签

和 是没有语义的，它们就是一个盒子，用来装内容的。

具体实现：

这是头部

今日价格

特点：

1.

标签用来布局，但是现在一行只能放一个

。大盒子

2.标签用来布局，一行上可以多个。小盒子

###图片标签：

在HTML标签中，标签用于定义HTML页面中的图像。

具体实现：

解释：

src是标签的必须属性，它用于指定图像文件的路径和文件名。

###链接标签：

链接的语法格式

文本或图像

属性：

1.href：用于指定链接目标的url地址

2.target:用于指定链接页面的打开方式_self默认值_blank新窗口打开

3.#：空链接

链接分类：

1.外部链接:例如百度>。

2.内部链接:网站内部页面之间的相互链接.直接链接内部页面名称即可，例如首页。

3.空链接:如果当时没有确定链接目标时，首页。

4.下载链接:如果href里面地址是一个文件或者压缩包，会下载这个文件。

5.网页元素链接:在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.

6.锚点链接:点我们点击链接,可以快速定位到页面中的某个位置.

###注释

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

HTML中的注释以“”结束。

具体实现：

快捷键:ctrl+/

重点记住：空格 &nbsp &ensp、大于号>&gt、小于号

##表格

###表格的主要作用

1.表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理

3.表格的具体用法：

​

​

​

单元格内的文字

​...

​

​...

​

​1.

是用于定义表格的标签。

​2.

标签用于定义表格中的行，必须嵌套在标签中。

​3.

用于定义表格中的单元格，必须嵌套在标签中。

​4.字母td指表格数据(tabledata)，即数据单元格的内容。

###表头单元格标签：

表头标签的具体实现：

姓名

...

...

1.一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.

标签表示HTML表格的表头部分(tablehead的缩写)

2.一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.

标签表示HTML表格的表头部分(tablehead的缩写)

5.表头单元格也是单元格，常用于表格第一行突出重要性，表头单元格里面的文字会加粗居中

###表格属性：

1.表格标签这部分属性我们实际开发我们不常用，后面通过CSS来设置.

cellspacing="0"  去除默认双线

cellpadding="0"  内容与左边框的距离 也是左内边距

表头表头表头

单元格内容单元格内容单元格内容单元格内容单元格内容单元格内容单元格内容单元格内容单元格内容

合并单元格方式：**横跨列(colspan)纵跨行(rowspan)

**跨行合并**：rowspan="合并单元格的个数"

​最上侧单元格为目标单元格,写合并代码

**跨列合并**：colspan="合并单元格的个数"

​最左侧单元格为目标单元格,写合并代码

*合并单元格三步曲：**

先确定是跨行还是跨列合并。

找到目标单元格.写上合并方式=合并的单元格数量。

比如：

。

删除多余的单元格。

表头表头表头

单元格内容单元格内容单元格内容单元格内容单元格内容单元格内容单元格内容

`

• `标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用
• 标签定义。无序列表的基本语法格式如下：
  • 列表项1
  • 列表项2
  • 列表项3...

  1.无序列表的各个列表项之间没有顺序级别之分，是并列的。

  2.

• ，直接在

  3.

• 与之间相当于一个容器，可以容纳所有元素。

4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

案例：

• 无序列表
• 无序列表
• 无序列表
• 无序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。在HTML标签中，

1. 标签用于定义有序列表，列表排序以数字来显示，并且使用
2. 标签来定义列表项。有序列表的基本语法格式如下：
   1. 列表项1
   2. 列表项2
   3. 列表项3...

   1.

   中只能嵌套
3. ，直接在标签中输入其他标签或者文字的做法是不被允许的。

   2.

4. 与之间相当于一个容器，可以容纳所有元素。

3.有序列表会带有自己样式属性，但在实际使用时，我们会使用CSS来设置。

1. 有序列表
2. 有序列表
3. 有序列表
4. 有序列表
5. 有序列表

自定义列表的使用场景:自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。在HTML标签中，

(定义项目/名字)和

(描述每一个项目/名字)一起使用。语法如下：

名词1

名词1解释1

名词1解释2

###为什么需要表单：

使用表单目的是为了收集用户信息。

在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

###表单的组成：

在HTML中，一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分构成。

###表单域：

表单域是一个包含表单元素的区域。

在HTML标签中，

标签用于定义表单域，以实现用户信息的收集和传递。会把它范围内的表单元素信息提交给服务器.

实现代码：

各种表单元素控件

表单控件元素必须写在

里面才能生效

输入框：

密码框：

提交按钮：

普通按钮：

单选按钮：(单选的文本要用label包起来for="input的id"input必须有id---这步是为了点击文本也能实现选中

多个单选控件input必须要有相同的name-----这一步name如果不同，那么就无法实现单选效果，

如果想默认选中某个选项就给某个选项的控件里面写上checked)

男

女

多选：(如果想默认选中某个选项就给某个选项的控件里面写上checked)

辣椒

茄子

黄瓜

下拉列表：(如果想默认选中某个选项就给某个选项的控件里面写上selected默认选中第一个选项)

中国

德国

美国

韩国

文本域：(cols相当于文本框的宽度rows相当于高度去除默认拉伸resize="none")

文件域：(若要实现文件多选就给控件加上mutiple)

案例：

​

​

男

女

辣椒

茄子

黄瓜

​

北京

北京

​

​

搜索框搜索跳到百度直接搜出结果：

搜索框怎么写：(input和按钮都加上浮动然后各自设置宽高在微调)

搜搜