粉阿吉整理(1)之------HTML-优快云博客

本文全面解析网页开发的基础知识，涵盖HTML、CSS和JavaScript的核心概念，深入探讨网页结构、表现和行为，详解常见标签和属性，包括标题、段落、列表、图片、链接、表格和表单等元素的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

趁着过年，整理库存！

1. 网页组成

组成	开发语言	web标准
结构（Structure）	HTML	XHTML和XML
表现（Pressentation）	CSS	CSS
行为（Behavior）	JS	对象模型（如W3C DOM）和ECMAScript

》开发语言介绍：
HTML : 超文本标记语言（HyperText Markup Language） ====》结构
CSS：层叠样式表（Cascading Style Sheets） ====》样式
JS：（JavaScript） ====》行为
》Html和XHtml最主要的不同：

XHTML必须被正确的嵌套
XHTML必须被正确的关闭
XHTML必须拥有根元素
标签名必须用小写字母

2. 结构

<!DOCTYPE html>   声明文档类型
<html>            根文件，表示要写的东西是html
<head>            头部信息
     <meta charset="utf-8">   编码格式
     <title></title>          提示信息（显示在标题栏）
</head>

<body>            页面主体
</body>
<html>

//html 超文本标记语言 
//超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素 

<  标记 
<html> 标签 
<html> <html> 标签对

3. 语法

HTML语法

1) 常规标签（双标签）
<标签 属性=“属性值” 属性=“属性值”></标签>

2) 空标签（单标签） 
<标签 属性=“属性值” />

//常用标签-文本
1) 文本标题
    <h1>一级标题</h1> 
    <h2>二级标题</h2> 
          …… 
    <h6>六级标题</h6> 

2) 段落标记 
    <p>段落文本内容</p>

3）空格 &nbsp; 实义字符

4）强制换行 <br />

5）加粗 
    <b>加粗内容</b> 
    <strong>加粗内容<> 

6）倾斜 
    <em></em> 
    <i></i>

7）水平线 <hr /> 
   删除线 <del></del> 

 8）上标／下标 
<sup>上标</sup> <sub>下标</sub>

9）下划线
 u  一般不用 用文本修饰
 
//常用标签-列表
HTML中有三种列表，分别是：
*无序列表：
  <ul> 
     <li></li> <li></li> ．．．．．．
  </ul>
*有序列表：
  <ol> 
     <li></li> <li></li> ．．．．．．
  </ol>
*自定义列表：
  <dl> 
    <dt>名词</dt>
    <dd>解释</dd> (定义描述) ．．．．．．
  </dl>

图片标签
   <img src=“图片地址” alt=“图片名” title="图片标题" / >  （单标签）

a标签、超级链接
 <a href="链接地址" target="_self/_blank">链接文本/图片</a> 
    
属性：  target 链接打开方式
 	   _self   当前窗口    
       _blank  新窗口

4. 表格

数据表格
table  表格标签
tr     行标签 
td     单元格标签

//作用及组成：
作用：显示数据
组成：
		<table>
 			<tr> 
  				<td></td> 
  				<td></td>
 			</tr> 
		</table>

表格的相关属性：
		width="表格的宽度"
		height="表格的高度" 
		border="表格的边框"  border:solid 1px
		bgcolor="表格的背景色" 
		cellspacing="单元格与单元格之间的间距" 
		cellpadding="单元格与内容之间的空隙" 
	水平对齐方式：align="left/center/right"      
	垂直对齐方式：valign="top/middle/bottom/baseline"

合并行，合并列
	合并列 colspan="所要合并的单元格的列数";
	合并行 rowspan="所要合并的单元格的行数";

5. 表单

表单组成部分 主要负责把用户的信息传递给服务器，实现数据的动态交互。  收集数据
   表单域     表单控件(元素）   提示信息

表单域 包含了处理表单数据所用的程序的URL以及数据提交到服务器的方法。
<form action='url' method='get/post' name='名' >表单内容</form>

form：用于定义采集数据的范围，即设定表单的起止位置，并指定处理表单数据程序的url地址
action: 用于提交表单数据文件的URL的地址，这个文件通常是一个后台程序或是一个电子邮件地址。
method: 指定数据传递到服务器的方式。 
name: 用于设定表单名称，便于其他地方引用表单的值。

表单控件（元素）
文本框：<input type='text'  value='请输入' placeholder='请输入'/> 
密码框： <input type='password'/> 
提交按钮： <input type='submit' value='按钮上显示的文字' /> 
重置按钮： <input type='reset' value='按钮上显示的文字'/> 
跳转按钮： <input type='button'  value='按钮上显示的文字'/> （无默认值）