第一课 常用标签

尚硅谷HTML学习第一天

---

实体

再HTML中特殊符号要用实体来表示，其格式为: &实体名;,如小于号<用& lt;来表示。

---

meta标签

指定网页的一些元数据，常见元数据：charset:指定网页字符集 ，name 指定的数据名称, content: 指定的数据的内容。

​ 如：

	<!--网站描述，在搜索引擎中显示-->
<meta name="description"
          content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
	<!--网站关键字-->
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
	<!--还有重定向操作等-->

---

常用标签

学习HTML标签关注语义而不是样式，样式用CSS来改变。

简单的标签

    <!--独占一行->块元素--> 
    <h1>一级标题</h1>
    <h2>二级标题</h2>

    <p>段落</p>

    <em>表示语音和语调的加重</em><!--行内元素-->
    <strong>表示强调内容</strong>

    <blockquote>长引用</blockquote>
    <q>短引用</q><!--行内元素-->
    <br> <!--换行-->>

块元素与行内元素

1. 一般只在块元素中放行内元素
2. p元素内不妨任何块元素
3. 根元素中不能出现除head,body以外的元素

浏览器解析时会自动修正不符合规范代码，但最好直接写好。

布局标签

<header>表示网页的头部</header>
<footer>表示网页的底部</footer>
<!--上面两个标签可以在多个地方使用：网页主体，或者其中的块内-->
<main>表示网页的主体部分</main>

<nav>网页中的导航</nav>
<aside>网页的侧边栏</aside>
<article>表示独立的文章</article>
<section>一个独立的区块，以上都不能用时再用</section>
<!--都是HTML5新增,用的较少-->

<!--常用--> 
<div>无语义，表示一个区块</div>
<span>无语义，行内元素,用来选中网页中文字</span>

列表

<!--ul创建无序列表-->
<ul>
    <li>what</li><!--创建列表项--> 
</ul>
<!--ol创建有序列表-->
<ol>
    <li></li>
</ol>
<!--由于要保证样式相同，用有序，无序都行，一般用有序列表-->
<!--dl创建定义列表-->
<dl>
    <li></li>
    <dt>表示定义内容</dt>
    <dd>对内容进行解释说明</dd>
    <!--1个dt可以有多个dd标签-->
</dl>

超链接

1. href属性：既可以填入一个外部地址也可以填入一个内部地址

   填入一个文件时要注意路径问题

   ./表示当前文件目录（默认）， .//表示上一级文件目录，不同目录间用/分隔。

2. target属性: _self为默认值，表示在当前页面打开

   ​ _blank 表示再新页面中打开

<!--实现回到顶部-->
<a href="#">回到顶部</a>
<!--#也可以用作占位符-->
<!--javascript:;也可，且更好-->
<p id="show">show</p>
<a href="#show"></a>

​ 如何实现任意跳转呢？这就要用到id属性。把href设置为#+目标标签id。

图片标签

<img src="地址">

​ src属性：引入图片路径。

​ alt属性：图片描述，搜索引擎通过alt识别图片。

​ width,height属性：设置宽和高，默认锁定纵横比。

​ img为替换元素，不独占一行。

​ 了解jpg,png,gif,webp的应用场景

内联框架

并不常用

音视频播放

<!--属性用的时候再查吧-->
<audio>
    对不起，请升级
    <source src=""></source>
</audio><!--音频-->
<video><video><!--视频-->