html笔记（完整版）

最新推荐文章于 2025-10-19 16:56:54 发布
原创 最新推荐文章于 2025-10-19 16:56:54 发布 · 2.4w 阅读 · 854 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

目录

码仙励志

背景颜色 bgcolor

注释

空格 

版权符©

网页标题

标题标记

网页编码

强制换行标记

换段落标记

居中对齐白标记

预格式化标记

列表项目标记

无序列表标记

有序列表标记

定义型列表

水平分割线标记

分区显示标记

字体设置标记

粗字体标记

斜字体标记

文字下标字体标记​

文字上标字体标记

下划线字体标记

其它标记

图像标记

超链接的使用

表格

框架

表单设计

码仙励志

生活总是让我们遍体鳞伤，但到后来，那些受伤的地方一定会变成我们最强壮的地方

背景颜色 bgcolor

<body bgcolor="blue">
秦帅哥
</body>

注释<!--注释的内容-->

不添加注释：

<body>
秦帅哥
秦帅哥
</body>

添加注释：

<body>
秦帅哥
<!--秦帅哥-->
</body

空格&nbsp;

<body>
秦 帅       哥<br>
秦&nbsp;帅&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;哥
</body>

 

版权符&copy;

<body>
&copy;版权归秦帅哥所有
</body>

网页标题

<title></title>

<head>
<meta charset=utf-8" />
<title>秦帅哥的网页标题</title>
</head>

<body>
秦帅哥
</body>

标题标记<hn></hn>

共有6个级别，n的范围1~6，不同级别对应显示大小不同的标题，h1最大，h6最小

<body>
<h1>秦帅哥</h1>
<h2>秦帅哥</h2>
秦帅哥
<h6>秦帅哥</h6>
</body>

网页编码<meta charset="utf-8" />

<head>
<meta charset="utf-8" />
<title>秦帅哥的网页标题</title>
</head>

link连接的颜色

alink正在点击的颜色

vlink已经访问的连接颜色

<body link="red" alink="yellow" vlink="green">
<a href="http://www.baidu.com">百度</a>
<a href="http://www.taobao.com">淘宝</a>
</body>

强制换行标记

<br>

<body>
秦帅哥<br>
秦帅哥
</body>

换段落标记

<p></p>

<body>
<p>秦帅哥</p>
<p>秦帅哥</p>
</body>

居中对齐白标记

<center></center>

<body>
<center>秦帅哥</center>
</body>

预格式化标记

<pre></pre>

<body>
<pre>秦 帅     哥</pre>
</body>

列表项目标记

<li></li>

<body>
    <li>秦帅哥</li>
    <li>秦帅哥</li>
    <li>秦帅哥</li>
    <li>秦帅哥</li>
    <li>秦帅哥</li>
</body>

无序列表标记

<ul></ul>

<body>
<ul>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
</ul>
</body>

有序列表标记

<ol></ol>

<body>
<ol>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
</ol>
</body>

有序列表的type属性值

<body>
<ol type="A">
  <li>秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
</ol>
</body>

指定一个新的数字起始值value

<body>
<ol>
  <li>秦帅哥</li>
  <li value="5">秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
</ol>
</body>

列表嵌套

<body>
<ol>
  <li>秦帅哥</li>
  <li>
    <ol  type="A">
      <li>秦帅哥</li>
      <li>秦帅哥</li>
      <li>秦帅哥</li>
    </ol>
  </li>
  <li>秦帅哥</li>
  <li>秦帅哥</li>
</ol>
</body>

定义型列表

<dl><dt></dt><dd></dd></dl>

<body>
<dl>
  <dt>软件说明：</dt>
  <dd>简单介绍软件的功能及基本应用</dd>
  <dt>软件界面</dt>
  <dd>用于选择软件的外观
  <dd>
</dl>
</body>

水平分割线标记

<hr>

<body>
秦帅哥
<hr>
秦帅哥
</body>

分区显示标记

<div></div>

<body>
<div> 秦帅哥 </div>
<div> 秦帅哥 </div>
</body>

字体设置标记<font></font>

设置字体的格式

<body>
秦帅哥<br>
<font size="14px" color="red" face="微软雅黑">秦帅哥</font>
</body>

粗字体标记<b></b>

<body>
秦帅哥<br>
<b>秦帅哥</b>
</body>

斜字体标记<i></i>

<body>
秦帅哥<br>
<i>秦帅哥</i>
</body>

文字下标字体标记

<sub></sub>

<body>
2<sub>3</sub>
</body>

文字上标字体标记

<sup></sup>

<body>
2<sup>3</sup>
</body>

下划线字体标记<u></u>

<body>
秦帅哥<br>
<u>秦帅哥</u>
</body>

其它标记

图像标记

<img>

<body>
<img src="file:///D|/孤独秦哥/2/ha.jpg" width="200px" height="200px">
<img src="file:///D|/孤独秦哥/2/ha.jpg" width="200px" height="200px" border="5px">
<img src="file:///D|/孤独秦哥/2/ha.pg" width="200px" height="200px" alt="灰太狼">
</body>

超链接的使用<a href=""></a>

在当前窗口中打开链接

<body>
<a href="http://www.baidu.com">百度</a><!--外部链接-->
<a href="Test2.html">test2</a><!--内部链接-->
</body>

在一个新的窗口中打开链接

<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>

锚点链接

<body>
 <a name="dingbu"></a>
 <a href="#dibu">到页面底部</a><br>
 内容<br>
 <a href="#dingbu">到页面顶部</a>
 <a name="dibu"></a>
</body>

表格

1.<table>标记

2.<caption>标记

<head>
  <title>表格</title>
  <meta charset="utf-8">
</head>
<body>
  <table width="500px" height="230px" border="1px" align="center"  cellspacing="0px"> 
    <caption>表格的标题</caption>
	  <tr>
		<th align="cernter">班级</th>
		<th>姓名</th>
		<th>年龄</th>
		<th>成绩</th>
	  </tr>
	  <tr align="center" valign="center">
		<td>四年级一班</td>
		<td>张三</td>
		<td>16</td>
		<td>80</td>
	  </tr>
	  <tr>
		<td>四年级一班</td>
		<td>李四</td>
		<td>14</td>
		<td>90</td>
	  </tr>
  </table>
</body>

3.<tr>标记

4.<td>和<th>

<body>
  <table width="500px" height="230px" border="2px" cellspacing="0px"> 
	<tr>
	  <td colspan="2"></td><td></td><td></td>
	</tr>
	<tr>
	  <td></td><td></td><td rowspan="2"></td><td></td>
	</tr>
	<tr>
	  <td></td><td></td><td></td>
	</tr>
  </table>
</body>

<frameset>框架</frameset>

框架将浏览器划分成不同的部分，每一部分加载不同的网页，实现在同一浏览器窗口中加载多个页面的效果

<html>
  <head>
    <title>框架</title>
    <meta charset="utf-8">
  </head>

  <frameset rows="190px,*,190px">
    <frame>
    <frameset cols="20%,80%">
      <frame>
      <frame>
    </frameset>
    <frame>
  </frameset>
</html>

表单设计

1.表单标记<form>...</form>

2.文本域和密码<input>标记

3.提交、重置、普通按钮

  <body>
    <form method="post">
	  账号：<input type="text" name="zhanghao" size="10" maxlength="5">
	  <br>
	  <br>
	  密码：<input type="password" name="mima" size="10">
	  <br>
	  <br>
	  <input type="submit" value="提交">
	  <input type="reset" value="重置">
    </form>
  </body>

4、单选框和复选框

  <body>
    <form>
      <!--单选按钮-->
      性别：
      <input id="man" type="radio" name="sex" checked="checked">男
      <input id="woman" type="radio" name="sex">女
    </form>
  </body>

  <body>
    <form>
      <!--多选按钮-->
      爱好：
      <input type="checkbox" name='foods' value='niurou'>牛肉
      <input type="checkbox" name='foods' value='caixin'>菜心
      <input type="checkbox" name='foods' value='lianou'>莲藕
    </form>
  </body>

5、隐藏域

当<input type="hidden">时，为隐藏表单域

  <body>
    <form>
      <input type="hidden" value="隐藏的内容" name="yincang">
    </form>
  </body>

6、多行文本域

  <body>
    <form>
      自我介绍：<br>
      <textarea name="ziwojieshao" rows="5" cols="35">
      </textarea>
    </form>
  </body>

7、菜单下拉列表域<select></select>标记

  <body>
    <form>
      地址：<br>
      <select name="dizhi">
        <option value="sichuan">四川</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
      </select>
    </form>
  </body>

本篇博客来自于麦子学院视频教程的总结以及笔记的整理，仅供学习交流，切勿用于商业用途，如有侵权，请联系博主删除，博主QQ：194760901 

html&css笔记完整版
小旻
10-23 4754
把1,2合在一起了，方便查看 教程指路：这里 目录 1.导入 京东界面练习（p102-114） 设置网站图标（用在标题栏和收藏栏） 2.vscode使用 3.html 实体 meta标签： 语义化标签 块元素和行内元素 列表 超链接 路径： 图片标签 内联框架 音视频 表格table 表单form CSS 设置样式： 语法： 选择器： 单个选择器： 复合选择器： 父子兄弟选择器： 属性选择器 伪类选择器： 否定伪类： 超链接伪类： 伪元素选.
html+css+javascript笔记完整版
03-03
完整版，详细，前端学习的宝典.内容包括HTML,CSS,JAVASCRIPT的内容，讲解详细易懂，掌握其中的原理
HTML笔记（全）
程序猿小九九的博客
06-04 3641
HTMLHTML5HTML5的优势W3C标准常见IDEhtml基本机构、等成对的标签，分别叫开放标签，和闭合标签单独呈现的标签（空元素），如意为用/来关闭空元素 03.网页基本标签 标题标签 段落标签 换行标签 水平线标签 字体样式标签 注释和特殊符号 04.图像标签 常见的图像格式 05.超链接标签及应用 文本超链接 图像超链接 超链接 06.块元素和行内元素 块元素 无论内容多少，该元素独占一行 (p、h1-h6、…) 行内元素 内容撑开宽度，左右都是行内元素的可以排在一行 (a
HTML笔记(完整版).md
08-14
该笔记适合0基础学员学习，希望对各位学者有所帮助！
基于HTML5的笔记网站设计与实现
最新发布
weixin_42124497的博客
10-19 318
htmltable {th, td {th {pre {简介：HTML是构建笔记网站的核心技术，通过语义化标签和结构化布局，定义网页内容与组织形式。本文详细介绍了HTML在笔记网站开发中的关键应用，涵盖页面结构、文本排版、列表、链接、表格、表单、多媒体嵌入及响应式设计等核心知识点。结合CSS与JavaScript可进一步提升视觉表现与交互体验，帮助开发者打造功能完整、跨设备兼容的现代化笔记平台。
HTML笔记整理（个人笔记）
w3535222的博客
03-07 4094
个人笔记
html 学习笔记，基础版
08-03
html 基础标签知识，适合初学者，标签及使用说明。 入门知识，前端开发入门使用。 基础学习笔记。
吴恩达机器学习个人笔记完整版 附有代码 PDF PPT
07-16
Coursera-ML-AndrewNg-Notes-master，内含有代码，文档，PPT ，Markdown，srt ,机器学习个人笔记完整版
html教程课堂笔记（黑马程序员）
03-22
HTML 教程课堂笔记总结 HTML 是一门网页制作语言，是第一门网页制作语言，最简单的一门语言。hyperText Markup Language 超文本标记语言。HTML 语言由标记组成。学习 HTML 语言，掌握一些常用的标记即可！ 1. HTML...
HTML学习笔记(全)
weixin_63676550的博客
01-12 6707
HTML学习笔记 视频教程：https://b23.tv/LbTHmRE
【HTML】HTML学习笔记（全）
热门推荐
Bitdancing的专栏
12-09 1万+
前端HTML学习笔记大全
HTML 笔记
好女绪的博客
08-13 925
HTML 笔记 这只是我关于HTML的笔记，完整的HTML教程请自行查看 w3cschool 或者 菜鸟教程。 HTML 结构 HTML的结构基本如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;网页标题&lt;/title&gt; &lt;meta http-equiv="Content-Type" ..
HTML笔记（完结）
weixin_43872169的博客
07-24 1万+
HTML基础部分 基础元素（代码注释方法：ctrl+/ 文字注释方法：ctrl+shift+/） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body&...
HTML笔记整理
qq_48241564的博客
04-25 759
HTML笔记整理 一.html是什么 超文本标记语言（HyperTextMarkupLanguage）缩写为HTML，标准通用标记语言下的一个应用。HTML是一种标记语言（markup language），是网页制作所必备的工具。超文本标记语言(或超文本标签语言)的结构包括“头”部分和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。 二.html文档结构 <!DOCTYPE html> //文档类型是html类型---MIME类型 <html ...
HTML笔记（精简）
weixin_46160720的博客
03-08 1797
html 笔记 vscode 前端三大件
HTML5笔记整理
yanxuanrende的博客
07-16 376
HTML5 一、html（属于解释性语言） 1.超文本标记语言 1）超文本和普通文本的区别 普通文本是纯字符 超文本中包含字符、音视频、图片等 2.浏览器是按照从上往下的顺序解析html文件的 3.语法错误时，浏览器不会报错 4.要以.html或.htm做后缀 5.编程语言和解释性语言 编程语言 c .c java .java 解释性语言 js .js html .html 二、开发环境 文本编辑器：Vscode（本人使用） 测试浏览器：firefox（火狐） chrome（谷歌） 服务器：阿里云 三、代码
html笔记（狂神-完整版）
qq_49898212的博客
06-10 1610
html笔记（狂神-完整版） 生活总是让我们遍体鳞伤，但到后来，那些受伤的地方一定会变成我们最强壮的地方 背景颜色 bgcolor <body bgcolor="widte"> 靓仔 </body> 注释 <!-- 不添加注释 --> <body> 不添加注释： 靓仔 靓仔 </body> <br> <hr> <!-- 添加注释 --> <body>
韩顺平PHP教程笔记含HTML与CSS完整版
韩顺平老师的PHP教程笔记完整版是一套系统而全面的编程学习资料，涵盖了网页开发中最为基础且核心的技术体系：HTML、CSS 和 PHP。这套资料不仅适合初学者入门，也适合作为有一定基础的开发者巩固知识体系的重要参考...
评论 35
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值