网页三剑客（HTML+CSS+JavaScript）之HTML

前端

字数统计: 1.6k阅读时长: 6 min

 2020/06/17   Share

HTML是什么？

html是描述网页的一种语言。

HTML 指定的是超文本***标记***语言 (Hyper Text Markup Language)
HTML 不是一种编程语言,而是一种标记语言(Markup Language)
标记语言是一套标记标签
HTML使用标记标签来描述网页

超文本： 
1.普通文本不能实现的超文本可以实现，能实现普通文本不能实现的功能
2.包括超链接的文本
标记： 
标记就是标签，不同的标签能实现不同的功能或者效果。

书写规范

html结构

<html>
  
  <head>
 <!-- 包括页面资讯的信息: 整体的属性 title ，
  指导浏览器解析的标签，引入外部文件的标签-->
  </head>
  <body>
    <br/>
      文本标签
    <br/>
    <font color="red"  size="20">字体<font>
  <!-- body 页面具体展示的内容-->
  </body>

</html>

html标签

是以尖括号包裹的关键字成对出现的

有的开始标签,有结束标签,支持正确的嵌套

大部分标签有属性，格式：属性一=”属性值1”

空标签，功能单一，不需要标签体，可以直接简写为<标签 />

html标签不区分大小写，但是建议小写

基本标签

文件标签（结构标签）

根标签头标签页面的标题 <body> 本文 (只有<body>具有参数设定) <figure class="highlight plain"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 </pre></td><td class="code"><pre>text="#000000" 用以设定文字颜色。 #000000 代表黑色，亦可以采用颜色的名称，即 text="black" 。各种颜色的值及名称可参考【调色原理】一节。 link="#0000FF" 设定一般文字连结颜色。 alink="#FF0000" 设定刚按下时文字链接颜色。 vlink="#0000FF" 设定链接后的颜色。（被按过）。 background="bg1.gif" 设定背景墙纸。GIF 或 JPEG 皆可，可以是绝对途径或相对途径。 bgcolor="#FFFFFF" 设定背景颜色。当己设定背景墙纸时会失去作用，除非墙纸有透明部分。 leftmargin=2 设定整份文件显示画面的左方边沿空间，单位为像素。『只适用于IE』 topmargin=2 设定整份文件显示画面的上方边沿空间。『只适用于IE』 bgproperties="fixed" 固定背景墙纸，当卷动文字时墙纸不会跟著卷动。『只适用于IE』 </pre></td></tr></table></figure> <h4 id="排版标签"><a href="#排版标签" class="headerlink" title="排版标签"></a>排版标签</h4>1、注解标签  2、换行标签 3、段落标签 段落标签(属性 align对齐方式 left、center、right) 4、水平线标签 <hr>(属性:width 长度 size 粗度、color颜色、align 对齐方式、尺寸的写法10px/10% ) <h4 id="行标签"><a href="#行标签" class="headerlink" title="行标签"></a>行标签</h4><a>标签：用来链接一个其它的网页</a> 标签：主要用来对行内的文字进行一些样式以及其他的操作； 标签：一般用来对文字进行强调，使用斜体体现出来； 标签：一般用来对文字进行强调，使用加粗字体体现出来； <img>标签：图片引用标签，其中 src属性中写入图片的地址； <var>标签：JavaScript中命名变量的标签。</var> <h4 id="块标签"><a href="#块标签" class="headerlink" title="块标签"></a>块标签</h4>p标签：段落标签，段落文字使用，默认格式：段尾进行换行； div标签：划分块的主要使用标签； <h4 id="字体标签"><a href="#字体标签" class="headerlink" title="字体标签"></a>字体标签</h4>font ：size 字体大小范围 1-7 不需要写单位大于7默认为7； color 字体的颜色； face 字体的类型！ h1~h6：6级标题标签、字体的大小依次变小。 斜体 下划线 <h4 id="清单标签列表"><a href="#清单标签列表" class="headerlink" title="清单标签列表"></a>清单标签列表</h4>ol有序列表（ type： 1 a A i l li前面的表示类型il罗马字符 start：数字，指的开始的位置 ） ol标签：有序列表的主标签，后面一般跟有序的1,2,3,4,5…； li标签：列表中的主体使用标签 ul无序列表 ul标签：无序列表的主标签，后面的标号为圆点（黑色）； dl标签：自定义标签的主标签； dt标签：自定义标签的表头；可以放置个人简介图片 dd标签：自定义标签的表头的解释（描述）信息 ps–》清单列表定义自定义图片，需要在css中自定义列表的图片 <h4 id="图像标签"><a href="#图像标签" class="headerlink" title="图像标签"></a>图像标签</h4><img src="//hugenye.github.io/2020/06/17/html/图片来源" width=" 只要指定宽度，那么高度会自动按比例缩放" height="”高度“/"> <h4 id="超链接标签"><a href="#超链接标签" class="headerlink" title="超链接标签"></a>超链接标签</h4><a href=”要跳转页面” target=”框窗名称”/> target=”_blank”或“new” – 将连结的画面内容，开在新的浏览视窗中。 target=”_parent”– 将连结的画面内容，当成文件的上一个画面 target=”_self” – 将连结的画面内容，显示在目前的视窗中。 target=”_top” –Html简介将框架中连结的画面内容，显示在没有框架的视窗中。（即除去了框架) <h4 id="表格标签"><a href="#表格标签" class="headerlink" title="表格标签"></a>表格标签</h4><table>是一个容器标记，意思是说它用以声明这是表格而且其他表格标记只能在他的范围内才适用，属容器标记的还有其他。 <tr>用以标示表格列（row） <td>用以标示储存格（cell） <h4 id="表单标签"><a href="#表单标签" class="headerlink" title="表单标签"></a>表单标签</h4><figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 </pre></td><td class="code"><pre><form action="表单数据获取的接口" method="POST">  <input type="Text" name="age" value="20" align="MIDDLE" size="2" maxlength="255" />  <input type="Radio" name="gender" value="female" align="MIDDLE" checked>  <input type="Checkbox" name="idol" value="Leon" align="RIGHT" checked>  <input type="Submit" name="other_funtion" value="确定" align="MIDDLE"> <input type="Reset" value="清除" align="MIDDLE"> <input type="Image" name="submit" align="BOTTOM" src="ex_icon.gif">  <input type="File" name="upload" align="BOTTOM" size="20" maxlength="100" accept="text/html">  <input type="Hidden" name="ID" value="6618">  <input type="Button" name="useless" value="Back">  <select name="where"> <option value="hk">Hong Kong</option> <option value="tw" selected>Taiwan</option> <option value="cn">China</option> <option value="us">United States</option> <option value="ca">Canada</option> </select>  <textarea name="comments" cols="40" rows="4"> </form> </pre></td></tr></table></figure> <h4 id="多媒体标签"><a href="#多媒体标签" class="headerlink" title="多媒体标签"></a>多媒体标签</h4><h4 id="框架标签"><a href="#框架标签" class="headerlink" title="框架标签"></a>框架标签</h4>frameset ：属性：cols按比例分水平线 rows 按行分垂直 <h4 id="其他标签"><a href="#其他标签" class="headerlink" title="其他标签"></a>其他标签</h4><figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 </pre></td><td class="code"><pre><meta charset="utf-8" /> 字符格式 网站查询的关键字 <meta name="keywords" content="keyword1,keyword2,keyword3"> 网站的介绍 <meta name="description" content="this is my page"> link 引入 rel 样式表 <link rel="stylesheet" type="text/css" href="./styles.css"> </pre></td></tr></table></figure> 特殊字符： ® 注册符号 &nbsp 空格 <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 </pre></td><td class="code"><pre>&nbsp 空格 &gt 大于 &lt 小于 &copy 版权符号 ® 注册符号 </pre></td></tr></table></figure> </td></tr></table></body></body>

原文作者：Hugenye

原文链接：http://hugenye.github.io/2020/06/17/html/

发表日期：June 17th 2020, 9:24:28 am

更新日期：August 19th 2020, 4:40:35 pm

Next Post

网页三剑客之CSS
Previous Post

vue

CATALOG

1. HTML是什么？
2. 书写规范



缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是archer根目录）执行以下命令：
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: true
    tags: true