前端技术HTML

1、HTML简介   2、HTML常用规则  3、常用操作技巧   4、html特殊符号

 

1、HTML简介

超文本标记语言 (Hyper Text Markup Language)。是用来描述网页的一种语言，可以简单理解为浏览器所能识别的一套格式规则。HTML是通过标记标签来实现的标记语言。HTML文档在经过浏览器编译后即以网页形式呈现。

html是能够实现向后兼容的，就是，html5，是能够实现对html4内容的识别的编译的。

 

html中各种标签的主要作用

 

常见概念：

标签

空白折叠

 

 

2、HTML常用规则

  • HTML编辑过程中，尽量做到内容、样式、动作事件相分离
  • doctype 文件对应关系
    • doctype 是document type 的缩写，用来声明标记语言的文档类型，不属于HTML标签。一般都会放在HTML文档的第一行，html标签之前，如果dotype标签前出现其他内容，会导致网页的呈现出现不确定性。
  • html标签（每个html文件中只能有一个html标签），标签内部写属性。通过<html></html>限定了html文档的开始和结尾。
  • 注释：<!--     需要注释的内容       -->
  • 闭合标签（双闭合标签）：在标签的组成中，有开始标签，结束标签两部分。双闭合标签都是成对出现的。 注意，有些标签例如<li>虽然在使用中不加结束标签</li>不会直接报错，但建议对于这种标签，一律加上结束标签。
  • 自闭合标签：标签中只有开始标签，没有结束标签。                                    建议在书写过程中标签最后，加上 "/"   例如<meta />。XHTML最为严格，必须在自闭合标签中添加"/"。在HTML4.01中，不推荐在自闭合标签中添加“/”。而HTML5最宽松，填不添加都符合规范。
  • 元素一般情况下可以简单分为块级元素、行内元素。其中行内元素又可以分出行内块元素（行内块元素本质上是行内元素，只不过能够对其进行长款等属性设置例如，input、img）。
  • 块级标签（块元素、块级元素）：主要用于搭建网站架构、布局、承载内容等。
    • 主要特点：都是作用在body中，默认情况下（即没有CSS等控制的情况下）总是在新行开始独占一行，可以设置高度、宽度、边距等，在不设定宽度的情况下默认完全占据父级标签的宽度空间，可以容纳行内标签和其他块级标签。可以通过display，更改为inline
    • 需要注意的是，在HTML5中，元素的分类不再是块元素或内联元素这样来分类（其实从来就没有这样分），而是按照如下分类来分：Flow（流式元素）、Heading（标题元素）、Sectioning（章节元素）、Phrasing（段落元素）、Embedded（嵌入元素）、Interactive（交互元素）、Metadata（元数据元素）。
    • 常见的块级标签：

      • 标签类型

        简介

         div

         块级大白板，常用块级容器，也是css layout的主要标签

         form

         交互表单

        h族（h1-6）

        1至6级标题，h1到h6是从大到小

        ol

         列表（排序）

        ul

        列表（非排序）

         p

         段落 ,注意,p标签在内容为长单词/拼音 的时候,内容超过固定宽度,不会自动换行.中文等文本会自动换行

         pre

         格式化文本

         table

         表格

         address

         地址

         blockquote

         块引用

         center

         居中对齐块

         dir

         目录列表

         dl

         定义列表

         fieldset

         form控制组

         hr

         水平分隔线

         isindex

         input prompt

         menu

         菜单列表

         noframes

         frames可选内容，（对于不支持frame的浏览器显示此区块内容）

         noscript

         可选脚本内容（对于不支持script的浏览器显示此内容）

         

  • 行内标签（内联标签、内联元素、内嵌元素、行内元素、直进式元素等）：常见在网站内容之中的某些细节或部位，用以“强调、区分样式、上标、下标、锚点”等等。默认是不能设置高度，宽度，边距的，并且都是一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。
    • 主要特点：都是作用在body中，默认情况下（没有css等控制情况下），在行内自左向右依次排列，不能设置高度、宽度、边距等属性，宽度就是文字或图片本身的宽度，其内部只能在容纳行内标签或者文本内容。
    • 常见的行内标签：

      • 标签类型

        简介

        span

        行内大白板， 常用内联容器，定义文本内区块

         a

         超链接、锚点

         br

         换行

         img

         行内块元素，可以设置宽高。图片引用于定义

         input系列

         行内块元素，可以设置宽高。定义按钮、输入框等交互元素

        textarea

        多行文本输入框

        select

        选择框

         label

         点击后，用于光标定向的标签

         abbr

         缩写

         acronym

         首字

         b

         粗体(不推荐)

         bdo

         bidi override

         big

         大字体

         cite

         引用

         code

         计算机代码(在引用源码的时候需要)

         dfn

         定义字段

         em

         显示效果为斜体，功能是强调

         i

         斜体

         kbd

         定义键盘文本

         q

         短引用

         s

         中划线(不推荐)

         samp

         定义范例计算机代码

         small

         小字体文本

        strike

         中划线

         strong

         粗体强调

         sub

         下标

         sup

         上标

         tt

         电传文本

         u

         下划线

         var

         定义变量

 

  • 标签的嵌套：
    • 主要的嵌套规则
      • 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素
      • p标签、h族标签、dt标签中不能再嵌套其他块级标签，只能嵌套内联标签
      • a标签中不能再嵌套a标签
  • 标签的属性：
    • 常用属性
      • name
      • id 是不能重复的，否则在运行过程中会出错
      • class 设置类
      • lable 
      • style ——》在标签内直接进行CSS设置　　
    • 常用自定义属性
      • 用户登录场景常用
        • 用户名验证
          • require="true";     "false"
          • Field="string";
          • range="3-20";
        • 用户密码验证
          • min-len="8";
          • 密码双输入验证，需要确认验证     confirm-to="验证对象标签名字"
        • 手机验证
          • mobile="true";
  • head标签：页面控制
    • 闭合标签 <head>  </head>
    • lang=“ ” 全局的语言属性，lang=“en”表示全局英文 ；lang=“zh” 全局中文
    • 常见包含的标签有titile标签、meta标签、link标签、style标签
  • title标签： 
    • 闭合标签 <title>  </title>
    • meta标签 ：定义页面
    • 自闭合标签  <meta />
    • charset 定义编码格式
    • http-equiv 定义刷新、自动跳转
    • http-equiv ="X-UA-Compatible" content="IE=IE9;IE=IE8;IE=EmulstaIE7"  IE的兼容设置
    • name="keywords" content = "  "  定义网页的关键字，用于搜索引擎抓取网页
    • name =“description” content = "  "  定义网站的描述信息
  • link标签：用于当前文档引用外部文档用的，rel是relationship的英文缩写，rel属性，必需，用于设置对象和链接目的间的关系。href,指向链接的路径，type指明了链接文档的MIME类型
    • 自闭合标签 <link /> 
    • rel="stylesheet" href = "路径"   引入定义好的CSS样式文件
    • rel="stylesheet" 描述了当前页面与href所指定文档的关系。即说明href连接的文档是一个样式表。stylesheet中style是样式的意思,sheet是表格之意,总起来是样式表的意思。
    • rel="shortcut icon"  href="路径"    定义网站标签的小图标
  • style标签：用于定义样式，给html引入定义的css样式，常见于通过选择器给选定的标签附上指定的样式
    • 常用属性
      • type = "text/css"

 

 

 

 

  • body标签：网页内容
    • 闭合标签 <body> </body>
    • body标签中，默认有一个边距，一般会先通过margin：0； 做一个初始化，有需要加边距的时候再加
  • script标签：
    • 闭合标签 <script></script>
    • type属性，指示脚本的 MIME 类型
    • src ，规定外部脚本文件的 URL。例如，<script src="jquery文件名"></script> 可以引入jQuery
    • async，规定异步执行脚本（仅适用于外部脚本）
    • charset，规定在外部脚本文件中使用的字符编码
    • defer，规定是否对脚本执行进行延迟，直到页面加载为止。
  • a标签：锚。创建超链接，用于跳转
    • 闭合标签 <a>  </a> ，行内标签
    • 常用属性
      • href=" " 链接的路径、网址等
      • title = " " 设置提示信息
      • 默认是当前页打开即target='_self'，target="_blank"新建一个标签打开页面，target="_parent"父级标签打开
    • 可以作为一个锚，设置锚点。href=“#关联id” 
  •  p标签：段落
    • 闭合标签 <p></p> ，块级标签
  •  br标签：本段落换行
    • 自闭合标签 <br />，行内标签
  •  h族标签： 对内容进行加大加粗
    • 闭合标签，<h1></h>   <h2></h>  <h3></h>  <h4></h>  <h5></h>  <h6></h>   ，块级标签
  • span标签：白板，默认是行内标签
    • 闭合标签 <span></span> ,行内标签
  • div标签：白板，默认是块级标签
    • 闭合标签<div></div> ，块级标签
    • 常用属性
      • style
      • id
  • input标签：
    • 自闭合标签 <input />，行内标签
    • 常用属性
      • name属性，当input'标签提交时，会以字典形式进行提交，name可作为内容的键名，对应的是作为键值
      • id属性
      • placeholder 属性，在高版本的html中才能支持，设置输入框的默认内容
      • disabed   禁止编辑      默认属性是enabled
      • type属性，value属性。控制input的样式和性质
        • type=“text” name=“ ” 输入框
        • type=“password” name=“pwd” 密码框，把输入的值隐藏，只显示长度
        • type=“button” value=“ ” name=“ ”按钮，默认是个白板按钮
        • type=“submit” value=“ ” name=“ ”提交按钮，可以用value自定义按钮名字
        • type="reset" value="重置"    把输入的内容重置
        • type=“radio” name=“ ” value=“ ”  当name相同时，多个type形成互斥的单选框，后台通过value值拿到选择的内容。用checked=“checked” 设定默认值
        • type=“checkbox” name = “ ” value=“ ”  在形式上表现是复选框，用name 属性获取批量的value值。  用checked=“checked” 设定默认值
        • type=“file”  name=“ ”     上传文件。默认是上传不了，依赖于form表单的enctype属性。
  • button按钮
    • 闭合标签
    • 除了可以用input的type属性改造出按钮以外。可以通过button标签创建按钮。默认这种按钮，只是一种没有任何实质性功能的样式。
  •  form表单标签
    • 闭合标签 <form> </form>，块级标签。一般情况下，form表单是和input结合使用的。
    • 常用属性
      • action=" "  指定form表单中内容的发送位置，如 action=“http://localhost:9000/index” ，当执行提交时，将内容打包发送至localhost：9000 ，其中的index为下一级的路径
      • method = “ ”  主要方法有GET 和POST ，形式上，用GET提交时将内容拼接后合并到url中进行提交，用POST提交时会将内容整合到socke中进行提交
      • 　　　　　　 
         1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <link>
 6     <title>Title</title>
 7 </head>
 8 <body>
 9     <form action = "http://www.sogou.com/web">
10         <input type ="text" name="query" />
11         <input type ="submit" value ="搜索"/>
12     </form>
13 </body>
14 
15 </html>
        View Code
      • enctype="multipart/form-data" 上传文件的相关设置
    • 默认情况下的提交，在多层嵌套的时候，只对input标签的内容进行提交。
  • textarea标签（文本域标签）
    • 闭合标签 <textarea></textarea>，行内标签
    • 常用属性
      • rows = " ", cols = " " 设置文本框的大小
  • label 标签：点击后，在指定位置获取光标。
    • 闭合标签，<label></label>，行内标签
    • 经常在form表单中融合使用，一般倩况下和input标签配合使用
    • 常用属性
      • for =“ ” ，可以和需要获取光标对象的 id 进行关联
  • select标签（下拉列表）
    • 闭合标签<select> </select>，
    • 常用属性
      • name属性，向后台传递标签数据
      • size属性，选择框的大小，用来设置显示多个
      • multiple ="multiple"  多选属性。不设置multiple时，默认是单选操作。
    • 内嵌标签，经常和option标签和optgroup标签进行嵌套使用
      • 内嵌选项标签<option></option>
        • option 通过value属性，向后台传数据
      • 内嵌选项分组<optgroup></optgroup>
        • 用于对option选项进行分组，不能选定
        • 属性label 选项组的标签
  • img标签：
    • 自闭和标签 <img />，行内标签
    • 常用属性
      • src=“ ” 链接的图片地址。同级目录下直接放图片名字。
        • 用的相对较多的是相对路径，例如    ./图片名称    ../图片名称
        • 绝对路径
      • style = “height:    ;width:     ;” 设置图片的显示大小。高度，宽度单独设置其中一个的方向的值，另一个是等比例加载的。
      • alt = “ ”  当没能加载到图片时显示的内容
      • titile = “  ”  鼠标悬浮在图片上时显示的内容
    • 默认有1个蓝色边框。通过标签选择器 img{border：0}  去掉
  • 列表标签 ul  ol ， li ；           dl ， dt  dd。
    • 列表标签都是闭合标签，分组配合使用，块级标签
    • ul 嵌套li   形式上是内容行前加点
    • ol 嵌套 li  形式上是内容上加数字
    • dt是定义列表dl列表中分组的标题，dd为内容
  • table标签（表格）
    • 闭合标签 <table> </table>，块级标签
    • border = " ",设置表格整体的边框 
    • <caption></caption> 表格的标签
    • <thead> </thead> 表头，  内部嵌套的行列分别是 <tr></tr>    <th></th>
    • <tbody> </tbody> 内容，  内部嵌套的行列标签分别是 <tr></tr>   <td><td>
    • <tr>  </tr> 表格中的行   <td>  </td> 表格中的列  一般两者回配合嵌套使用
    • 合并单元格，在th 或者tb 标签中使用属性，colspan=“” ，rowspan =“”，完成横向、纵向的跨度设置，在合并完成时把多余的表格删掉
  • fieldset标签：可用于画登录框
    • 闭合标签，<fieldset><fieldset>
    • <legend></legend> 可用于定义外框缺口处的内容
  • iframe标签，可以完成网页直接引用在设置的去榆中
    • <iframe src=引用的网址></iframe>
  • 内容中特殊符号：
    • &nbsp; 空格
    • &gt;  大于号
    • &lt; 小于号
    • &amp; &符号
    • &quot; 引号
    • 其他特殊字符

 

 

 

 3、常用操作技巧

  • 审查元素
    • ctrl+shift+c    鼠标快速定位元素在html中的内容
    • consle，控制台，可直接进行JS编辑，编译

 

 

4、html特殊符号

 

特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码
Α &Alpha; &#913; Β &Beta; &#914; Γ &Gamma; &#915;
Δ &Delta; &#916; Ε &Epsilon; &#917; Ζ &Zeta; &#918;
Η &Eta; &#919; Θ &Theta; &#920; Ι &Iota; &#921;
Κ &Kappa; &#922; Λ &Lambda; &#923; Μ &Mu; &#924;
Ν &Nu; &#925; Ξ &Xi; &#926; Ο &Omicron; &#927;
Π &Pi; &#928; Ρ &Rho; &#929; Σ &Sigma; &#931;
Τ &Tau; &#932; Υ &Upsilon; &#933; Φ &Phi; &#934;
Χ &Chi; &#935; Ψ &Psi; &#936; Ω &Omega; &#937;
α &alpha; &#945; β &beta; &#946; γ &gamma; &#947;
δ &delta; &#948; ε &epsilon; &#949; ζ &zeta; &#950;
η &eta; &#951; θ &theta; &#952; ι &iota; &#953;
κ &kappa; &#954; λ &lambda; &#955; μ &mu; &#956;
ν &nu; &#957; ξ &xi; &#958; ο &omicron; &#959;
π &pi; &#960; ρ &rho; &#961; ς &sigmaf; &#962;
σ &sigma; &#963; τ &tau; &#964; υ &upsilon; &#965;
φ &phi; &#966; χ &chi; &#967; ψ &psi; &#968;
ω &omega; &#969; ϑ &thetasym; &#977; ϒ &upsih; &#978;
ϖ &piv; &#982; • &bull; &#8226; … &hellip; &#8230;
′ &prime; &#8242; ″ &Prime; &#8243; ‾ &oline; &#8254;
⁄ &frasl; &#8260; ℘ &weierp; &#8472; ℑ &image; &#8465;
ℜ &real; &#8476; ™ &trade; &#8482; ℵ &alefsym; &#8501;
← &larr; &#8592; ↑ &uarr; &#8593; → &rarr; &#8594;
↓ &darr; &#8595; ↔ &harr; &#8596; ↵ &crarr; &#8629;
⇐ &lArr; &#8656; ⇑ &uArr; &#8657; ⇒ &rArr; &#8658;
⇓ &dArr; &#8659; ⇔ &hArr; &#8660; ∀ &forall; &#8704;
∂ &part; &#8706; ∃ &exist; &#8707; ∅ &empty; &#8709;
∇ &nabla; &#8711; ∈ &isin; &#8712; ∉ &notin; &#8713;
∋ &ni; &#8715; ∏ &prod; &#8719; ∑ &sum; &#8722;
− &minus; &#8722; ∗ &lowast; &#8727; √ &radic; &#8730;
∝ &prop; &#8733; ∞ &infin; &#8734; ∠ &ang; &#8736;
∧ &and; &#8869; ∨ &or; &#8870; ∩ &cap; &#8745;
∪ &cup; &#8746; ∫ &int; &#8747; ∴ &there4; &#8756;
∼ &sim; &#8764; ≅ &cong; &#8773; ≈ &asymp; &#8773;
≠ &ne; &#8800; ≡ &equiv; &#8801; ≤ &le; &#8804;
≥ &ge; &#8805; ⊂ &sub; &#8834; ⊃ &sup; &#8835;
⊄ &nsub; &#8836; ⊆ &sube; &#8838; ⊇ &supe; &#8839;
⊕ &oplus; &#8853; ⊗ &otimes; &#8855; ⊥ &perp; &#8869;
⋅ &sdot; &#8901; ⌈ &lceil; &#8968; ⌉ &rceil; &#8969;
⌊ &lfloor; &#8970; ⌋ &rfloor; &#8971; ◊ &loz; &#9674;
♠ &spades; &#9824; ♣ &clubs; &#9827; ♥ &hearts; &#9829;
♦ &diams; &#9830;   &nbsp; &#160; ¡ &iexcl; &#161;
¢ &cent; &#162; £ &pound; &#163; ¤ &curren; &#164;
¥ &yen; &#165; ¦ &brvbar; &#166; § &sect; &#167;
¨ &uml; &#168; © &copy; &#169; ª &ordf; &#170;
« &laquo; &#171; ¬ &not; &#172; ­ &shy; &#173;
® &reg; &#174; ¯ &macr; &#175; ° &deg; &#176;
± &plusmn; &#177; ² &sup2; &#178; ³ &sup3; &#179;
´ &acute; &#180; µ &micro; &#181 " &quot; &#34;
< &lt; &#60; > &gt; &#62;
posted @ 2019-05-27 18:20  林山风火  阅读(9)  评论(0)    收藏  举报