最近在学HTML，记录一些笔记当然是最基础的。。

最新推荐文章于 2024-09-10 11:45:35 发布

原创最新推荐文章于 2024-09-10 11:45:35 发布 · 303 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了HTML的基础知识，包括HTML的基本结构、常用标签及其属性，以及如何使用表单进行数据收集。

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

WEB标准：

w3c组织结构+样式+行为（HTML+CSS+JS）

初识HTML
HTML概述：超文本标记语言
超文本：在文本的基础上添加了一些动画、图片、音频、视频等等。

最新申明头：<!DOCTYPE html>
指定HTMl解析编码：<meta charset="UTF-8">（嵌套在head里面）
编码：（有兴趣可以上网扩展知识）
ansi
unicode
utf-8
gbk
gb2312
gb18030

HTML基本骨架：

</html>

标签分类：
双标签 <标签名>内容</标签名>

单标签 <标签名 />

标签关系：
嵌套关系（父子关系）如：<head><title></title></head>

并列关系（兄弟关系）如：<head></head><body></body>

H系列标签：<h1></h1>
给页面上的文字加上标题的语义。

特点：将文字放大，加粗并且逐渐变小。（h1标签是最大的,一个页面上只有一个h1标签）

P标签：<p></p>
给页面上的一段文字加上段落的语义。

特点：单独占一行，并且与上下内容之间存在距离。

hr标签：<hr>

水平分隔线（单标签）

br标签：<br>

换行标签（单标签）

文本格式化标签：<b></b>等
strong em ins del （建议使用）
b i u s （认识即可）

粗体斜体下划线删除线

标签的属性：
属性就是特性。
在制作网页的时候，如果想让HTML标签提供更多的信息，可以使用标签的属性加以设置。
语法：
<标签名属性1=“属性值1” 属性2= “属性值2” …>内容</标签名>
注意点：
标签可以有多个属性，必须写在开始标签中，位于标签名后面。
属性之间不分先后顺序，标签名与属性之间均用空格分开。
任何标签的属性都有默认值，省略该属性则取默认值。

采用键值对的格式，key=“value”的格式。

图片标签：
<img src="图片路径" alt="图片显示失败时的替换文本" title="悬停提示" border="边框" />
注意：宽、高一般只设置一个，图片会自动缩放。

链接标签：
<a href="地址" target="跳转页面的打开方式" >显示的内容</a>
锚标记：<a href="#我在这">、<p id="我在这">你在找我?</p>

base标签：
<base target="_blank" />统一设置跳转页面的基本打开方式

注释标签

路径
相对路径：
1、图片和HTML文件位于同一级文件夹
<img src="meinv.jpg" />
2、图片位于HTML文件的下一级文件夹
<img src="下一级文件夹/meinv.jpg" />
3、图片位于HTML文件的上一级文件夹
<img src="../路径.jpg" />

href="图像链接.html"

绝对路径：C:\Users\chend\Desktop\HTMLv81预习班\day02\案例
http://ww.baidu.com

iframe：
<a href="http://www.baidu.com" target="myIframe" target="myIframe">百度</a>
<a href="http://www.sina.com.cn" target="myIframe" target="myIframe">新浪</a>
<br />

<iframe name="myIframe" width="500" height="500"scrolling="no" frameborder="1">
</iframe>
a和iframe通过target、name的值关联起来。
局部刷新：只刷新页面中的某一个地方，不影响其他。
scrolling:滚动条是否显示（yes\no\auto）frameborder:是否有边框（0\1）

列表
ul标签：无序列表
ol标签：有序列表
dl标签：自定义列表
li标签:容器，可以放别的标签

无序：
<ul>
<li></li>
<li></li>
</ul>

有序：
<ol>
<li></li>
<li></li>
</ol>

自定义：
<dl>
<dt>项名称1</dt>
<dd>描述1</dd>
<dt>项名称2</dt>
<dd>描述1</dd>
<dd>描述2</dd>

<dl>

table 表格：
将数据以表格的形式展示出来
语法：
<table>
<caption>
<h3></h3>
</caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>

</table>

table：表格
caption：表格标题（居中、位于表格正上方）
tr：行
th：头部单元格（居中、默认加粗）
td：单元格
thead：表格的头部
tbody：表格的主体（不写时浏览器会自动加）
tfoot：表格的底部
colspan：列合并
rowspan：行合并
cellspacing：边框与边框之间的距离（注意：值为0时边框并列）
cellpadding：内容与边框的距离（注意：四个方向都有）
border：边框
合并单元格占位问题：列合并时从左到右，行合并时从上到下，多余的单元格要删掉。

firebug：浏览器调试。右键->检查或者F12（Elements是HTML代码区可以直接双击或者右键Edit as HTML编辑HTMl即时在页面看到效果）

HTML编辑器：
*Sublime(轻量级)自带的功能不全，但是插件是十分丰富【重点】
dreamweaver 偏向于设计

Webstrom(重量级) 自带功能比较全面

sublime下载网址：https://www.sublimetext.com/3
sublime常用快捷键：
ctrl+n 新建文件
ctrl+s 保存文件（注意：要写后缀名）
ctrl+shift+d 复制一行
ctrl+shift+k 删除一行
ctrl+shift+↑ 向上移动一行
ctrl+shift+↓ 向下移动一行

*Sublime(轻量级)自带的功能不全，但是插件是十分丰富【重点，软件以及现阶段插件安装文档在群文件有】
dreamweaver 偏向于设计
Webstrom(重量级) 自带功能比较全面

*Sublime(轻量级)自带的功能不全，但是插件是十分丰富【重点，软件以及现阶段插件安装文档在群文件有】
dreamweaver 偏向于设计

Webstrom(重量级) 自带功能比较全面

font标签：定义字的样式。
属性
face：字体
size:字号大小
color:字的颜色（群里有颜色的文档）
<font face="微软雅黑" size="3" color="red">内容</font>

表单
form：
method：规定发送表单数据的方式。post（隐式的）、get（显式的）
action：必需的 action 属性规定当提交表单时，向何处发送表单数据。
input：
type:指定元素的类型。text（文本框）、password（密码框）、checkbox（复选）、radio（单选）、submit（提交按钮）、reset（重置按钮）、file（文件）、hidden(后续内容)、image（图片按钮）和 button（普通按钮），默认为 text。
name: 指定表单元素的名称。
value: 元素的初始值。type 为 radio时必须指定一个值

size: 指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位

checked：type为radio或checkbox时，指定按钮是否是被选中

textarea：多行文本框。cols:规定文本区域可见列数。rows：规定文本区域可见行数
select:下拉框。一个<select>中至少包含一下<option>。
语法：
<select name="">
<option value=""></option>
</select>

<button></button>标签用<input type="button" />替换
重要事项：如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。

© ©
" "
& &
< <
> >
空格  