前端复习 html （二）

上面我们介绍了HTML的基本标签，这一次我们来复习一下HTML常用标签

图像标签img

语义:用来展示一张图片

属性

src:文件的路径

titl:鼠标悬停时显示的内容

alt:当图片加载不出来时的替代文本
路径

路径又分为相对路径和绝对路径

相对路径:不需要写盘符,直接从当前工程开始找指定的文件，如（image/itlike.png）

绝对路径:需要写盘符,从指定盘符路径加载文件，如（d:/HtmlProject/image/itlike.png）

./:表示当前路径

…/:相对路径表示上一级

超链接a标签

语义

a标签定义超链接，用于从一张页面链接到另一张页面。

a 元素最重要的属性是 href 属性，它指示链接的目标。

格式

<a href="链接地址" 相关属性>链接文本/图片<a/>

相关属性

href:规定链接指向的页面的 URL。

download:规定被下载的超链接目标。

target:单独通过target属性设置

arget="_self" 原窗口打开超链接

target="_parent" 原窗口打开超链接

target="_top" 原窗口打开超链接，且新打开的链接跳转到页面最顶部

可以设置全局的打开方式base标签进行设置

设置完毕后, 全局的a标签都是使用该种方式打开

如果想要另一种方式,则要单独设置对应的a标签

<base target="_blank"/>

锚点跳转

在同一个页面当中,可以设置标记.通过a链接,跳转到指定的标记

<a href="#id标记名称">to div1</a>
<p id="标记"></p>

列表标签

ul 定义无序列表。

li 定义列表的项目。

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
</ul>

ol定义有序列表。

li 定义列表的项目。

<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
</ol>

dl定义定义列表。

dt 定义定义列表中的项目。

dd 定义定义列表中项目的描述。

<dl>
    <dt>我是dt</dt>
    <dd>我是dd</dd>
    <dd>我是dd</dd>
    <dd>我是dd</dd>
    <dt>我是dt</dt>
    <dd>我是dd</dd>
    <dd>我是dd</dd>
    <dd>我是dd</dd>
</dl>

表单标签

form:定义供用户输入的 HTML 表单。

input: 定义输入控件。

textarea:定义多行的文本输入控件。

select :定义选择列表（下拉列表）。

option :定义选择列表中的选项。

label :定义 input 元素的标注。

<form action="">
    <label>用户名</label>
    <input type="text" placeholder="请输入用户名"><br><br>



    <label>密码</label>
    <input type="password" placeholder="请输入用户名"><br><br>

    <label>个人简介</label>
    <textarea name=""  cols="30" rows="10"></textarea><br><br>

    
    <select name="" id="">
        <option value="男">男</option>
        <option value="女">女</option>
    </select><br><br>
    <input type="submit" value="提交">
</form>

表格标签

table :定义表格

caption :定义表格标题。

th: 定义表格的表头。

tr :定义表格的行。

td:定义表格单元。

thead :定义表格的页眉。

tbody: 定义表格的主体。

tfoot:定义表格的页脚。

col: 定义用于表格列的属性。

colgroup: 定义表格列的组。

注:表格标签逐渐在淘汰

样式/节

style:定义文档的标签样式信息。

div:
1:定义文档中的节。

2:没有实际的语义,主要对文档结构进行划分

3:一般是划分大的区域

span
1:定义文档中的节。

2:没有实际语义

3:划分小的区域

HTML5中新增标签

语义化标签

header:标签定义文档或者文档的一部分区域的页眉。

<article>
    <header>
        <h1>Internet Explorer 9</h1>
        <p><time pubdate datetime="2011-03-15"></time></p>
    </header>
    <p> Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p>
</article>

注释：header标签不能被放在 footer、address 或者另一个 header 元素内部。

section:标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
  <h1>WWF's Panda symbol</h1>
  <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

footer: 标签定义文档或者文档的一部分区域的页脚。

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p><time pubdate datetime="2012-03-01"></time></p>
</footer>

article:标签定义独立的内容。

<article>
  <h1>Internet Explorer 9</h1>
  <p> Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>

nav:标签定义导航链接的部分

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

媒介标签

video : 标签定义视频，比如电影片段或其他视频流。

<video width="320" height="240" controls>
  <source src="movie.mp4"  type="video/mp4">
  <source src="movie.ogg"  type="video/ogg">
</video>

audio : 标签定义声音，比如音乐或其他音频流。

<audio controls>
  <source src="horse.ogg" >
  <source src="horse.mp3" >
</audio>

表单控件标签

calendar

date

time

email

url

search

绘图标签

canvas: 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。

在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>