HTML学习笔记

已于 2023-12-22 22:28:36 修改
阅读量1.9k 收藏
点赞数
文章标签： 学习 笔记 html
于 2023-07-16 01:43:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65939803/article/details/131692053
版权

简介

<!-- 注释内容不执行 -->

1. HTML说明

1.1 文档声明

用于告诉浏览器文档版本。1.引入样式，2.自身样式，3.使用框架（html与xhtml同样）

<!-- 引入CSS的文档 -->
  <!-- HTML文档 -->
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
  http://www.w3.org/TR/html4/strict.dtd">
  <!-- XHTML文档 -->
  <!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- 自身样式的HTML文档 -->
  <!-- HTML文档 -->
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
  http://www.w3.org/TR/html4/loose.dtd">
  <!-- XHTML文档 -->
  <!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- 使用框架的HTML文档 -->
  <!-- HTML文档 -->
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "
  http://www.w3.org/TR/html4/frameset.dtd">
  <!-- XHTML文档 -->
  <!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!-- XHTML5文档 -->
<!DOCTYPE html>
<html>
</html>

1.2 XTHML差异

1.XHTML必须有根标签。2.XHTML标签必须小写。3. XHTML必须有正确结束。4. XHTML必须正确嵌套。5. XHTML属性必须有双引号。6.XHTML属性不能简写(readonly,selected,checked...)

<!-- 1.XHTML 必须有根标签 -->
<html>
<body>
    <!-- 2.XHTML 必须小写 -->
    <DIV></DIV>  <!--  HTML -->
    <div></div>  <!-- XHTML -->

    <!-- 3.XHTML 必须正确结束 -->
    <DIV>       <br>   <!--  HTML -->
    <div></div> <br /> <!-- XHTML -->

    <!-- 4.XHTML 必须正确嵌套 -->
    <div><b> </div> </b> <!--  HTML -->
    <div> <b></b> </div> <!-- XHTML -->

    <!-- 5.XHTML 属性必须加双引号 -->
    <div width=100px  ></div> <!--  HTML -->
    <div width="100px"></div> <!-- XHTML -->
    
    <!-- 6.XHTML 属性不能简写 --> 
    <input type="text" readonly>            <!--  HTML-->
    <input type="text" readonly="readonly"> <!-- XHTML-->
</body>
</html>

1.3 头部信息（head）

1. base 页面默认链接。2.title 页面标题。3. link 外部资源。4. style 文档样式。5. script 脚本。6. meta 元数据（1.keywords关键词 2.description描述 3. author作者 4.charset 字符集 5. http-equiv=content-type content=text/html;charst=utf-8）。

<head>
  <!-- 默认链接地址 -->
    <base href="http://www.xxx.com/xxx/" target="_blank">
      <!-- _self   当前窗口 -->
      <!-- _blank  新窗口打开 -->
      <!-- _parent 父级iframe窗口 -->
      <!-- _top    最外层iframe窗口 -->
    <!-- href指定的地址, 是针对相对 链接的<a>标签起作用 -->
    <!-- target属性, 是针对所有没有设置该属性（target属性）的<a>标签起作用 -->

  <title>页面标题</title>

  <!-- 引用外部文件 -->
    <link rel="stylesheet" type="text/css" href="../xx/xx.css" />

  <!-- 内部样式 -->
    <style type="text/css">
    </style>

  <!-- 指定src 属性中间不能写内容-->
    <script src="/xx.js" ></script>

  <!-- html4.0 type属性必须, html5type属性可选-->
    <script type="text/javascript">
    </script>

  <!-- 搜索关键词 -->
    <meta name="keywords" content="HTML学习, HTML笔记">
    <!-- 等同于 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> -->

  <!-- 网页描述 -->
    <meta name="description" content="这是学习笔记">
    <!-- 等同于 <meta http-equiv="description" content="This is my page"> -->

  <!-- 作者 -->
    <meta name="author" content="ZJR">

  <!-- 网页字符集, 告知浏览器当前文本编码格式 -->
  <!-- 浏览器一定按照当前编码格式读取文档 -->
  <!-- 必须与保存时编码一致，否则会乱码 -->
    <meta charset="UTF-8">
      <!-- 英文：ASCII (字母与字符，共有 128 个) -->
      <!-- 西欧：ISO-8859-1 (大多数西欧语言字符，仍然是单字节编码) -->
      <!-- 汉字：GB2312 (6763个汉字，682个符号。双字节编码) -->
      <!-- 汉字：GBK (GB2312基础上扩展到 21003个汉字) -->
      <!-- 统一码：UTF-16 (全部两个字节16个bit，所以叫 UTF-16。) -->
      <!-- 统一码：UTF-8 (解决UTF-16单字节用双字节表示的缺陷。) -->
      <!-- 日语：Shift_JIS (各个厂商各自进行扩展，包含了大量重复的、规格以外的文字。) -->
      <!-- 日语：windows-31J (使Shift_JIS混乱情况有所改善。) -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <!-- text/html ： HTML格式 -->
      <!-- text/plain ：纯文本格式 -->
      <!-- text/xml ： XML格式 -->
      <!-- image/gif ：gif图片格式 -->
      <!-- image/jpeg ：jpg图片格式 -->
      <!-- image/png：png图片格式 -->
      <!-- application/json ： JSON数据格式 -->
      <!-- application/pdf ：pdf格式 -->
      <!-- application/msword ： Word文档格式 -->
      <!-- application/octet-stream ： 二进制流数据（如常见的文件下载） -->

  <!-- 刷新页面 -->
    <meta http-equiv="Refresh" content="3">

  <!-- 跳转页面 -->
    <meta http-equiv="Refresh" content="3;url=www.baidu.com" />

  <!-- 页面期限 -->
    <meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT">
      <!-- 设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。必须使用GMT的时间格式。 -->

  <!-- cache模式 -->
    <meta http-equiv="Pragma" content="no-cache">
      <!-- 禁止浏览器从本地机的缓存中调阅页面内容,访问者将无法脱机浏览。 -->

  <!-- cookie设定 -->
    <meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT； path=/">

  <!-- 窗口设定 -->
    <meta http-equiv="Refresh" content="3">
      <!-- 强制页面在当前窗口以独立页面显示。防止别人在框架里调用自己的页面。  -->

  <!-- 清除缓存 -->
    <meta http-equiv="cache-control" content="no-cache">
      <!-- 再访问这个网站要重新下载数据 -->

</head>

2. 常用标签

1.标题 h1~h6 

2.换行 br 

3.水平线 hr 

4.布局 div 独占一行

5.跨距 span

6.段落 p 独占一行

3. 文本格式化

1.加粗：    b, strong

2.下划线：u, ins

3.倾斜：    i, em

4.删除线：s, del

5.下标：    sub

6.上标：    sup

4. 列表

无序列表：    <ul> <li></li>... </ul>  显示黑点

有序列表：    <ol> <li></li>... </ol>  显示编号

自定义列表：<dl>  <dt></dt><dd></dd><dd></dd>...  </dl>

5. 表格（table）

1.属性：1.align(left center rigth) 对齐方式。2.border('','1') 边框。3.width 宽。4.heigth 高。 5.cellpadding 内边距。6.cellspacing 单元格间距。HTML5不支持属性。

2.头部：<thead> </thead>

3.内容部：<tbody> </tbody>

4.行：<tr> </tr>

5.表格头：<tr>  <th></th><th></th> </tr>

6.单元格：<tr>  <td></td><td></td> </tr> 合并行rowspan 合并列colspan

    <table align="left" border="" width="100px" height="20%" 
        cellpadding="5px" cellspacing="2px">
        <!-- align 内容对齐方式 left right center html5不支持-->
        <!-- border 边框 ""无 "1"有 -->
        <!-- width,height 像素或百分比 html5不支持 -->
        <!-- cellpadding 内容距离边框距离 html5不支持 -->
        <!-- cellspacing 单元格之间距离 html5不支持 -->
        <thead>
            <tr>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2"></td>
                <td colspan="2"></td>
            </tr>
        </tbody>
    </table>

6. 图片 超链接 音频 视频

1. 图片 img

属性：1 src路径 2.alt 显示异常文字 3.title 鼠标指示名 4. width 5.height 6.border

<img src="./xx.jpg" alt="找不到图片" title="xx图" 
  width="200px" height="300px" border="1" />
<!-- 宽，高 设定一个等比缩放，设定2个 图像拉抻 -->
<!-- src绝对路径 -->
<!--   1. http://x.com/xx/xx.jpg -->
<!--   2. C:\\xx\xx.jpg -->
<!-- src相对路径-->
<!--   html同级文件（同级）        "xx.jpg"     "./xx.jpg"-->
<!--   html同级文件夹下文件（子级） "xx/xx.jpg"  "./xx/xx.jpg" -->
<!--   html父级文件夹下文件（父级） "../xx.jpg" -->
<!--   项目根目录文件不含项目名 "/xx.jpg" -->

2. 超链接 a

1. href 目标链接地址 2.target打开方式 3.download 下载的文件名

<a href="../xx.html" target="_self" >超链接文本</a>
<a href="/xxx.jpg" download="yyy.jpg">下载图片</a>
<!-- href -->
<!--    外部链接 http:\\xx.com\xx.html -->
<!--    内部链接 ../xx/xx.html -->
<!--    文件下载 ../xx.jpg/ xx.zip 指定文件会进行下载 download指定下载后文件名 -->
<!-- target -->
<!--    _self   默认 -->
<!--    _blank  新窗口打开 -->
<!--    _parent 父窗口(iframe)打开 -->
<!--    _top    根窗口(iframe)打开 -->
<a href="#元素id" >锚点链接，定位到指定Id的元素</a>
<a href="www.xxx.com#元素id" >锚点链接，定位到该网址的指定Id的元素</a>

3. 音频 audio（HTML5元素）

<!-- HTML5 元素 -->
<audio src="./xx.mp3" controls autoplay loop></audio>
<!-- controls 显示播放控件 -->
<!-- autoplay 自动播放 -->
<!-- loop 循环播放 -->

4. 视频 video（HTML5元素）

<!-- HTML5 元素 -->
<video src="./xx.mp4" controls autoplay loop></audio>
<!-- controls 显示播放控件 -->
<!-- autoplay 自动播放 -->
<!-- loop 循环播放 -->

7. 表单 form

1. 属性

1.name 2.action 3.method 4.encType="multipart/form-data"

<form name="form1" action="xx.do" method="post" encType="multipart/form-data">
</form>
<!-- name : 表单名称 -->
<!-- action: 表单提交请求 get post -->
<!-- method: 表单提交方式-->
<!-- encType: 必须post, 文件上传类型-->

2.  表单元素 input

1.text。2.password。3.hidden 隐藏。4.radio 单选。5.checkbox 复选。6.reset 重置。7.submit 提交。8.button 按钮。9.file 文件。

<form>
  <input type="text"     name="输入框" value="默认值或输入值" />
  <input type="password" name="密码框" value="密码显示为点" />
  <input type="hidden"   name="隐藏"   value="页面不显示数据" />
  <input type="radio"    name="单选框组"   value="1" checked />
  <input type="radio"    name="单选框组"   value="2" />
  <!-- 一组单选框指定相同名称，同时只能选中1个。通过名称获取选中的值，可指定默认选中 -->
  <input type="checkbox" name="复选框组"   value="1" checked />
  <input type="checkbox" name="复选框组"   value="2" checked />
  <!-- 一组复选框指定相同名称，同时可选多个。通过名称获取选中的值素组，可指定多个默认选中 -->
  <input type="reset" value="按钮名(默认重置)重置页面表单数据" />
  <input type="submit" value="按钮名(默认提交)提交表单数据" />
  <input type="button" value="按钮名,常用表单事件处理" />
  <input type="file"  />
  <!-- 用于选择文件做上传 -->
  <!-- 表单元素共用属性 id disabled readonly -->

  <!-- HTML5 只有部分浏览器支持，以谷歌为例 -->
  <input type="color" /><!-- 选择颜色，获取十六进制值 -->
  <input type="date" /> <!-- 日期控件 -->
  <input type="email" /><!-- 对输入的值做邮箱验证 -->
  <input type="number" max="100" min="0" step="2" /> <!-- 数值框 -->
  <input type="range"  max="100" min="0" step="2" /> <!-- 滑动条 -->
</form>

3. 下拉列表

1. 父标签 select

multiple 可多选（ctrl+左键）

size 同时显示列表数量（非多选默认1）

disabled 不可用（没有readonly属性）

2. 子标签 option

selected 默认选中（非多选只能设定一个，设定多个会选中最后1个）

        <select multiple size="3">
            <option>1</option>
            <option selected>2</option>
            <option selected>3</option>
        </select>

4. 文本框 textarea

1. rows 行数 2.cols 每行字符数 3.id 4.name, 5. readonly 只读 6.disabled 不可用

<textarea rows="2" cols="20" >内容，标签内多个空格正确显示</textarea>

5. 标注标签 label

不属于form表单，经常与表单元素同时使用

<input type="text" id="id1" />
<label for="id1">文本信息</label>
<!-- 入力框会获取光标。单选会选中（选中不会取消）。多选会选择（选中的会取消）-->

6. 按钮 button

内部可放文本图片

type属性：1. reset 2.submit 3.button

表单外默认button, 表单内默认submit

8. 框架

1.iframe（嵌入另一个文档）

<iframe src="./subhtml.html" width="20px" height="30px"></iframe>
<iframe src="./subhtml.html" width="20%" height="30%" frameborder="0"></iframe>
<!-- frameborder="0" 移除边框 -->

2. frameset（HTML5不支持）

代替body不能出现在body里

frameset属性：rows 行百分比, cols 列百分比，

frame属性：src 文件地址，noresize="true" 不允许改大小，scrolling="no" 不显示滚动条

<html>
<head>
  <title>学习</title>
</head>

<frameset rows="120,*" name="first">
  <frame src="上标题.html" name="me" noresize="true" scrolling="no"/>
  <frameset rows="*" cols="19%,*">
    <frame src="左菜单.html" name="nhead" />
    <frame src="右主体.html" name="nhand" />
  </frameset>
</frameset>
</html>

9. 事件

窗口事件：onload 页面加载完

表单事件：onblur 失去焦点，onfocus 获取焦点，onchange 元素值变更， onsubmit 提交表单

键盘事件：onkeydown 按下按键，onkeyup 释放按键，onkeypress 敲击按键

鼠标事件：

onclick 单击，ondblclick 双击，

onmousedown 按下，onmouseup 释放，

moursemove(移动)，

mouseover(移入)，mouseout(移出)，

mouseenter(移入HTML5无冒泡)，mouseleave(移出HTML5无冒泡),

凯尔萨厮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html如何在手机打开,HTML怎么在手机打开
weixin_33573857的博客
06-16 2万+
2回答2021-05-06浏览：9分类：其他问题回答：HTML文件可以用手机浏览器打开。从本质上来说，Internet( 互联网)是一个由一系列传输协议和各类文档所组成的集合，HTML文件只是其中的一种。这些HTML文件存储在分布于世界各地的服务器硬盘上，通过传输协议用户可以远程获取这些文件所传达的资讯和信息。网络浏览器，能够解释HTML文件来显示网页，这是网络浏览器的主要作用。当你使用浏览器在互...
HTML5学习笔记
m0_61721166的博客
03-08 8924
一、网页 1.什么是网页 网站是指在因特网上根据一定的规则，使用 HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页” ，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html 后缀结尾的文件，因此将其俗称为HTML文件。 2.什么是HTML HTML指的是超文本标记语言(HyperTextMarkupLanguage)，它是用来描述网页的一种语言。HTML不
【HTML】HTML学习笔记（全）
Bitdancing的专栏
12-09 1万+
前端HTML学习笔记大全
HTML学习笔记(全)
weixin_63676550的博客
01-12 5627
HTML学习笔记 视频教程：https://b23.tv/LbTHmRE
前端之HTML学习笔记一
m0_53211178的博客
02-28 8167
目录 1.网页 1.1网页的概念 1.2HTML的概念 1.3网页的形成 2.常用的浏览器 3.web标准 3.1为什么需要web标准 3.2web标准的构成（重点） 1.网页 1.网页 1.1网页的概念 网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一"页"，通常是HTML格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成，通常我们看到的网页，常见以.htm或.
黑马程序员 HTML5 学习笔记
susu的博客
07-14 2054
1.html语法规范2.html基本结构标签3.开发工具4.html常用标签5.html中注释和特殊字符
HTML 学习笔记——插入音频、视频标签
m0_55394328的博客
08-04 7431
今天学习了尚硅谷老师的html基础课程，主要是音视频的标签的属性和使用方法。html中插入音频和视频的方法基本相同，这里以音频为例进行演示音频格式：mp3、ogg、wav视频格式：mp4、ogv、webmaudio标签用来向页面中引入一个外部的音频文件。音视频文件引入时，默认情况下不允许用户自己控制播放按钮。以上就是今天的学习笔记啦，希望对大家有帮助~...
html学习笔记（二）
m0_51684016的博客
03-24 4830
文章目录一、表格二、语义标签三、特殊符号四、总结 今天学完了html的大部分知识点，剩下了一些较难的知识点如svg等内容，留在以后学vue3、react的时候回过头来学；后续的话要学习css和JavaScript（重点）。这两三天的事情也比较多，今天将Django项目部署在服务器上了，并且成功跑起来了传送门,后续将持续更新该项目。 一、表格 随着框架的发展，table使用的频率越来越低了，现在可能只有真的想实现一个表格时才会使用table。 caption：标题 table  &nbsp
HTML学习笔记 1-用HBuilderX写的HTML无法在浏览器上运行怎么办？问题出在这里：HBuilderX外部web服务支撑配置
热门推荐
m0_74282485的博客
12-28 1万+
HBuilderX外部web服务支撑配置 在HBuilderX写的HTML代码无法在浏览器上运行怎么办？ 那是因为你的HBuilderX外部web服务没有
HTML学习笔记pdf版
最新发布
07-19
HTML 学习笔记简介 1. 概述 HTML（HyperText Markup Language，超文本标记语言）是用于创建和结构化网页内容的标准语言。它定义了网页中的各种元素和其布局方式，包括文本、图像、链接、表格等。 2. 基本结构 ...
html学习笔记
06-22
1.属性，hidden 属性是布尔属性。 注释：在 XHTML 中，属性简写是禁止的，hidden 属性必须定义为 。2.事件
Html学习笔记
10-29
自己学习html的笔记,普通文本格式，适合非前端专业开发者参考。学的好还得自己好好理解。
HTML学习笔记.md
08-01
HTML学习笔记
html学习笔记.zip
04-05
介绍了html中代码格式和常用标签 #HTML格式 * `<!DOCTYPE html>`---------*注明文件使用格式* `<html lang="en">`--------*注明网页使用语言 en-英语 zh-CN-中文* `<head>`--------*头部* `...
javaweb 前端 html学习笔记
04-26
javaweb 前端 html学习笔记
HTML 学习笔记
03-29
HTML 学习笔记语法大全！ 适合初学者
个人HTML学习笔记.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
黑马html学习笔记
09-15
很高兴能帮你回答关于HTML学习的问题！以下是一些HTML学习笔记的内容： 1. HTML的全称是超文本标记语言，它用于创建网页和网页应用程序的结构。 2. HTML使用标签来定义页面的不同元素。例如，<h1>标签用于定义一个标题，<p>标签用于定义一个段落等。 3. HTML文档的基本结构包括<html>标签（定义整个文档），<head>标签（包含页面的元数据，如标题和链接），以及<body>标签（包含页面的可见内容）。 4. 在标签中可以使用属性来提供更多信息。例如，<img>标签可以使用src属性指定图像的URL。 5. 标题可以使用<h1>到<h6>标签进行定义，其中<h1>是最高级别的标题，而<h6>是最低级别的标题。 6. 列表可以使用<ul>（无序列表）或<ol>（有序列表）标签进行定义。每个列表项使用<li>标签。 7. 超链接可以使用<a>标签创建。通过href属性，您可以指定链接的目标URL。 8. 图像可以使用<img>标签插入到网页中。src属性指定图像的URL，alt属性用于指定在图像无法显示时显示的替代文本。 这只是HTML学习中的一小部分内容，如果你有其他问题或需要更多的学习资源，请随时告诉我。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值