第二阶段0831-使用HTML制作网页

最新推荐文章于 2024-09-25 11:34:48 发布

ShanHai山海

最新推荐文章于 2024-09-25 11:34:48 发布

阅读量197

点赞数 2

分类专栏： JavaWeb 文章标签： html html5 css

本文链接：https://blog.csdn.net/qq_44787933/article/details/120021504

版权

JavaWeb 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

本文介绍了HTML的基础知识，包括HTML的用途、W3C标准、基本结构以及如何设置页面编码。详细讲解了HTML中的图像、超链接、列表、表单和表格的使用方法，同时提及了框架结构和iframe标签的应用。通过实例展示了如何创建和控制表单元素，以及如何使用表格进行数据展示。此外，还提到了图像和超链接的属性，如alt和title，以及列表的不同类型。

摘要由CSDN通过智能技术生成

HTML

HTML
Hyper Text MarkupLanguage（超文本标记语言）。
超文本包括：文字、图片、音频、视频、动漫等
W3C标准
*World Wide Web Consortium（万维网联盟）
*成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
*W3C标准包括:
结构化标准语言（XHTML 、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript ）
HTML基本结构

<html >
	<head> 
		<title>网页标题</title>
	</head> 
	<body> 网页内容 <hr/>
	</body>
</html>

1、等成对出现，分别叫开放标签和闭合标签
2、单独呈现的标签（空元素），如hr/，意为/关闭空元素
页面规范声明
DOCTYPE声明（告诉浏览器使用什么规范）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<head > 
	<meta http-equiv="Content-ype"content="text/html; charset=utf-8" /> <title>标题</title> 
</head> 
<body> 网页内容 </body> 
</html>

页面编码设置
meta标签 - 用于定义文件信息

给标签设置不同属性，具备不同功能：

<meta http-equiv="Content-Type" content="text/html; charset= utf-8 " />

在这里插入图片描述

常见的图像格式

<img src="image/hetao.jpg" width="160" height="160" alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/>

src:图像（绝对路径&相对路径）
title:鼠标悬停提示文字
alt：加载失败图像的替代文字

超链接标签

<a href="path" target="目标窗口位置" > 链接文本或图像 </a>

href:链接路径
target:连接在哪个窗口打开，常用值： _self、_blank
锚链接
*锚链接
从A页面的甲位置跳转到本页中的乙位置(同一页面)
从A页面的甲位置跳转到B页面中的乙位置(两个页面)
*创建步骤
创建跳转标记：

<a name="marker">乙位置</a>

创建跳转链接：

<a href="#marker">甲位置</a>

HTML列表

1、无序列表：

<ul > 
	<li>列表项内容一</li> 
	<li>列表项内容x</li> 
	<li>列表项内容最后一项 </li> 
</ul>

没有顺序符号，每个li标签独占一行
默认li标签项前有实心小圆点
一般用于无序类型的列表，如导航，侧边栏新闻列表等
2、有序列表

<ol>
	<li>列表项内容一</li> 
	<li>列表项内容x</li> 
	<li>列表项内容最后一项</li> 
</ol>

有顺序符号，每个li标签独占一行
默认li标签项前有顺序标记
可通过修改ol标签的type属性值(a,A等)更改
一般用于排序类型的列表，如试卷，问卷选项等
3、定义列表

<dl>
	<dt>咖啡</dt> 
	<dd>黑色的热饮料</dd> 
	<dt>Milk</dt> 
	<dd>白色的冷饮料</dd> 
</dl>

没有顺序符号,每个dtdd标签独占一行
默认没有标记
表单
单行文本框 (text)
单选按钮 (radio)
复选框 (checkbox)
下拉列表 (select)
重置按钮 (reset)
提交按钮 (submit)

表单基本结构–标签

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

action属性：如果为空则代表向当前页面提交 method属性：可选值 post | get get方法提交参数在地址栏可见 post方法一般用于多数据、保密数据提交
表单基本元素-input标签

<input name="表单元素名称" type="类型" value="值" size="显示 宽度" maxlength=“最大长度" checked="是否选中" />

type属性：可选值 text（默认）、password、button、checkbox、 radio等 checked属性：仅与input type="checkbox"或input type="radio"配合使用，选中值为 checked
各类表单元素
在这里插入图片描述
只读属性：
readonly：希望某个框内的内容只允许用户看，不能修改
禁用属性：
disabled：因没达到使用的条件，限制用户使用

<input type="text" name="" value="123" readonly="readonly"/> 
<input type="button" name="" value="点击" disabled="disabled"/>

表格

<table width="100%" border="1" cellspacing="0" cellpadding="0" bgcolor="gray">

<tr>
	<td align="center">第1个单元格的内容 </td> 					   				
	<td>第2个单元格的内容</td> 
	...... 
</tr>
<tr>
	<td>第1个单元格的内容</td> 
	<td>第2个单元格的内容</td> ...... 
</tr> 
</table>

表格常用属性
在这里插入图片描述表格标题caption
表头th
页眉thead
数据主题tbody
页脚tfoot>
表格的跨行与跨列
跨列:
td标签的 colspan 属性，值为数字，代表合并几列
跨行:
td标签的 rowspan 属性，值为数字，代表合并几行
框架结构
iframe标签
作用：创建文档的内联框架
属性：
src ( 需引入的文档路径 )
width/height ( 设定框架的宽与高)
scrolling (是否显示滚动条，auto | yes | no)
frameborder( 是否要边框，1 显示，0 不显示)
name ( 内联框架的名称)