HTML

来源：互联网发布：流程优化与再造 pdf 编辑：程序博客网时间：2024/04/29 20:49

1. HTML：Hyper Text Markup Language

2. 文档结构

2.1 DOCTYPE

HTML5 时代都用 <!DOCTYPE html>，声明文档类型，以告诉浏览器如何解析

2.2 head

文档编码格式

<meta charset="UTF-8"> ，必须写在第一行，否则 title 可能会乱码

搜索引擎的关键字

<meta name="keywords" content="音乐…">

<meta name="description" content="网易…">

移动浏览器的配置

<meta name="viewport" content="width=device-width">

网页标签 icon
- <link rel="shortcut icon" href="favicon.ico">
- 默认情况下，不需要引入，浏览器会默认读取根目录下的图标进行展示，如果有些页面的图标是单独的，才需要主动引入
样式
- <link rel="stylesheet" href="../css/style.css">，引入样式文件
- <style>p{color:#999;}</style>，直接将要用的样式写在 style 标签里

2.3 body

3. 属性

一个标签可以有多个属性，属性值用引号括起来，单引号双引号都可以
全局属性，所有标签都可以用的属性
- id，唯一标识一个标签
- class，不同的标签可以有相同的 class 属性
- style，在属性值里写具体的 CSS 样式，样式和 HTML 混在一起，不推荐
- title，当鼠标移到对应位置时，会显示 title 里的内容

4. 标签

4.1 文本标签

4.1.1 超链接 a

指向另一个文档
- <a href="http://www.163.com/">网易</a> 默认为当前窗口显示
- <a href="http://www.163.com/" target="_self">网易</a> 当前窗口显示
- <a href="http://www.163.com/" target="_blank" >网易</a> 新窗口显示
- 显示一个网页，内嵌在当前网页
```
<a href="./site/js.html" target="inner">js</a>`<iframe frameborder="0" name="inner"></iframe>
```
指向文档内部的锚点

<a href="#head">to head</a><a href="#buy">to buy</a><h1 id="head">head</h1><div id="buy">buy</div>

跳到 head 锚点时地址栏最后会变成 #head

链接到 Email 地址（或者到拨号软件）

<a href="mailto:yixinplus@188.com">联系我们</a><!-- 多个邮箱账号 --><a href="mailto:yixinplus@188.com,admin@188.com">联系我们</a><!-- cc：抄送，subject：主体，body--><a href="mailto:yixinplus@188.com?cc=admin@188.com&subject=建议&body=body....">联系我们(抄送)</a><a href="tel:18612345678">18612345678</a>

4.1.2 强调 em、strong

em 语义上的强调，strong 重要性的强调
strong 是着重，是比 em 更强烈的强调
默认的样式，em 斜体，strong 粗体

4.1.3 span

没有特殊的语义，要配合 CSS 样式来做
表示了一种单独的结构，一般没有特殊语义又构不成一个段落的，就是比较短的会用它

4.1.4 换行 br

4.1.5 引用 cite、q

cite 表示引用的出处
q 就是一段文字，比如小说里某人说的话

鲁迅在<cite>故乡</cite>中写到<q>地上本来没有路，走得人多了，便有了路</q>

4.1.6 代码 code

code表示一行内的代码，不是表示大段代码

<code>function say(){      alert("hello world");}</code>

4.1.7 格式 `<b></b>` `<i></i>`

b 粗体
i 斜体

<b>粗体</b><i>斜体</i>

4.2 组合内容标签

4.2.1 分区 div

本身没有任何的语义，可以理解为一个分块、分区
也可以理解为其它标签的容器，一个比较独立的一块，里面有其它各种标签
有点类似 Android 布局文件中的 layout

4.2.2 段落 p

许多表示文字的地方都用 p 来表示

4.2.3 列表 ul、ol、dl

无序列表

<ul>      <li>发现音乐</li>      <li>我的音乐</li>      <li>朋友</li>      <li>下载客户端</li>  </ul>

有序列表

<ol>    <li>排行一</li>    <li>排行二</li>    <li>排行三</li></ol><!-- type 属性表明用什么来排序，a 表示用字母start 属性表明第一项的序号，因为是字母，所以现在排行一的序号是 b --><ol type="a" start="2">    <li>排行一</li>    <li>排行二</li>    <li>排行三</li></ol>

自定义列表

  <dl>    <dt>作者</dt>    <dd>Cbuck Musciano</dd>    <dd>Bll Kennedy</dd>    <dt>出版年</dt>    <dd>2007-4</dd>  </dl>

可以互相嵌套

4.2.4 pre

格式化，保留原来的样式，不作任何特殊处理，包括空格，换行等
比如多行代码，可以用 pre，code 会自动变成一行

<pre>function say(){      alert("hello world");}</pre>

4.2.5 blockquote

大块的引用，区别 cite、q
带缩进效果
属性 cite，表明引用内容的来源

<div>    blockquote标签在W3C官网上解释是：    <blockquote cite="http://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-blockquote-element">        <p>            The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.        </p>        <p>            Content inside a blockquote other than citations and in-line changes must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.        </p>    </blockquote></div>

4.3 嵌入资源标签

4.3.1 图片 img

自封闭，无结束标签
属性 alt 描述图片内容，当图片没能加载成功时，会在图片的位置显示 alt 内容

<img src="cover.jpg" alt="封面">

4.3.2 iframe

在当前页面嵌入一个网页
嵌入网页的操作不会影响到外面的网页

<iframe scr="http://www.163.com"></iframe>

4.3.3 引入外部资源 object、embed

引入外部插件，比如需要阅读 PDF 文件
embed 是 HTML5 中的新标签

<!-- type 指定插件类型，是一个 flash --><object type="application/x-shockwave-flash">    <!-- 参数 movie 指定播放器地址    IE8 可以将 “http://pdfReader.swf" 这个值放到 object 的 data 属性里，低版本浏览器会不兼容 -->    <param name="movie" value="http://pdfReader.swf">    <param name="flashvars" value="http://book.pdf"></object><embed type="application/x-shockwave-flash" src="http:pdfReader.swf" width="640" height="480" />

4.3.4 视频 video

HTML5 可以直接插入视频，而不需要使用 flash 插件

 <video controls="controls" poster="./res/poster.jpg"  >    <!-- 不同的浏览器支持的视频格式不一样，所以要多准备几种格式，然后让浏览器选择其支持的格式播放 -->    <source src="./res/video.mp4" type="video/mp4">    <source src="./res/video.webm" type="video/webm">    <source src="./res/video.ogg" type="video/ogg">    <track kind="subtitles" src="./res/video.vtt" srclang="cn" label="cn">    Your browser does not support the video tag.  </video>

如果只有一个视频文件，也可以直接将其放到 video 的 src 属性里
对于不支持 HTML5 的低版本浏览器，会显示”Your browser does not support the video tag.“，所以要留一句话做适配
track 引入字幕
属性
- controls 属性控制播放进度条，不写就没有，要显示播放进度条也可以直接写个属性名，不一定还要加上属性值“controls”
- poster 属性设置封面
- 如果希望页面一加载完成就自动播放视频，需要添加一个属性，名为 autoplay
- 默认的结束时，会停留在最后一帧，如果希望循环播放，添加 loop 的属性

4.3.5 音频 audio

和 video 基本类似

 <audio controls="controls" >    <!-- 不同的浏览器支持的视频格式不一样，所以要多准备几种格式，然后让浏览器选择其支持的格式播放 -->    <source src="./res/audio.mp3" type="audio/mp3">    <source src="./res/audio.wav" type="audio/wav">    Your browser does not support the audio tag.  </audio>

4.3.6 图 canvas、svg

canvas 基于像素，提供了一些绘制函数，可以通过脚本来绘图，比如一些实时数据的显示
svg 是矢量的，提供了一系列图形

4.3.7 热点区域 map、area

<map name="mymap">    <!-- rect矩形，图片左上角（0，0），右下角（50，50），就是说点解图片这个矩形区域去news.163.com链接-->        <area shape="rect" coords="0,0,50,50" href="https://news.163.com" alt="news"/>        <!-- circle，圆心（75，75），半径25，就是说点解图片这个矩形区域去www.163.com链接-->       <area shape="circle" coords="75,75,25" href="https://www.163.com" alt="home"/></map><!-- 比如地图，点击江苏去江苏，点击上海去上海，就是通过这个效果做的，然后这个地图本身的图片是通过 img 的 usemap 属性去做的 --><img src="map.png" usemap="#mymap">

4.3.8 表格 table

标题是 caption，表头 thead，表的主要内容 tbody，表尾 tfoot，一行用 tr，单元格如果是类别那种用 th，普通的用 td
单元格的属性 colspan 合并行，将多个单元格合并为一个,即所谓跨列

  <table>    <caption>照片冲印价格详情</caption>    <thead>      <tr><th>相片尺寸</th><th>富士</th><th>柯达</th></tr>    </thead>    <tbody>      <tr><th>6寸</th><td>0.45</td><td>0.6</td></tr>      <tr><th>全景6寸</th><td>0.45</td><td>0.6</td></tr>      <tr><th>7寸</th><td>0.89</td><td>1</td></tr>      <tr><th>8寸</th><td>1.69</td><td>2</td></tr>      <tr><th>10寸</th><td>3.89</td><td>5</td></tr>    </tbody>    <tfoot>      <tr><td colspan="3">运费8元/单，满99元免运费</td></tr>    </tfoot>  </table>

rowspan 合并列，即跨行

<table class="table">  <thead>    <tr><th>区域</th><th>寄达地</th><th>首重（元/1000g)</th><th>续重（元/1000g)</th></tr>  </thead>  <tbody>    <tr><th rowspan="2">一区</th><td>浙江、上海、江苏</td><td>6</td><td>1</td></tr>    <tr><td>江西、安徽</td><td>7</td><td>1</td></tr>    <tr><th>二区</th><td>北京、天津、河北</td><td>9</td><td>4</td></tr>    <tr><th>三区</th><td>辽宁、甘肃、四川</td><td>10</td><td>4</td></tr>    <tr><th>四区</th><td>吉林、黑龙江、云南</td><td>10</td><td>6</td></tr>    <tr><th>五区</th><td>新疆、西藏</td><td>15</td><td>10</td></tr>  </tbody></table>

4.3.9 表单 form

属性 action 是提交到后台的地址，method 表示表单提交方式，一般为 post
若内容很多，用 fieldset 来分区，legend 表示分区标题
input 表示每一项
- 属性 type 表示是什么东西，file（文件）、checkbox（多选框）、radio（单选框）、text（文本）、submit（提交按钮）、reset（重置按钮），若是不写则默认认为是 text 的
- text 的 placeholder 属性设置提示信息，相当于 Android 中的 hint；如果不允许被修改，添加属性 readonly；属性 hidden 隐藏掉这个内容，用户看不到，但是数据还是会被提交到服务器
- 属性 name 表示提交到后台时所用的名称，同一类东西的 name 都是一样的
- 属性 value 表示提交到后台名称所对应的值，这里可以设置默认值
- HTML5 新加的类型，有 email、url、number、tel、search、range、color、date
重置提交按钮可以通过 input 来做，也可以用 button 标签做，type 属性值和 input 的一样。其它一般的 button 可以不写 type 属性，默认的值就是 button
下拉列表用 select 标签，每一项使用 option 标签。可以使用 optgroup 进行分组，里面包含多个 option，用 label 属性设置组名
多行文本用 textarea 标签
label 标签表示文字提示信息，属性 for 和所指代的那个标签的 id 要一致
对于 checkbox、select 中的 option 这种可以选择的，属性 selected 表示默认选中，disabled 表示不允许用户选择

  <form action="/login"  method="post" class="m-form">    <fieldset>      <legend>照片选择</legend>      <label for="file">选择照片</label><input type="file" id="file">    </fieldset>    <fieldset>      <legend>综合设置</legend>      <div>选择尺寸：</div>      <div>        <input class="cb" type="checkbox" name="size" id="cb_0" value="5" checked><label for="cb_0">5寸</label>        <input class="cb" type="checkbox" name="size" id="cb_1" value="6"><label for="cb_1">6寸</label>      </div>      <div>选择相纸：</div>      <div>        <input class="rd" type="radio" name="material" id="rd_0" value="fushi"><label for="rd_0" >富士</label>        <input class="rd" type="radio" name="material" id="rd_1" value="keda"><label for="rd_1" >柯达</label>      </div>      <div>        <label for="delivery">配送方式：</label>        <select id="delivery">            <option value="0">快递</option>            <option value="1">EMS</option>            <option value="2" selected>平邮</option>        </select>      </div>      <div>        <label for="description">商品描述：</label>        <input class="txt" type="text" id="description" placeholder="描述">      </div>      <div>        <label for="feedback">意见反馈：</label>        <textarea name="feedback" rows="4" id="feedback"></textarea>      </div>    </fieldset>    <div>      <button type="submit">提交</button>      <button type="reset">重置</button>    </div>  </form>

5. 实体字符

类似于其它语言的转义字符
两种表示方式，一种是 & 后加上英文名称和分号，另一种是 & 后加上#、数字编码和分号
空格
-   或  
- 浏览器会将输入的多个空格默认变成一个，如果一定要输入多个空格，需要使用这种实体字符
引号
- " 或 "
大于号小于号
- 大于号 > 或 >
- 小于号 < 或 <
&
- & 或 &

0 0