Html小记

1. Html简介

  1. HTML( Hyper Text Markup Language )是用来描述网页的一种标记语言

    • html 不是一种编程语言,而是一种标记语言
    • 标记语言是一套标记标签;使用标记标签来描述网页
    • html 文档也被称为网页,其包含 html 标签和纯文本
  2. HTML 标签

    1. 标记标签通常被称为 html 标签( tag )

    2. 特点

      • html标签通常是成对出现的,另外也包含自闭合的标签
      • 成对标签分为开放标签和闭合标签

    3. 标签元素类型

      1. 块级元素 ( block )

        简介:在html种 div 、p 、 hn 、ul 、li 标签元素属于块级元素

        特点:

        1. 一个块级元素独占一行
        2. 元素的高度、宽度、行高、顶和底边距都可设置
        3. 元素宽度在不设置的情况下,是它本身父容器的100%,即默认和父元素宽度一致
      2. 行内元素 ( inline )

        简介:在html中 a 、span 、 br 、i 、 em 、 strong 、 label 等属于行内元素

        特点:

        1. 和其他元素都在一行上
        2. 元素的高度、宽度、行高、顶和底边距不可设置
        3. 元素的宽度就是其包含文字或图片的宽度,不可改变
      3. 行内块元素 ( inline-block )

        简介:在html 中 img 、input 属于行内块元素

        特点:

        1. 行内块元素即同时具备行内元素、块级元素的特点
        2. 行内块元素在一行上显示
      • 附:标签元素之间的互转 ( display属性 )
        • display:block ( 标签按照块级元素的方式显示 )
        • display:inline ( 标签按照行内元素的方式显示 )

2. Html 结构

html文档结构分为 文档声明头部身体 三部分

1. 文档声明 ( DOCTYPE )

  1. 简介:html文档通常以类型声明开始,该声明将帮助浏览器确定其尝试解析和显示的 html 文档类型

    特点:文档声明必须是 html 文档的第一行、且顶格显示,对大小写不敏感;此类型不是标签

    版本:

    1. XHTML 1.0 (2000年)

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
      # 严格型
      
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      # 过渡型
      
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
      # 宽松型
      
    2. HTML 5 (2014年)

      <!DOCTYPE html>
      

2. 头部分 ( head )

  1. 相关元素

    标签 描述
    定义关于文档的信息(必需)
    </td> <td>定义文档标题(必需)</td> </tr> <tr> <td><base></td> <td>定义该页面上所有链接默认指向的地址或目标(target)</td> </tr> <tr> <td><link></td> <td>定义该文档与外部资源的联系</td> </tr> <tr> <td><meta></td> <td>定义关于html的元数据</td> </tr> <tr> <td><script></td> <td>定义客户端脚本</td> </tr> <tr> <td><style></td> <td>定义该文档的样式</td> </tr> </tbody> </table> </li> <li> <p><strong>title</strong></p> <ul> <li>定义浏览器工具栏中的标题</li> <li>提供页面被添加到收藏夹时显示的标题</li> <li>显示在搜索引擎结果中的页面标题</li> </ul> </li> <li> <p><strong>link</strong></p> <p>此标签 最常用于连接样式表(CSS)</p> <pre><code class="language-html"><head> <link rel="stylesheet" type="text/css" href="mystyle/css" /> </head> </code></pre> </li> <li> <p><strong>style</strong></p> <p>此标签 是CSS的另一种引入方式</p> <pre><code class="language-html"><head> <style type="text/css"> body { background-color:red } p {color:blue} </head> </code></pre> </li> <li> <p><strong>meta</strong></p> <p>此标签 提供关于html文档的元数据;元数据不会在页面上显示,但对于机器是可读的</p> <p>典型的情况是,meta元素常被用于规定页面的描述(如何显示内容或重新加载页面)、关键词、文档的作者、最后的修改时间以及其它元数据</p> <pre><code class="language-html"><head> <meta charset="UTF-8"> <!--定义显示的字符集--> <meta name="description" content="Free Web tutorials on HTML,XML,CSS"> <!--定义页面描述--> <meta name="keyword" content="HTML,CSS,XML"> <!--定义关键词--> <meta name="viewport" content="width=device-width inital-scale=1.0"> <!--禁用溶放,兼容手机--> <meta http-equiv="X-UA-Compatible" content="ie=edge" > <!--告诉IE使用最新--> </head> </code></pre> </li> <li> <p><strong>script</strong></p> <p>此标签 最常用于定义客户端脚本,比如 <code>Javascript</code></p> <p>script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件;必需的 type 属性规定脚本的MIME 类型</p> <p>Javascript 最常用于 <u>图片操作</u>、<u>表单验证</u> 以及 <u>动态内容更新</u></p> <pre><code class="language-html"><head> <script type="text/javascript"> document.write("Hello World!") </script> <noscript> Your browser does not support Javascript!</noscript> <!--不支持javascript替代显示内容--> </head> </code></pre> </li> </ol> <h3 id="3-主体--body-">3. 主体 <em>( body )</em></h3> <p>此部分 包含所有网页需要显示的文本内容</p> <h4 id="1-标签元素(按结构)">1. 标签元素(按结构)</h4> <ol> <li> <p><strong>格式</strong></p> <table> <thead> <tr> <th>标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td><abbr></td> <td style="text-align:left">定义缩写</td> </tr> <tr> <td><address></td> <td style="text-align:left">定义文档作者或拥有者的联系信息(通常为斜体)</td> </tr> <tr> <td><bdi></td> <td style="text-align:left">定义文本方向,脱离周围的文本发方向(左→右;右→左)</td> </tr> <tr> <td><bdo></td> <td style="text-align:left">定义文字方向</td> </tr> <tr> <td><blockqoute></td> <td style="text-align:left">定义块引用(自动缩进)</td> </tr> <tr> <td><del></td> <td style="text-align:left">定义被删除的文本</td> </tr> <tr> <td><ins></td> <td style="text-align:left">定义被插入的文本</td> </tr> <tr> <td><mark></td> <td style="text-align:left">定义有记号的文本(字体亮色)</td> </tr> <tr> <td><meter></td> <td style="text-align:left">定义度量给定范围(gauge)内的数据</td> </tr> <tr> <td><pre></td> <td style="text-align:left">预定义格式化文本(常用于源代码)</td> </tr> <tr> <td><progress></td> <td style="text-align:left">定义任何类型的任务进度(进度条)</td> </tr> <tr> <td><q></td> <td style="text-align:left">定义行内引用(“内容”)</td> </tr> <tr> <td><sup></td> <td style="text-align:left">定义上标文本</td> </tr> <tr> <td><sub></td> <td style="text-align:left">定义下标文本</td> </tr> <tr> <td><time></td> <td style="text-align:left">定义时间文本</td> </tr> <tr> <td><wbr.></td> <td style="text-align:left">定义可能的换行符</td> </tr> </tbody> </table> </li> <li> <p><strong>表单</strong></p> <p>表单用于向服务器传输数据</p> <table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><form></td> <td>定义供用户输入的HTML表单</td> </tr> <tr> <td><input></td> <td>定义输入控件</td> </tr> <tr> <td><textrea></td> <td>定义多行的文本输入控件(评论)</td> </tr> <tr> <td><button></td> <td>定义按钮</td> </tr> <tr> <td><select></td> <td>定义选项列表</td> </tr> <tr> <td><optgroup></td> <td>定义选项组(列表组)</td> </tr> <tr> <td><option></td> <td>定义选项列表中的选项</td> </tr> <tr> <td><label></td> <td>为 input 元素定义标注(标记)</td> </tr> <tr> <td><fieldset></td> <td>定义围绕表单中元素的边框</td> </tr> <tr> <td><legend></td> <td>定义fieldset元素的标题</td> </tr> <tr> <td><datalist></td> <td>定义下拉列表(与 input 配合 表示可能出现的值)</td> </tr> <tr> <td><keygen></td> <td>定义生成密钥(当提交表单时,私钥存储本地,公钥发送到服务器)</td> </tr> <tr> <td><output></td> <td>定义不同类型的输出,例如脚本输出</td> </tr> </tbody> </table> <ol> <li> <p><strong>select</strong></p> <p>此标签 可创建单选或多选菜单</p> <pre><code class="language-html"><select> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> </code></pre> </li> <li> <p><strong>datalist</strong></p> <p>此标签 定义选项列表,与input标签配合使用该元素,来定义input可能的值</p> <p>datalist及其选项不会被显示出来,它仅仅是合法的输入值列表</p> <pre><code class="language-html"><input id="myCar" list="cars" /> <!--用input元素中的list属性来绑定datalist--> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist> </code></pre> </li> </ol> </li> <li> <p><strong>框架</strong></p> <table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><frame></td> <td>定义框架集的窗口或框架(不能与<body>标签一起使用)</td> </tr> <tr> <td><frameset></td> <td>定义框架集</td> </tr> <tr> <td><noframes></td> <td>定义针对不支持框架的替代内容</td> </tr> <tr> <td><iframe></td> <td>定义内联框架(行内框架)</td> </tr> </tbody> </table> <ol> <li> <p><strong>frame</strong></p> <p>此标签 定义 frameset中的一个特定的窗口(框架)</p> <pre><code class="language-html"><html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html> </code></pre> </li> <li> <p><strong>iframe</strong></p> <p>此标签 会创建包含另外一个文档的内联框架(即行内框架)</p> <pre><code class="language-html"><html> <body> <iframe src="/i/eg_landscape.jpg"></iframe> <p>一些老的浏览器不支持 iframe。</p> <p>如果得不到支持,iframe 是不可见的。</p> </body> </html> </code></pre> </li> </ol> </li> <li> <p><strong>图像</strong></p> <table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><img></td> <td>定义图像</td> </tr> <tr> <td><map></td> <td>定义一个客户端图像映射;映射(image-map)指带有可点击区域的一幅图像</td> </tr> <tr> <td><area></td> <td>定义图像映射中的区域(总是嵌套在<map>中)</td> </tr> <tr> <td><canvas></td> <td>定义图形(图形容器)</td> </tr> <tr> <td><figure></td> <td>定义独立的流内容(图像、图表、照片、代码等等)</td> </tr> <tr> <td><figcaption></td> <td>定义 figure 元素 的标题</td> </tr> </tbody> </table> <ol> <li> <p><strong>canvas</strong></p> <p>此标签 定义图形 比如图标和其它图像</p> <p>此标签 只是一个图形容器,必须用脚本来绘制图形</p> <pre><code class="language-html"><canvas id="myCanvas"></canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script> </code></pre> </li> </ol> </li> <li> <p><strong>音频/视频</strong></p> <table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><audio></td> <td>定义声音内容</td> </tr> <tr> <td><source></td> <td>定义媒介资源(audio和video)</td> </tr> <tr> <td><track></td> <td>定义在媒体播放器中的文本轨道(字幕)</td> </tr> <tr> <td><video></td> <td>定义视频</td> </tr> </tbody> </table> </li> <li> <p><strong>链接</strong></p> <table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><a></td> <td>定义锚(超链接)</td> </tr> <tr> <td><link></td> <td>定义文档与外部的资源的联系</td> </tr> <tr> <td><nav></td> <td>定义导航链接</td> </tr> </tbody> </table> </li> <li> <p><strong>列表</strong></p> <table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><ul></td> <td>定义无序列表</td> </tr> <tr> <td><ol></td> <td>定义有序列表</td> </tr> <tr> <td><li></td> <td>定义列表的项目(用在<ul>和<ol>中)</td> </tr> <tr> <td><dl></td> <td>定义定义列表</td> </tr> <tr> <td><dt></td> <td>定义定义列表中的项目</td> </tr> <tr> <td><dd></td> <td>定义定义列表中项目的描述</td> </tr> <tr> <td><menu></td> <td>定义命令的菜单/列表</td> </tr> </tbody> </table> <ol> <li><strong>ul ol dl 分别在什么情况使用</strong> <ul> <li><strong>无序列表</strong>在列表项目对顺序没要求时使用,可以是任何一系列项目</li> <li><strong>有序列表</strong>在列表项目对顺序有要求的时候使用</li> <li><strong>定义列表</strong>在对项目有描述要求时使用</li> </ul> </li> </ol> </li> <li> <p><strong>表格</strong></p> <table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><table></td> <td>定义表格</td> </tr> <tr> <td><caption></td> <td>定义表格标题</td> </tr> <tr> <td><th></td> <td>定义表格中的表头单元格</td> </tr> <tr> <td><tr></td> <td>定义表格中的行</td> </tr> <tr> <td><td></td> <td>定义表格中的列</td> </tr> <tr> <td><thead></td> <td>定义表格中表头的内容</td> </tr> <tr> <td><tbody></td> <td>定义表格中主体的内容</td> </tr> <tr> <td><tfoot></td> <td>定义表格中表注内容(脚注)</td> </tr> <tr> <td><col></td> <td>定义表格中一个列或多个列的属性值</td> </tr> <tr> <td><colgroup></td> <td>定义表格中供格式化的列组</td> </tr> </tbody> </table> </li> <li> <p><strong>样式/节</strong></p> <table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><style></td> <td>定义文档的样式信息</td> </tr> <tr> <td><div></td> <td>定义文档的节(块级)</td> </tr> <tr> <td><span></td> <td>定义文档的节(行内)</td> </tr> <tr> <td><header></td> <td>定义section或page的页眉</td> </tr> <tr> <td><footer></td> <td>定义section或page的页脚</td> </tr> <tr> <td><section></td> <td>定义文档中的节(section、区段);比如章节、页眉、页脚或文档中的其他部分</td> </tr> <tr> <td><article></td> <td>定义文章</td> </tr> <tr> <td><aside></td> <td>定义页面内容之外的内容(如:文章侧栏)</td> </tr> <tr> <td><details></td> <td>定义元素细节(如描述文档、文档某个部分的细节)</td> </tr> <tr> <td><summary></td> <td>为<details>定义可见的标题</td> </tr> </tbody> </table> </li> <li> <p><strong>编程</strong></p> <table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><script></td> <td>定义客户端脚本</td> </tr> <tr> <td><noscript></td> <td>定义客户端不支持脚本的替代内容</td> </tr> <tr> <td><embed></td> <td>为外部内容(非html)定义容器</td> </tr> <tr> <td><object></td> <td>定义嵌入的对象</td> </tr> <tr> <td><param></td> <td>定义参数</td> </tr> </tbody> </table> </li> </ol> <h4 id="2-属性(全局)">2. 属性(全局)</h4> <table> <thead> <tr> <th>属性(赋予元素语境和意义)</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><em>class</em></td> <td>规定元素的一个或多个类名(引用样式表中的类)</td> </tr> <tr> <td><em>contenteditable</em></td> <td>规定元素内容是否可编辑</td> </tr> <tr> <td><em>data-</em> *</td> <td>用于存储页面或应用程序的私有定制数据</td> </tr> <tr> <td><em>dir</em></td> <td>规定元素内容的文本方向</td> </tr> <tr> <td><em>draggable</em></td> <td>规定元素是否可拖动</td> </tr> <tr> <td><em>hidden</em></td> <td>规定元素仍未或不再相关(布尔属性)</td> </tr> <tr> <td><em>id</em></td> <td>规定元素的唯一id</td> </tr> <tr> <td><em>lang</em></td> <td>规定元素内容的语言</td> </tr> <tr> <td><em>spellcheck</em></td> <td>规定是否对元素进行拼写和语法检查</td> </tr> <tr> <td><em>style</em></td> <td>规定元素的行内css样式</td> </tr> <tr> <td><em>title</em></td> <td>规定有关元素的额外信息</td> </tr> <tr> <td><em>translate</em></td> <td>规定是否应该翻译元素内容</td> </tr> </tbody> </table> <ol> <li> <p><strong>contenteditable</strong></p> <pre><code class="language-html"><p contenteditable="true">这是一个可编辑的段落</p> </code></pre> </li> <li> <p><strong>data-</strong>*</p> <p>此属性 赋予在所有HTML元素上嵌入自定义data属性的能力</p> <p>自定义数据能够被页面的 Javascript 利用,以创建更好的用户体验</p> <pre><code class="language-html"><!DOCTYPE html> <html> <head> <script> function showDetails(animal) { var animalType = animal.getAttribute("data-animal-type"); alert(animal.innerHTML + "是一种" + animalType + "。"); } </script> </head> <body> <h1>物种</h1> <p>点击某个物种来查看其类别:</p> <ul> <li onclick="showDetails(this)" id="owl" data-animal-type="鸟类">喜鹊</li> <li onclick="showDetails(this)" id="salmon" data-animal-type="鱼类">金枪鱼</li> <li onclick="showDetails(this)" id="tarantula" data-animal-type="蜘蛛">蝇虎</li> </ul> </body> </html> </code></pre> </li> </ol> <h4 id="3-常用实体">3. 常用实体</h4> <p>实体字符 <em>( ASCII Encoding Refence )</em>是用来在代码以实体代替与HTML语法相同的字符,避免浏览器解析错误</p> <table> <thead> <tr> <th>字符</th> <th>名称</th> <th>实体名称</th> </tr> </thead> <tbody> <tr> <td>“</td> <td>双引号</td> <td>&+quot;</td> </tr> <tr> <td>&</td> <td>&符</td> <td>&+amp;</td> </tr> <tr> <td><</td> <td>左尖括号(小于号)</td> <td>&+lt;</td> </tr> <tr> <td>></td> <td>右尖括号(大于号)</td> <td>&+gt;</td> </tr> <tr> <td></td> <td>空格</td> <td>&+nbsp;</td> </tr> <tr> <td>¥</td> <td>人民币</td> <td>&+yen;</td> </tr> <tr> <td>©</td> <td>版权</td> <td>&+copy;</td> </tr> <tr> <td>®</td> <td>商标</td> <td>&+reg;</td> </tr> </tbody> </table>
内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/newcheer/p/14281661.html

你还没有登录,请先登录注册
  • 还没有人评论,欢迎说说您的想法!