文档资料

Mozilla-Developer-Network文档：https://developer.mozilla.org/zh-CN/docs/Web/HTML

a元素

超链接

href属性

hyper reference：通常表示跳转地址

1. 普通链接

2. 锚链接

id属性：全局属性，表示元素在文档中的唯一编号

3. 功能链接

点击后，触发某个功能

  • 执行JS代码，javascript:
  • 发送邮件，mailto:

要求用户计算机上安装有邮件发送软件：exchange

  • 拨号，tel:

要求用户计算机上安装有拨号软件，或使用的是移动端访问

target属性

表示跳转窗口位置。
target的取值：

  • _self：在当前页面窗口中打开，默认值
  • _blank: 在新窗口中打开 ```html <!DOCTYPE html>
淘宝网 

  2. ---
  4. <a name="ab877add"></a>
  5. # 路径的写法
  7. <a name="14d161df"></a>
  8. ## 站内资源和站外资源
  9. 站内资源：当前网站的资源<br />站外资源：非当前网站的资源
  11. <a name="1b076efb"></a>
  12. ## 绝对路径和相对路径
  13. 站外资源：绝对路径<br />站内资源：相对路径
  15. <a name="L1VpM"></a>
  16. ### 1. 绝对路径
  17. 绝对路径的书写格式：<br />url地址：

协议名://主机名:端口号/路径

schema://host:port/path

  2. 当跳转目标和当前页面的协议相同时，可以省略协议
  3. ```html
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.     <meta charset="UTF-8">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  10.     <title>Document</title>
  11. </head>
  12. <body>
  13.     <!-- <a href="https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_9793542551906236030%22%7D&n_type=0&p_from=1">
  14.         百度
  15.     </a> -->
  17.     <a href="//renren.com">
  18.         人人网
  19.     </a>
  21.     <!-- 
  22. http://127.0.0.1:5501/2.%20HTML%E6%A0%B8%E5%BF%83/6.%20%E8%B7%AF%E5%BE%84%E7%9A%84%E5%86%99%E6%B3%95/%E7%BB%9D%E5%AF%B9%E8%B7%AF%E5%BE%84%E7%9A%84%E4%B9%A6%E5%86%99.html
  24.      -->
  25. </body>
  26. </html>

2. 相对路径

以./开头，./表示当前资源所在的目录
可以书写../表示返回上一级目录
相对路径中：./可以省略

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <a href="subhtmls/a.html">
  11.         subhtmls -> a.html
  12.     </a>
  13.     <a href="../1. 第一个网页/index.html">
  14.         我的第一个网页
  15.     </a>
  16. </body>
  17. </html>

图片元素

img元素

image缩写，空元素
src属性：source
alt属性：当图片资源失效时，将使用该属性的文字替代图片

和a元素联用

  1. <a target="_blank" href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin">
  2.             <img usemap="#solarMap" src="./img/solar.jpg" alt="这是一张太阳系的图片">
  3. </a>

和map元素

map：地图
map的子元素：area
衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具：QQ截图、ps、pxcook、cutpro（老师开发）

  1. <map name="solarMap">
  2.         <area shape="circle" coords="360,204,48" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" target="_blank">
  3.         <area shape="rect" coords="323,282,395,320" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" target="_blank">
  4.         <area shape="poly" coords="601,371,645,312,678,338,645,392" href="https://baike.baidu.com/item/%E5%86%A5%E7%8E%8B%E6%98%9F/137498?fr=aladdin" target="_blank">
  5. </map>

area 是区域；

shape=”circle” —-> circle 是圆形，需要半径 ; coords=”x轴,y轴,半径”
shape=”rect” —-> rect 是矩形，需要左上角坐标和右上角坐标 ; coords=”左上x,左上y,右上x,右上y”
shape=”poly” —-> poly 是多边形，需要依次描述每个点的坐标 ; coords=”四个点的坐标”

和figure元素

指代、定义，通常用于把图片、图片标题、描述包裹起来
子元素：figcaption —->

  1. <figure>
  2.         <a target="_blank" href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin">
  3.             <img usemap="#solarMap" src="./img/solar.jpg" alt="这是一张太阳系的图片">
  4.         </a>
  5.         <figcaption>
  6.             <h2>太阳系</h2>
  7.         </figcaption>
  8.         <p>
  9.             太阳系是以太阳为中心，和所有受到太阳的引力约束天体的集合体。包括八大行星（由离太阳从近到远的顺序：水星、金星、地球、火星、木星、土星、天王星、海王星）、以及至少173颗已知的卫星、5颗已经辨认出来的矮行星和数以亿计的太阳系小天体,和哈雷彗星。
  10.         </p>
  11. </figure>

多媒体元素

  • video 视频
  • audio 音频

video—视频

controls: 控制控件的显示，取值只能为controls
某些属性，只有两种状态：1. 不写 2. 取值为属性名，这种属性叫做布尔(Boolean)属性
布尔属性，在HTML5中，可以不用书写属性值
autoplay: 布尔属性，自动播放。
muted: 布尔属性，静音播放。
loop: 布尔属性，循环播放

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <video controls autoplay muted loop style="width:500px;">
  13.         <source src="media/open.mp4">
  14.         <source src="media/open.webm">
  15.         <p>
  16.             对不起，你的浏览器不支持video元素，请点击这里下载最新版本的浏览器
  17.         </p>
  18.     </video>
  19. </body>
  21. </html>

audio—音频

和视频完全一致

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <audio src="./media/shamoluotuo.mp3" controls autoplay loop muted></audio>
  13. </body>
  15. </html>

兼容性

  1. 旧版本的浏览器不支持这两个元素
  2. 不同的浏览器支持的音视频格式可能不一致

mp4、webm

列表元素

有序列表

ol: ordered list
li：list item

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     把大象装冰箱，总共分几步？
  12.     <ol reversed>
  13.         <li>打开冰箱门</li>
  14.         <li>大象进去</li>
  15.         <li>冰箱门关上</li>
  16.     </ol>
  18. </body>
  19. </html>

无序列表

把ol改成ul
ul：unordered list
无序列表常用于制作菜单 或 新闻列表。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     xxx美女择偶条件：
  12.     <ul>
  13.         <li>有责任心</li>
  14.         <li>会家务</li>
  15.         <li>孝敬老人</li>
  16.         <li>年薪30W</li>
  17.     </ul>
  18. </body>
  19. </html>

定义列表

通常用于一些术语的定义
dl: definition list
dt: definition title
dd: definition description

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     HTML中的术语解释：
  12.     <dl>
  13.         <dt>HTML</dt>
  14.         <dd>
  15.             超文本标记语言，XXXXXX
  16.         </dd>
  18.         <dt>元素</dt>
  19.         <dd>
  20.             组成HTML文档的单元，每个xxxxx
  21.         </dd>
  22.     </dl>
  23. </body>
  24. </html>

容器元素

容器元素：该元素代表一个块区域，内部用于放置其他元素

div元素

没有语义

语义化容器元素

header: 通常用于表示页头，也可以用于表示文章的头部
footer: 通常用于表示页脚，也可以用于表示文章的尾部
article: 通常用于表示整篇文章
section: 通常用于表示文章的章节
aside: 通常用于表示侧边栏

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <div>
  13.         <div>
  14.             <img src="" alt="">
  15.         </div>
  16.         <div>
  17.             <ul>
  18.                 <li>Lorem.</li>
  19.                 <li>Velit.</li>
  20.                 <li>Soluta.</li>
  21.                 <li>Omnis?</li>
  22.             </ul>
  23.         </div>
  24.     </div>
  25.     <div>
  27.     </div>
  28.     <div>
  30.     </div>
  31. </body>
  33. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <header>
  13.         <div>
  14.             <img src="" alt="">
  15.         </div>
  16.         <div>
  17.             <ul>
  18.                 <li>Lorem.</li>
  19.                 <li>Velit.</li>
  20.                 <li>Soluta.</li>
  21.                 <li>Omnis?</li>
  22.             </ul>
  23.         </div>
  24.     </header>
  25.     <article>
  26.         <header>
  27.             <h1>CODING 告诉你硅谷的研发项目管理之道（3）</h1>
  28.             <div>
  30.             </div>
  31.         </header>
  32.         <section>
  33.             <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi accusantium velit reprehenderit a, veniam voluptate voluptatibus quo quisquam! Deserunt nostrum quis ipsa minima quibusdam vel accusantium provident facere tenetur sint.</p>
  34.             <p>Ipsam explicabo, totam repellendus unde exercitationem corrupti similique magnam possimus fuga vero obcaecati, sed aliquam minus quibusdam perspiciatis laboriosam? Commodi velit veritatis illum adipisci officiis quod ipsa aliquam esse dolorum.</p>
  35.             <p>Itaque, iste. Inventore corrupti, consequuntur delectus amet dolorum asperiores temporibus voluptate nesciunt? Assumenda tenetur culpa, enim voluptas dolorem possimus soluta sapiente fugit accusamus nobis temporibus, minima suscipit nulla laudantium facilis!</p>
  36.         </section>
  37.         <section>
  38.             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, exercitationem. A fugit et distinctio perspiciatis numquam unde sunt ab facere eos incidunt nemo, consequuntur hic, minima dolorum maxime quasi quos?</p>
  39.             <p>Velit accusantium, assumenda ex suscipit culpa fuga dolor omnis possimus ducimus aperiam molestiae saepe necessitatibus perferendis aliquam veritatis ipsa quas officiis eius sapiente vel! Temporibus molestias ullam cum consectetur similique!</p>
  40.             <p>Ducimus eveniet itaque corporis doloribus quo accusantium hic, omnis molestiae similique veniam dolorem explicabo voluptatem facilis consequuntur assumenda! Dolorem qui asperiores ullam dolorum quidem. In quae assumenda repudiandae ea illum?</p>
  41.         </section>
  42.         <section>
  43.             <p>Similique atque ab repellendus inventore, perspiciatis nobis, recusandae tempora ratione odio necessitatibus illum laboriosam nemo accusamus fuga officiis repudiandae consectetur voluptatum? Architecto neque atque minima, repellat corrupti provident culpa sunt?</p>
  44.             <p>Voluptatibus, saepe dignissimos? A repudiandae distinctio quibusdam sit cupiditate, possimus id mollitia praesentium reprehenderit, blanditiis eligendi eum ad, tempore dicta esse error sequi eius ipsa non. Minima odio at delectus.</p>
  45.             <p>Id, quas error quis asperiores, nostrum aperiam tempora suscipit porro consequatur pariatur aliquid! Incidunt, deserunt iure in quaerat omnis voluptatum vero ipsum dolorem nesciunt animi, cumque pariatur magni tenetur ducimus!</p>
  46.         </section>
  47.         <section>
  48.             <p>Voluptate animi dolore mollitia, voluptates saepe dignissimos, aut eveniet voluptatibus suscipit fugiat eum quaerat! Sint quisquam temporibus nam dolores sunt! Est fugiat repellendus qui ut laborum quibusdam iste aliquid vitae?</p>
  49.             <p>Veniam vitae vero suscipit sint. Debitis, modi, dolor earum temporibus, tempora animi at a est nostrum quae laudantium excepturi maiores nisi. Inventore nemo sed qui nam, voluptatibus atque culpa ad.</p>
  50.             <p>Culpa saepe officia beatae. Repellat, enim magni, repellendus similique, suscipit architecto consequatur eum sequi sint debitis aut obcaecati quaerat harum tempora alias sit! Provident repudiandae ducimus esse, aspernatur quibusdam iusto.</p>
  51.         </section>
  52.         <section>
  53.             <p>Nam laudantium esse error animi quis suscipit ratione provident iure nemo mollitia quasi ab ullam, rem aspernatur commodi. Reiciendis est sint doloribus exercitationem blanditiis, architecto hic maiores mollitia magni et?</p>
  54.             <p>Unde enim atque perferendis corporis voluptate eius pariatur voluptatibus nihil et vero culpa provident veniam vitae, soluta ipsa tenetur dolorem iste asperiores est? Explicabo obcaecati temporibus quam, quas animi ipsum.</p>
  55.             <p>Eligendi possimus nobis fugiat, recusandae aliquam tempora in odit, architecto similique neque doloremque maiores quae perspiciatis libero aperiam facilis praesentium facere esse debitis explicabo? Quas tenetur dolor assumenda ea sit!</p>
  56.         </section>
  57.         <section>
  58.             <p>Minima fuga facilis quidem mollitia, optio voluptate suscipit nihil ut iure atque unde soluta earum blanditiis deleniti ea cumque repellendus corrupti alias commodi ullam veritatis, quo laudantium vero! Illo, quidem?</p>
  59.             <p>Placeat id, ab, deleniti commodi distinctio veritatis odio nemo labore molestias cumque laborum aliquid atque veniam nobis et quis illo necessitatibus magni. Sunt consectetur labore dolorem explicabo libero expedita ipsum.</p>
  60.             <p>Perspiciatis ipsum expedita omnis distinctio eligendi fuga velit repellendus dignissimos explicabo repellat, pariatur reiciendis animi nam quos molestias eaque vero officiis error perferendis? Vel dolorem labore sapiente rerum deleniti voluptate.</p>
  61.         </section>
  62.         <section>
  63.             <p>Non unde perferendis aut aliquam? Excepturi amet eum in id cum unde tenetur. Doloribus architecto excepturi, accusamus, sint natus aliquam totam veritatis ex facilis harum voluptatibus, aliquid fugiat sapiente fugit.</p>
  64.             <p>Corporis vitae odio omnis aut nisi tenetur cum voluptatum perferendis aliquid? Architecto, necessitatibus iusto et inventore harum qui ullam sit eligendi similique quae excepturi ad cumque eum illo assumenda expedita.</p>
  65.             <p>Quis laudantium accusamus sint dolorum, itaque consequatur, dolore enim id nulla ut repellat aut qui voluptates. Nesciunt ea at, sapiente fuga temporibus dolorem, quis sint quibusdam unde error optio illum!</p>
  66.         </section>
  67.         <section>
  68.             <p>Fuga obcaecati aperiam ullam quod! Placeat ea cupiditate rem fugiat! Eligendi architecto dolor natus, commodi fuga, dolore aperiam minus quaerat facilis laudantium iusto magnam veniam ut illo numquam placeat atque.</p>
  69.             <p>Iste pariatur veritatis aut officiis? Voluptate consectetur minima fugiat est explicabo sit vel, officia tempora, sequi illo ex. Autem dolore iste facere odit ipsa? Incidunt voluptas accusamus earum dolor odio.</p>
  70.             <p>Tenetur officia quas voluptatem ducimus ad! Minus est aliquam numquam consequatur sit optio provident, sed veritatis cupiditate cum dolore ut dolores ad. Voluptates molestiae doloremque aliquid. Enim tempora reprehenderit aspernatur.</p>
  71.         </section>
  72.         <section>
  73.             <p>Porro deleniti, ex vitae laborum labore beatae natus architecto hic optio voluptatem, accusamus voluptate voluptatum, ipsum officia. Magni, fugiat aliquid aliquam dolore ducimus iure, natus a neque, quis corrupti adipisci.</p>
  74.             <p>Consectetur nesciunt saepe, at dolore vel omnis? Ducimus labore adipisci neque pariatur velit asperiores debitis impedit aliquid ab deleniti ex deserunt sunt error, libero cumque numquam sequi facilis odit hic.</p>
  75.             <p>Officia possimus eveniet, numquam laudantium impedit debitis, rerum ipsum quibusdam id, natus ipsam tempora dolore deleniti aperiam? A laudantium, quo natus reiciendis, nostrum modi tempora soluta ut molestias incidunt adipisci!</p>
  76.         </section>
  77.         <section>
  78.             <p>Reiciendis obcaecati sapiente perferendis atque sunt incidunt, sint iste, deserunt minus amet mollitia cumque fugit architecto voluptatibus dolorum doloremque maiores, officia doloribus veritatis ratione. Similique tempore illum excepturi provident necessitatibus.</p>
  79.             <p>Libero porro consectetur commodi molestias quidem facere suscipit molestiae repellat architecto aspernatur fugiat in quod ipsam iusto, omnis fuga exercitationem inventore magnam totam reprehenderit velit dolorem qui. Provident, laborum ad.</p>
  80.             <p>Nihil vel quia porro expedita alias eligendi, corporis iusto, sapiente id maxime aliquid illo quo nam repudiandae a aperiam ut! Quia dolorum delectus tempore praesentium fugit asperiores id suscipit reiciendis.</p>
  81.         </section>
  82.         <section>
  83.             <p>Tempora error atque accusamus! Aspernatur consectetur numquam impedit dolore tenetur minima fugiat ullam quo ut, saepe ea similique totam officia esse ipsum nemo doloremque laboriosam dolorem quidem magni odio pariatur.</p>
  84.             <p>Voluptate labore rerum perferendis nesciunt quasi repellendus incidunt quod provident facilis? Suscipit quas assumenda, at repudiandae nihil dolor nemo asperiores nisi unde illum voluptatum, sunt laudantium cumque iste aliquam! Laudantium.</p>
  85.             <p>Tenetur delectus dolores debitis alias quam! Voluptatum recusandae fuga, quibusdam obcaecati voluptatibus ex, similique dolorem, animi nobis quam non qui labore expedita. Beatae distinctio consequuntur accusantium? Aperiam provident fugit est.</p>
  86.         </section>
  87.     </article>
  89.     <aside>
  90.         asdfas撒旦发射点发顺丰案说法啊手动阀是
  91.     </aside>
  92.     <footer>
  94.     </footer>
  95. </body>
  97. </html>

元素包含关系

以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外
元素的包含关系由元素的内容类别决定。
例如，查看h1元素中是否可以包含p元素

总结：

  1. 容器元素中可以包含任何元素
  2. a元素中几乎可以包含任何元素
  3. 某些元素有固定的子元素（ul>li，ol>li，dl>dt+dd）
  4. 标题元素和段落元素不能相互嵌套，并且不能包含容器元素