HTML语言知识基础罗列

爱被打了一巴掌 2022-06-01 03:17 265阅读 0赞

今天初学HTML，对于HTML基础语言不清楚的朋友，以下会罗列部门HTML基础知识，以便参考。

主要是给搜索引擎检索这个网页使用的

*  title 标题
 *  keywords 关键词
 *  description 描述

<title>网页的标题</title>
    <meta name="keywords" content="HTML WEB 网页 H5" />
    <meta name="description" content="超文本标记语言,WEB内容显示,HTML基础" />

以下为HTML5各种单双标签的分类，仅供参考。

![SouthEast][]

以下为元素分类

![SouthEast 1][]

特殊字符的代码，想输入此字符，输入右方的代码即可显示。

<table style="margin-bottom:16px;overflow:auto;color:rgb(36,41,46);font-family:'-apple-system', BlinkMacSystemFont, '微软雅黑', 'PingFang SC', Helvetica, Tahoma, Arial, 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, '宋体', Heiti, '黑体', sans-serif;font-size:14px;"> 
 <thead> 
  <tr style="border-top:1px solid rgb(198,203,209);"> 
   <th style="padding:6px 13px;border-color:rgb(223,226,229);">字符</th> 
   <th style="padding:6px 13px;border-color:rgb(223,226,229);">代码</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr style="border-top:1px solid rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">&lt;</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);"><code style="font-family:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;font-size:12px;padding:.2em .4em;margin:0px;background-color:rgba(27,31,35,.05);">&amp;lt;</code></td> 
  </tr> 
  <tr style="background-color:rgb(246,248,250);border-top:1px solid rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">&gt;</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);"><code style="font-family:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;font-size:12px;padding:.2em .4em;margin:0px;background-color:rgba(27,31,35,.05);">&amp;gt;</code></td> 
  </tr> 
  <tr style="border-top:1px solid rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">"</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);"><code style="font-family:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;font-size:12px;padding:.2em .4em;margin:0px;background-color:rgba(27,31,35,.05);">&amp;quot;</code></td> 
  </tr> 
  <tr style="background-color:rgb(246,248,250);border-top:1px solid rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">'</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);"><code style="font-family:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;font-size:12px;padding:.2em .4em;margin:0px;background-color:rgba(27,31,35,.05);">&amp;apos;</code></td> 
  </tr> 
  <tr style="border-top:1px solid rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">&amp;</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);"><code style="font-family:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;font-size:12px;padding:.2em .4em;margin:0px;background-color:rgba(27,31,35,.05);">&amp;amp;</code></td> 
  </tr> 
  <tr style="background-color:rgb(246,248,250);border-top:1px solid rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">×</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);"><code style="font-family:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;font-size:12px;padding:.2em .4em;margin:0px;background-color:rgba(27,31,35,.05);">&amp;times;</code></td> 
  </tr> 
  <tr style="border-top:1px solid rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">空格</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);"><code style="font-family:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;font-size:12px;padding:.2em .4em;margin:0px;background-color:rgba(27,31,35,.05);">&amp;nbsp;</code></td> 
  </tr> 
  <tr style="background-color:rgb(246,248,250);border-top:1px solid rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">©</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);"><code style="font-family:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;font-size:12px;padding:.2em .4em;margin:0px;background-color:rgba(27,31,35,.05);">&amp;copy;</code></td> 
  </tr> 
  <tr style="border-top:1px solid rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">®</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);"><code style="font-family:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;font-size:12px;padding:.2em .4em;margin:0px;background-color:rgba(27,31,35,.05);">&amp;reg;</code></td> 
  </tr> 
  <tr style="background-color:rgb(246,248,250);border-top:1px solid rgb(198,203,209);"> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);">™</td> 
   <td style="padding:6px 13px;border-color:rgb(223,226,229);"><code style="font-family:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;font-size:12px;padding:.2em .4em;margin:0px;background-color:rgba(27,31,35,.05);">&amp;trade;</code></td> 
  </tr> 
 </tbody> 
</table>

如有需要注释，则添加代码

添加链接的代码为 <a href="里面为链接的地址"> </a> ，想打开另一个页面来实现跳转，在后方输入target="\_blank"即可实现。

前期设置字符集编码时，设置为utf-8，否则会极大可能出现乱码。

图片标签<img src="图片的路径" title="" alt="" />其中title属性为图片的名称，alt属性为找不到图片地址时报错。

[SouthEast]: /images/20220601/9cb1e50ae0c844cda03dc4ef6a910848.png
[SouthEast 1]: /images/20220601/482ab6e5d312496c88ac430114145325.png