基础语法

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<sub>下标</sub>
<sup>上标</sup>
<font face="宋体" size="1" color="#003366">字体字形字号以及颜色</font>
<h1 align="center">标题1居中对齐</h1>
<h2 align="left">标题2居左对齐</h2>
<h3 align="right">标题3居右对齐</h3>
<h4>标题4(不写默认左对齐)</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p>段落</p>
<br>换行
<pre>以代码中的原格式效果显示</pre>
<div>块内元素(后面隐藏带有换行符)(全宽)</div>
<span>行内元素(无固定宽度)</span>
<ol type="A"(type决定有序列表类型)>有序列表<li>1</li><li>2</li><li>3</li></ol>
<ul type="disc/circle/square"(type决定无序列表类型)>无序列表<li>·</li><li>·</li><li>·</li></ul>
<pre></pre>标签:显示内容与原格式相同
<select name="sel">
<optgroup label="下拉选项">
<option value="1">1</option>
<option value="2">2</option>
</optgroup>
</select>
<p>多行文本<br>
<textarea cola="50" rows="5">
</textarea>
</p>
<img src="文件名" alt="找不到目标文件后显示的文字" width="200" height="100">

链接标签

<a href="url">显示的文本或图像</a>
<a href="xx.zip">下载压缩文件</a>
<a href="mailto:XXX@XXX.com">发邮件</a>
<a name="锚点名">目标内容</a>
<a href="#锚点名">超链接文本或图像</a>
<a href="url" target="_self">当前窗口打开</a>
<a href="url" target="_blank">新窗口打开</a>

表格标签

<from action="html_forn_action.php" method="post">
<p>账号:<input type="text" name="user"></p>
<p>密码:<input type="password" name="password"></p>
<p><input type="submit" value="提交"></p>
<p><input type="reset" value="重置"></p>
<p>单选:<input type="radio" name="xxx" value="1">1
<input type="radio" name="xxx" value="2">2</p>
<p>多选:<input type="checkbox" name="xxx" value="1"><input type="checkbox" name="xxx" value="2"></p>
</from>

空格代码

  :一个字符的半角的不断行的空格,如果需要在网页中插入多个空格,可以将“ ”代码写多遍;

  :一个字符的半角的空格,也可以将“ ”写多遍来插入多个空格;

  :两个字符的全角的空格,也可以将“ ”写多遍来插入更多的空格;

  :小于一个字符的空格;

路径说明

绝对路径:通信协议名+服务器名+路径及文件名的完全路径

相对路径:指向相同目录:文件名;
          指向子目录:/目标文件/文件名;
          指向上级文件:../上一级目录/文件名;

表格标签

<table>标签:每一个表格只有一对<table>和 </table>,—张页面中可以有多个表格,表格可以嵌套。
width="100%" height="100%" 定义宽和高 border="0"定义边框 cellspacing="3"单元格之间空格
<tr>标签:定义表格的行,一个表格可以有多行。
<td>标签:定义表格的一个单元格。每行可以有不同数量的单元格。

多媒体

<video src="" controls="controls"播放 width="500" height="500" 定义宽和高 preload="auto"
muted静音 autoplay="autoplay"自动播放 loop="loop"循环播放poster=""视频图片>视频
<source src="video.ogg" type="video/ogg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
您的浏览器不支持此标签</video>
<audio src="" controls="controls"播放 preload="auto" muted静音 autoplay="autoplay"自动播放 
loop="loop"循环播放>音频

语义标签

<details (open默认打开)><summary>可见部分</summary>隐藏部分</details>
<figure>标签规定独立的流内容(图像、图表、照片、代码等等)<figcaption>图片名</figcaption></figure>
<mark>高亮部分</mark>
<meter value="2" min="0" max="10">2/10</meter>
<progress value="20" max="100">20/100</progress>
<ruby>汉字<rt>hanzi</rt>拼音<rt>pinyin</rt></ruby>
<wbr></wbr><time></time><dialogue></dialogue><command></command>

image.png

canvas画布

<canvas id="myCanvas" width="600" height="300" style="border:1px solid #c3c3c3;">
浏览器不支持canvas画布
</canvas>
<script type="test/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,300,150);
</script>
<script type="test/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.moveTo(10,290);
    cxt.lineTo(60,190);
    cxt.lineTo(110,230);
    cxt.lineTo(180,150);
    cxt.stoke();
</script>
Last modification:July 21, 2023
如果觉得我的文章对你有用,请随意赞赏