HTML学习笔记

最新推荐文章于 2024-11-01 15:19:31 发布
最新推荐文章于 2024-11-01 15:19:31 发布
阅读量156 收藏
点赞数
分类专栏： 乱七八糟 文章标签： html 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44887198/article/details/132034522
版权

1、常见状态码

200 ：成功。
400 ：客户端请求有语法错误，服务器端不能理解。
401 ：该请求可能未经过授权。
403 ：服务器端收到该请求，但是拒绝为它提供服务，可能是没有权限等等。
404 ：该资源没找到。
500 ：服务器端发生了一个不可预知的错误。
503 ：服务器端当前还不能处理客户端的这个请求，可能过段时间之后才能恢复正常。

2、注释

<!-- 在此处写注释 -->

3、HTML常见的标签

<!-- 双标签 -->

<h1></h1> <!-- 标题标签有六种 h1，h2，h3，h4，h5，h6 -->

<title></title>

<p></p> <!-- 段落标签 -->

<div></div> <!-- 块级元素，浏览器会自动在 <div> 和 </div> 所标记的区域前后自动放置一个换行符。 -->

<span></span> <!-- 内联元素，默认显示在同一行。 -->

<a></a> <!-- 超链接标签 -->

<ul></ul>

<!-- 单标签 -->

<br /> <!--换行-->

<hr /> <!--水平分隔线-->

<meta />

<img /> <!-- 图片标签 -->

<!-- 空格字符：&nbsp; -->

4、HTML列表

<!-- HTML 列表分为：有序列表（ol），无序列表（ul）以及自定义列表（dl）。 -->

<p>无序列表</p>
<ul type="circle">
  <li>空心圆列表项1</li>
  <li>空心圆列表项2</li>
</ul>

<p>有序列表</p>
<ol type="A">
  <li>列表项1</li>
  <li>列表项2</li>
</ol>

<!-- 
<ul> 标签的 type 属性：
  值	       备注
disc（默认）   实心圆
circle	      空心圆
square	      小方块 
-->

<!-- 
<ol> 标签的 type 属性：
值	                备注
1（默认）	数字表示（1，2，3...)
A	        大写字母表示（A,B,C...)
a	        小写字母表示（a,b,c...)
I	        大写罗马数字表示(I,II,III…)
i	        小写罗马数字表示(i,ii,iii…) 
-->

<!-- 自定义列表（dl）语法格式 -->
<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  ...
</dl>

5、HTML样式

<html>
  <body>
    <p style="background-color:red">实验楼</p>
  </body>
</html>

<!-- 通过对 "background-color" 属性值的设置来给背景设置颜色。 -->
<!-- 通过对 font-family 属性值的设置来设置字体。 -->
<!-- 通过对 color 属性值的设置来设置颜色。 -->
<!-- 通过对 font-size 属性值的设计来设计字体大小。 -->
<!-- 通过对 text-align 属性值的设计来设计字体大小。 -->

6、表格

<table border="1" width="300px" height="150px" cellspacing="0px" cellpadding="20px">
    <!-- 表格标题 -->
    <caption>
        支出表
    </caption>
    <!-- 每个表格均有若干行（由 <tr> 标签定义） -->
    <tr>
    <!-- 表格的表头使用 <th> 标签进行定义 -->
        <th>支出</th>
        <th>备注</th>
        <th rowspan="3">合并该列上的三个单元格</th>
    </tr>
    <tr>
    <!-- 每行被分割为若干单元格（由 <td> 标签定义） -->
        <td>32</td>
        <td>买苹果</td>
    </tr>
    <tr>
        <td>24</td>
        <td>买饮料</td>
    </tr>
    <tr>
        <td colspan="3">合并该行上的三个单元格</td>
    </tr>
</table>

<!-- cellspacing：设置单元格与单元格之间的距离，默认为2px -->
<!-- cellpadding：设置文字与单元格之间的距离，默认为1px -->
<!-- width：设置表格的宽度 -->
<!-- height：设置表格的高度 -->
<!-- bgcolor：设置背景颜色 -->
<!-- border：设置表格的边框 -->

7、表单

<form> 标签用于创建 HTML 表单，常见的表单格式为：

<form name="" method="" action=""></form>

name：定义表单的名字。
method：定义表单结果从浏览器传送到服务器的方式，默认参数为：get 。post 安全性更高，因此常用作传输密码等，而 get 安全性较低，一般用于查询数据。
action：发送数据要去的地址。它的值必须是一个有效的 URL，可以是相对 URL 也可以是绝对 URL。如果没有提供此属性或者 action="#"，则数据将被发送到包含表单的页面的 URL。

<!-- 文字字段 -->
<input
  type="text"
  name="控件名称"
  value="文字字段的默认取值"
  size="控件的长度"
  maxlength="最长字符数"
/>

<!-- 密码输入框 -->
<input type="password" name="pwd" />

<!-- 单选按钮 -->
<form name="formBox" method="post" action="">
  <input type="radio" name="sex" value="male" checked />男<br />
  <input type="radio" name="sex" value="female" />女
</form>

<!-- 复选框 -->
<form name="formBox" method="post" action="">
  <input type="checkbox" name="music" checked />音乐<br />
  <input type="checkbox" name="art" />美术<br />
  <input type="checkbox" name="math" />数学<br />
</form>

<!-- 提交按钮：用于发送表单数据给服务器。 -->
<form name="formBox" method="post" action="">
  <input type="text" value="输入的内容" />
  <button type="submit">This a submit button</button>

  <!--or-->

  <input type="submit" value="This is a submit button" />
</form>

<!-- 重置按钮：用来清除用户在页面中输入的信息。 -->
<form name="formBox" method="post" action="">
  <input type="text" />
  <button type="reset">This a reset button</button>

  <!--or-->

  <input type="reset" value="This is a reset button" />
</form>

<!-- 匿名按钮（button） -->
<button type="button">This a anonymous button</button>

<!--or-->
<button>This a anonymous button</button>

<!--or-->
<input type="button" value="This is a anonymous button" />

<!-- 下拉菜单 -->
<form name="formBox" method="post" action="">
  <select name="select"> <!-- size="2" 表示一次显示 2 条数据。 -->
    <option value="成都">成都</option>
    <option value="广州">广州</option>
    <option value="四川">四川</option>
    <option value="上海">上海</option>
  </select>
</form>

<!-- 文本域 -->
<form name="formBox" method="post" action="">
  留下您的联系方式：
  <textarea name="textarea" cols="35" rows="5"></textarea>
</form>
<!-- cols 代表列数，rows 代表行数。 -->

8、插入图像

<img
  src="https://labfile.oss.aliyuncs.com/courses/1236/coder.jpg"
  alt="程序员"
  title="你好啊"
  width="700px"
  height="600px"
/>

<!-- src 的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。 -->
<!-- alt 规定图像的替代文本即当图片未成功显示的时候显示的文本信息。 -->
<!-- title 设置鼠标悬停时显示的内容（一般不用设置）。 -->
<!-- 设置 width 和 height 的值来设置图片的宽和高。 -->
<!-- 上一级文件夹：../ -->
<!-- 上两级，则需要使用 ../ ../ -->

9、HTML5表单元素

<!-- 
datalist 元素用于为文本框提供一个可供选择的列表，
使用 datalist 元素来为表单小部件提供建议的、自动完成的值，
并使用一些 option 子元素来指定要显示的值。
然后使用 list 属性将数据列表绑定到一个文本域(通常是一个 <input> 元素)。 
-->

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <label for="myColor">What's your favorite color?</label>
    <input type="text" name="myColor" id="myColor" list="mySuggestion" />
    <datalist id="mySuggestion">
      <option>black</option>
      <option>blue</option>
      <option>green</option>
      <option>red</option>
      <option>white</option>
      <option>yellow</option>
    </datalist>
  </body>
</html>
<!-- or -->
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <label for="myColor">What's your favorite color?</label>
    <input type="text" name="myColor" id="myColor" list="mySuggestion" />
    <datalist id="mySuggestion">
      <option value="black"></option>
      <option value="blue"></option>
      <option value="green"></option>
      <option value="red"></option>
      <option value="white"></option>
      <option value="yellow"></option>
    </datalist>
  </body>
</html>

10、HTML5 表单新增的属性

<!-- autocomplete 属性规定表单是否应该启用自动完成功能：
自动完成允许浏览器预测对字段的输入，当用户在字段开始键入时，
浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
当 autocomplete 属性值为 on 时表示启用自动完成功能，为 off 时表示关闭。
autocomplete 属性适用于 <form>，以及下面的 <input> 类型：
text, search, url, telephone, email, password, datepickers, range 以及 color。 -->
<body>
  <form action="#" method="get" autocomplete="on">
    Name:<input type="text" name="name" /><br />
    E-mail: <input type="email" name="email" autocomplete="off" /><br />
    <input type="submit" value="提交" />
  </form>
</body>

<!-- autofocus 属性规定在页面加载时，域自动地获得焦点。适用于所有 <input> 标签的类型。 -->
<body>
  <form action="#" method="get">
    Name：<input type="text" name="user_name" autofocus="autofocus" /><br />
    <input type="submit" value="提交" />
  </form>
</body>

<!-- form 属性规定输入域所属的一个或多个表单。
form 属性适用于所有 <input> 标签的类型。
form 属性必须引用所属表单的 id。 -->
<body>
  <form action="#" method="get" id="user_form">
    First name:<input type="text" name="fname" />
    <input type="submit" value="提交" />
  </form>

  <p>
    下面的输入域在 form 元素之外，但仍然是表单的一部分， 也就是说提交按钮会把
    first name 和 last name的值都提交。
  </p>

  Last name: <input type="text" name="lname" form="user_form" />
</body>

<!-- multiple 属性规定输入域中可选择多个值，适用于以下类型的 <input> 标签：email 和 file。 -->
<body>
  <form action="#" method="get" id="user_form">
    选择文件: <input type="file" name="file" multiple="multiple" />
    <input type="submit" value="提交" />
  </form>
</body>

<!-- novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
适用于 <form>，以及下面的 <input> 类型：
text, search, url, telephone, email, password, datepickers, range 以及 color。 -->
<body>
  <form action="#" method="get" id="user_form" novalidate="true">
    E-mail: <input type="email" name="user_email" />
    <input type="submit" value="提交" />
  </form>
</body>

<!-- pattern 属性规定用于验证 input 域的模式（pattern）。
模式（pattern） 是正则表达式。pattern 属性适用于以下类型的 <input> 标签：
text, search, url, telephone, email 以及 password。 -->
<body>
  <form action="#" method="get">
    Name:
    <input type="text" name="name" pattern="[A-z]{4}" title="请输入四个字母" />
    <input type="submit" value="提交" />
  </form>
</body>

<!-- placeholder 属性提供一种提示（hint），描述输入域所期待的值。
适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失。 -->
<body>
  <form action="#" method="get">
    <input type="search" name="user_search" placeholder="实验楼" />
    <input type="submit" value="提交" />
  </form>
</body>

<!-- required 属性规定必须在提交之前填写输入域（不能为空）。
适用于以下类型的 <input> 标签：
text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。 -->
<body>
  <form action="#" method="get">
    <input type="search" name="user_search" required="required" />
    <input type="submit" value="提交" />
  </form>
</body>

11、HTML5 输入类型

<!-- email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。 -->
<body>
  <form action="#" method="get">
    E-mail: <input type="email" name="user_email" /><br />
    <input type="submit" value="提交" />
  </form>
</body>

<!-- url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。 -->
<body>
  <form action="#" method="get">
    Url: <input type="url" name="user_url" /><br />
    <input type="submit" value="提交" />
  </form>
</body>

<!-- number 类型用于应该包含数值的输入域。
属性 max 设定允许输入的最大值，属性 min 设定允许输入的最小值，
属性 value 设定默认值，属性 step 设定合法的数字间隔（比如 step 的值为 2，则合法的数字为 -2,0,2,4 等）。 -->
<body>
  <form action="#" method="get">
    number：<input
      type="number"
      name="points"
      min="0"
      max="10"
      step="2"
      value="2"
    /><br />
    <input type="submit" value="提交" />
  </form>
</body>

<!-- range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
同样的 range 也有 max，min，value，step 属性与上面所讲的 number 中的一致。 -->
<body>
  <form action="#" method="get">
    range:
    <input
      type="range"
      name="points"
      min="1"
      max="10"
      value="2"
      step="2"
    /><br />
    <input type="submit" value="提交" />
  </form>
</body>

<!-- HTML5 拥有多个可供选取日期和时间的新输入类型：
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）注意：此类型已被弃用，目前大多数浏览器都不再支持。
datetime-local - 选取时间、日、月、年（本地时间） -->
<body>
  <form action="#" method="get">
    Date: <input type="date" name="user_date" /><br />
    <input type="submit" value="提交" />
    <br /><br />
    Month: <input type="month" name="user_month" /><br />
    <input type="submit" value="提交" />
  </form>
</body>

<!-- color 类型用于选择颜色。 -->
<body>
  <form action="#" method="get">
    <input type="color" name="colordemo" />
    <input type="submit" value="提交" />
  </form>
</body>

12、HTML5 Canvas API

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小。默认的画布的高度是 150px，宽度是 300px。-->
    <canvas id="mycanvas" style="width:200;height:100">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      // 通过document.getElementById来找到id为myCanvas的元素
      var myCanvas = document.getElementById("mycanvas");
      // 获取允许进行绘制的 2D 环境。
      var ctx = myCanvas.getContext("2d");
      //设置颜色
      ctx.fillStyle = "red";
      //设置矩形的位置和尺寸（位置从 左上角原点坐标开始，尺寸为100*100的矩形）
      ctx.fillRect(0, 0, 100, 100);
    </script>
  </body>
</html>

注意：进行绘制时，需要指定确定的坐标位置，坐标原点(0,0)位于 canvas 的左上角，
x 轴水平方向向右延伸，y 轴垂直向下延伸。

strokeStyle：设置或返回笔的颜色、渐变或模式。默认值为：#000000。

lineWidth：设置或返回当前的线条宽度 ，以像素计。

beginPath()：起始一条路径，或重置当前路径。

closePath()：创建从当前点回到起始点的路径。

moveTo()：把路径移动到画布中的指定点，不创建线条。

lineTo()：添加一个新点，然后在画布中创建从该点到最后指定点的线条。

stroke()：绘制已定义的路径。

使用 rect() 方法创建矩形。语法为：
ctx.rect(x,y,width,height);
参数说明：
x 表示矩形左上角的 x 坐标。
y 表示矩形左上角的 y 坐标。
width 表示矩形的宽度，以像素计。
height 表示矩形的高度，以像素计。
注：使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
      对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
      //获取canvas元素
      var myCanvas = document.getElementById("mycanvas");
      //获取Context上下文
      var ctx = myCanvas.getContext("2d");
      //绘制矩形
      ctx.rect(10, 10, 100, 200);
      //绘制已定义的路径
      ctx.stroke();
    </script>
  </body>
</html>

使用 strokeRect() 方法绘制矩形（不填色）。笔触的默认颜色是黑色。语法为：
ctx.strokeRect(x, y, width, height);
注：参数与 rect() 方法一致，唯一的区别是这里不需要再加一句 stroke() 或 fill() 方法。无法填色。

使用 fillRect() 方法创建实心矩形。语法为：
ctx.fillRect(x, y, width, height);
注：参数说明与前面一致，默认的填充颜色为黑色，可以使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。

使用 clearRect() 方法清空给定矩形内的指定像素。语法为：
ctx.clearRect(x, y, width, height);
注：参数说明与前面一致。

使用 arc() 方法绘制圆或者椭圆。语法为：
ctx.arc(x, y, r, sAngle, eAngle, counterclockwise);
参数说明：
x 表示圆的中心的 x 坐标。
y 表示圆的中心的 y 坐标。
r 表示圆的半径。
sAngle 表示起始角，以弧度计（特别需要注意的是弧的圆形的三点钟位置是 0 度而不是常规以为的 90 度）。
eAngle 表示结束角，以弧度计。
counterclockwise 表示绘制圆的方向，值为 false 表示顺时针，为 true 表示逆时针。是一个可选值，默认值是 false。

使用 fillStyle 属性，设置或返回用于填充绘画的颜色、渐变或模式。语法为：
ctx.fillStyle = color | gradient | pattern;
参数说明：
color 表示绘图填充的颜色。默认值是 #000000。
gradient 表示用于填充绘图的渐变对象（线性或放射性）。
pattern 表示用于填充绘图的 pattern 对象。

使用 createLinearGradient() 方法创建线性渐变。语法为：
ctx.createLinearGradient(x0, y0, x1, y1);
参数说明：
x0 表示渐变开始点的 x 坐标。
y0 表示渐变开始点的 y 坐标。
x1 表示渐变结束点的 x 坐标。
y1 表示渐变结束点的 y 坐标。

使用 addColorStop() 方法规定渐变对象中的颜色和停止位置。语法为：
gradient.addColorStop(stop, color);
参数说明：
stop 表示渐变中开始与结束之间的位置。是介于 0.0 与 1.0 之间的值。
color 表示在结束位置显示的 CSS 颜色值。

使用 createRadialGradient() 方法创建放射状/环形的渐变。语法为：
ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
参数说明：
x0 表示渐变的开始圆的 x 坐标。
y0 表示渐变的开始圆的 y 坐标。
r0 表示开始圆的半径。
x1 表示渐变的结束圆的 x 坐标。
y1 表示渐变的结束圆的 y 坐标。
r1 表示结束圆的半径。

使用 fill() 方法填充当前的图像（路径）。默认颜色是黑色。填充另一种颜色/渐变使用 fillStyle 属性。
语法为：
ctx.fill();
注：如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。

使用 fillText() 方法在在画布上绘制实心文本。语法为：
ctx.fillText(text, x, y, maxWidth);
参数说明：
text 规定在画布上输出的文本。
x 表示开始绘制文本的 x 坐标位置（相对于画布）。
y 表示开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth 表示允许的最大文本宽度，以像素计。可选。

使用 strokeText() 方法在画布上绘制空心文本。语法为：
ctx.strokeText(text, x, y, maxWidth);
注：参数说明与 fillText() 方法一致。

使用 font 属性设置或返回画布上文本内容的当前字体属性。font 属性使用的语法与 CSS font 属性相同。

使用 textAlign 属性设置或返回文本内容的当前对齐方式。语法为：
ctx.textAlign = "center|end|left|right|start";
参数说明：
start 默认值，表示文本在指定的位置开始。
center 表示文本的中心被放置在指定的位置。
end 表示文本在指定的位置结束。
left 表示文本左对齐。
right 表示文本右对齐。

textBaseline 属性设置或返回在绘制文本时的当前文本基线。语法为：
ctx.textBaseline = "alphabetic|top|hanging|middle|ideographic|bottom";
参数说明：
alphabetic 表示文本基线是普通的字母基线。默认值。
top 表示文本基线是 em 方框的顶端。
hanging 表示文本基线是悬挂基线。
middle 表示文本基线是 em 方框的正中。
ideographic 表示文本基线是表意基线。
bottom 表示文本基线是 em 方框的底端。

使用 drawImage() 方法在画布上绘制图像、画布或视频。drawImage() 方法也能够绘制图像的某些部分，或增加或减少图像的尺寸。
canvas 绘制图片的基本格式为：
//创建一个图片对象
var image = new Image();
//设置图片的路径
image.src = "xxx";
//当图片加载完成后
image.onload = function () {
  //绘制图片
  ctx.drawImage();
};

语法 1，在画布上定位图像：
ctx.drawImage(img, x, y);

语法 2，在画布上定位图像，并规定图像的宽度和高度：
ctx.drawImage(img, x, y, width, height);

语法 3，剪切图像，并在画布上定位被剪切的部分：
ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
参数说明：
img 规定要使用的图像、画布或视频。
sx 表示开始剪切的 x 坐标位置。可选值。
sy 表示开始剪切的 y 坐标位置。可选值。
swidth 表示被剪切图像的宽度。可选值。
sheight 表示被剪切图像的高度。可选值。
x 表示在画布上放置图像的 x 坐标位置。
y 表示在画布上放置图像的 y 坐标位置。
width 表示要使用的图像的宽度（伸展或缩小图像）。可选值。
height 表示要使用的图像的高度，（伸展或缩小图像）。可选值。
ぃ咔哇依°ヽ
关注
专栏目录
html学习笔记
06-22
### HTML学习笔记 #### 一、属性 **1. `contenteditable` 属性** - **定义**: `contenteditable` 属性用于指定一个元素的内容是否可以被用户编辑。 - **值**: - `true`: 表示元素内容可编辑。 - `false`: 表示...
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 学习笔记语法大全！ 适合初学者
基于Dockerfile构建的HTML学习笔记设计源码
10-03
本项目是一个基于Dockerfile构建的HTML学习笔记设计源码集合，包含204个文件，涵盖85个Markdown文件、37个PNG图片、31个JPG图片、18个Xmind思维导图、14个draw.io图表、4个JSON文件、2个XML文件、2个CMD脚本和2个...
个人HTML学习笔记.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
HTML学习笔记–HTML的语法详解(必看)
12-14
... ...格式：<标记>内容</标记> 3.标记的属性（用来控制图像、文本等如何的显示）格式：<标记 属性1=属性值 属性2=属性值…>内容<...都是定义相同的标记，但是在编写网页的使用尽量...以上这篇HTML学习笔记–HT
web前端HTML学习笔记
08-30
前端笔记HTML部分
前端三件套html学习笔记
02-24
本人html学习笔记，方便遗忘后查找
html学习笔记1 基础标签
05-25
HTML 学习笔记 1 - 基础标签 HTML（HyperText Markup Language）是一种超文本标记语言，用于创建网页的标记语言。以下是 HTML 学习笔记 1 - 基础标签的知识点总结。 声明标签 * `<!DOCTYPE html>`：声明 HTML ...
HTML 基础标签——元数据标签 ＜meta＞
最新发布
Allen-
11-01 203
标签通常位于文档的部分。它用于定义文档的元数据，包括字符编码、文档描述、关键字、作者信息等。这些信息可以帮助浏览器正确解析和显示文档，同时还可以提供搜索引擎索引所需的信息。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 2064
【代码】炫酷的登录框!(附源码)
HTML小阶段二维表和思维导图
2301_79075752的博客
10-29 915
下面是对标签、元素、属性的对比二维表，通过对比3w1h（what是什么、where用在哪、why为什么要用、how如何用）来学习区分学习标签、元素、属性标签元素属性what（Tags）标签是用来标记内容块或标明元素内容意义（Element）网页内容是由元素组成的，一个元素通常由一个开始标签、内容、其他元素及一个结束标签组成。（Attribute）与元素相关的特性，用于提供额外的信息或配置选项。where开始标签：位于元素的开头，用于标记一个元素的开始。
Html编写发射粒子爱心
m0_58419490的博客
10-31 903
【代码】Html编写发射粒子爱心。
HTML入门教程22：HTML文件路径
软考鸭
10-30 545
相对路径是相对于当前HTML文件所在位置的路径。它不会包含协议、域名或完整的文件路径，而是根据当前文件与目标文件之间的相对位置来确定路径。
[Vue warn]: Do not use built-in or reserved HTML elements as component id:
weixin_42220130的博客
10-29 467
在Vue中，组件的ID应该是唯一的，以确保没有冲突。很可能是一个保留字或者是一个内置的HTML元素名称，所以Vue拒绝了这样的用法。如果你正在使用Vue 2.x版本，确保全局ID的唯一性，如果是在Vue 3.x中，则应该使用一个独一无二的name属性代替ID。更改组件的ID，使用一个独一无二的名称，确保它不是一个内置的HTML元素名称，也不是Vue的保留字。在这个例子中，my-custom-component就是一个不会与内置HTML元素冲突的组件ID。
HTML学习笔记：从基础到实践
本资源是一个个人编写的HTML学习笔记，涵盖了HTML的基本概念、历史演变、常用编辑器以及基本结构和标签。HTML，全称为超文本标记语言，是一种用于创建网页的标准标记语言，它能描述网页的结构并嵌入文字、图形、动画...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值