html基础1

html基础1

1.什么情况下使用div标签，什么情况下使用span标签？

元素通常用于组织和分组页面上的内容。它是一个块级元素，用于创建一个独立的区域或容器，可以包含其他HTML元素。

可以用于创建整个网页布局、定义网页的不同部分或区域，例如页眉、页脚、导航栏等。可以给

元素添加类名或ID，以便对其进行样式化或JavaScript处理。

• 当需要创建一个独立的区域或容器来组织页面内容时，可以使用
  元素。

<div class="header">
  <h1>这是标题</h1>
  <p>这是段落文本</p>
</div>

元素通常用于对文本或行内元素进行分组或标记，是一个行内元素。它不会打断文本流，而是将内容包裹在内部。 常用于应用样式、处理文本或在特定部分添加标记等情况。

• 当需要对行内文本或行内元素进行特殊标记或样式化时，可以使用 元素。

<p>这是一段 <span class="highlight">高亮</span> 文本。</p>

2.绝对路径与相对路径

绝对路径

绝对路径以 Web 站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件 时，所使用的路径都是一样的D:\web\img\logo.gif ，或完整的网络地址 http://www.baidu.com/images/logo.gif 。

相对路径

以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同 一个文件时，所使用的路径将不相同，故称之为相对路径。

• 图像文件和 HTML 文件位于同一文件夹：只需输入图像文件的名称即可，如：

  <img src="logo.gif" />
  

• 图像文件位于 HTML 文件的下一级文件夹：输入文件夹名和文件名，之间用 / 隔开，如：

  <img src="img/logo.gif" />
  

• 图像文件位于 HTML 文件的上一级文件夹：在文件名之前加入 …/ ，如果是上两级，则需要使用 …/…/ ，以此类推，如：

  <img src="../logo.gif"/>
  

• 图像文件位于网站根目录：在文件名之前加入 / ，如：

<img src="../logo.png"/>

• / 开头：代表根目录； ./ 开头：代表当前所在的目录； …/ 开头：代表上一层目录。

3.图像标签img中的属性

• alt属性：为图片定义的可替换的文本，在浏览器加载图片失败时，alt内的文本显示

  如图：

  

• title属性：当鼠标移入图片的时候显示的文字内容；

  如图：

<img src="images/drink.jpg" alt="精品热卖：高清晰，30寸等离子电视" title="精品热卖：高清晰，30寸等离子电视" />

4.表格标签

4.1表格结构

在使用表格进行布局时，可以将表格划分为标题、头部、主体和脚注。相关标签如下：

• ：用于定义表格标题。****
• ：用于定义表格的头部。一般包含列名、行号等表头信息。
• ：用于定义表格的主体。一般包含数据内容。
• ：用于定义表格的脚注。

定义行和列的标签：

• ：用于定义表格的一行。
• ：用于定义表格的单元格。
• ：用于定义表头单元格。

4.2表格属性

属性名	含义	常用属性值	默认值
border	设置表的边框	像素值	0，无边框
cellspacing	设置单元格与单元格之间的空白间距	像素值	2px
cellpadding	设置单元格与单元格边框之间的空白间距	像素值	1px
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置表格在网页中的水平对齐方式

4.3合并单元格

跨行合并： rowspan ；跨列合并：colspan

合并的顺序：从上到下，自左到右

5.表单标签

5.1表单的用途

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

5.2 表单的组成

• 表单标签：这包含了处理表单数据所用的URL以及数据提交到服务器的方式。
• 表单域(表单控件)：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框 和文件上传框等。
• 表单按钮：包括提交按钮、复位(重置)按钮和一般按钮；用于将数据传送到服务器上或者取消输 入，还可以用表单按钮来控制其他定义了处理脚本的处理工作

5.3 form表单属性

<form action="表单提交地址" method="提交方法">
… 文本框、按钮等表单元素…
</form>

form表单属性：

• action 用于指定提交表单数据的请求URL。

• method 表单数据发送至服务器的方法,常用的有两种 get(默认)/post。

get和post的区别：

• get提交：用户输入的信息，显示在地址栏中，不安全，请求内容长度有限制，请求速度快。
• post提交：用户输入的信息，不会显示在地址栏，安全,请求内容长度无限制(重要数据)，请求速度 慢。

5.4表单输入控件

控件名称	type属性值	描述
文本框	text（默认值）	默认。定义一个单行的文本字段（默认宽度为20个字符）
密码框	password	定义密码字段
单选按钮	radio	定义单选按钮（性别等）
复选框	checkbox	定义复选框。（爱好等）
提交按钮	submit	定义提交按钮
重置按钮	reset	定义重置按钮（重复所有的表单值为默认值）
图片提交按钮	image	定义图像作为提交按钮
普通按钮	button	定义可点击的按钮（通常与JavaScript一起是用来启动脚本
隐藏文本框	hidden	定义隐藏输入字段。前后台交互非常有用
文件上传框	file	定义文件选择字段和"浏览……"按钮，供文件上传。可以通过accept属性规范选取文件的类型，比如图片/视频，如果不设置则什么类型都可以。accept属性的值: image/* 接受所有的图像文件。 image/png 表示只接 受图片文件的png文件 audio/* 接受所有的声音文件。 video/* 接受所 有的视频文件。 multiple属性可以用来设置一次允许选择多个文件 multiple=“multiple”

5.5其他表单控件

5.5.1 textarea ：定义文本域 (一个多行的输入控件)

文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

缩放设置：

• 禁止缩放：resize: none;
• 水平缩放：resize: horizontal;
• 垂直缩放：resize: vertical;
• 水平垂直缩放：resize: both;

5.5.2 label:定义了 input元素的标签，一般为输入标题

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

1. 方式一：

   for属性,让标签和指点的input元素建立关联,多数使用在单选或复选

   给单选或复选后面的文字加入label标签,for属性值是input的id值

2. 方式二：

   将input元素包含在lable标签中

   如果将input放置在label标签之间,那么for属性就可以不用

5.5.3 fieldest、legend (了解)

标签可以将表单内的相关元素分组。

标签会在相关表单元素周围绘制边框。 元素为 元素定义标题。

<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30"><br>
Email: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form

5.5.4 select、option

<select> 定义了下拉选项列表
<option> 定义下拉列表中的选项（一个条目）。
size属性用来定义列表中显示的列表项,在select标签设置
multiple属性用来定义是否可以多选

5.5.5 optgroup定义选项组

对列表项进行分组并命名,必须使用该标签的label属性才可以命名;

1、把对应的option标签放在optgroup里面

2、给optgroup添加label属性,用以列表组命名

5.6 表单元素属性

属性	值	描述
type	上述值	type 属性规定要显示的 元素的类型。
value	text	指定input 元素 value 的值。
src	URL	src 属性规定显示为提交按钮的图像的 URL。 (只针对 type=“image”)
size	number	size 属性规定以字符数计的input 元素的可见宽度。
readonly	readonly	readonly 属性规定输入字段是只读的。
name	text	name 属性规定 input 元素的名称。
maxlength	number	属性规定 input 元素中允许的最大字符数。
disabled	disabled	disabled 属性规定应该禁用的 input 元素。
checked	checked	checked 属性规定在页面加载时应该被预先选定的 input元素。 (只针对 type=“checkbox” 或者 type=“radio”)
accept	audio/video image/ MIME_type	规定通过文件上传来提交的文件的类型。 (只针对 type=“file”)
selected	selected	下拉框的默认选中

6.html内嵌框架

iframe语法：

<iframe src="URL"></iframe>

该URL指向不同的网页。

为什么用iframe：

• frameset需要使用多个文件，目录结构复杂；

• 内嵌较为灵活，可以在网页的任何位置使用；

• 可以作为模板，在本网站的多个页面复用；

iframe - 移除边框:

• frameborder 属性用于定义iframe表示是否显示边框。
• 设置属性值为 “0” 移除iframe的边框。

iframe - 框架命名:

• name：自定义框架名，规定iframe的名称