HTML学习笔记2-元素

HTML5支持的元素：HTML5元素周期表

 

1.h元素

表示标题：head

h1--h6：表示一级标题到六级标题

    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

 

2.p元素

表示段落：paragraphs

<p>Lorem ipsum dolor sit amet.</p>

 

3.span元素【无语义】

没有语义，仅用于设置样式

以前：某些元素在显示时会独占一行(块级元素)，而某些元素不会(行级元素)

现在：到了HTML5，已经弃用这种说法

    <span style="color:red;">红</span>
    <span style="color:green">绿</span>
    <span style="color:blue">蓝</span>

 

4.pre元素

预格式化文本元素

空白折叠：在源代码中的连续空白字符(空格、换行、制表)，在页面显示时，会被折叠为一个空格

例外：在pre元素中的内容不会出现空白折叠

在pre元素内部出现的内容，会按照源代码格式显示到页面上

该元素通常用于在网页中显示一些代码

pre元素功能的本质：它有一个默认的CSS属性

    <pre>
        `/\︵/\`  /\_/\ z
        (=^∶^=) (=~.~=)
        (~)︾(~) (~)@(~)﹏.ゅ
    </pre>

 

5.a元素

超链接

 

href属性--hyper reference(引用)

a.通常表示跳转地址

<a href="https://www.cnblogs.com/">博客园</a>

b.跳转到锚点(不刷新页面)

    <a href="#chapter1">章节1</a>
    <a href="#chapter2">章节2</a>
    <a href="#chapter3">章节3</a>
    <a href="#chapter4">章节4</a>
    <a href="#chapter5">章节5</a>
    <a href="#chapter6">章节6</a>

    <h2 id="chapter1">章节1</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem, suscipit? Vero in corrupti, autem odio similique maiores quisquam ipsa ipsum, sint quibusdam nulla optio quos quam cum repudiandae quasi architecto, voluptatibus aspernatur unde iste. Voluptates dolor voluptatibus ducimus sequi doloribus eius inventore dolores totam facere veniam! Officiis sapiente doloribus voluptatem, vero incidunt, quo consequatur esse nobis qui nam, minus rem accusantium numquam autem. Itaque facere repellat a quae, eveniet odio iure, beatae adipisci blanditiis dolorem impedit laboriosam dignissimos soluta nobis, consequuntur ad natus! Quae laborum numquam, pariatur reprehenderit labore beatae nisi repellendus tempora quo aperiam hic eaque, explicabo laudantium! Officia!</p>
    <h2 id="chapter2">章节2</h2>
    <p>Ducimus officiis sapiente voluptate assumenda, temporibus totam recusandae dolores saepe quasi minima necessitatibus quo rem quidem obcaecati quis. Dicta excepturi numquam amet blanditiis voluptatum. Expedita assumenda eum doloribus placeat ipsam, iusto enim voluptatum id, fugiat illo quaerat! Id reiciendis quod rem nulla aperiam quaerat laborum tempore commodi autem aliquam debitis harum nisi eligendi aut, corporis quae veniam, et adipisci! Voluptas illum minus eligendi veritatis ex ratione recusandae id odio cupiditate quisquam tenetur inventore, similique blanditiis aut reprehenderit magnam, odit at officia dolorum, provident dolorem. Obcaecati suscipit quia, reprehenderit nesciunt voluptate, maxime similique quidem consectetur itaque beatae provident nemo atque aliquam.</p>
    <h2 id="chapter3">章节3</h2>
    <p>Sit praesentium distinctio, cupiditate provident fugit in iure iste sint voluptatem tempore officia id hic! Praesentium culpa cum totam et molestias ducimus nam exercitationem doloremque iusto nobis nisi hic, vitae veniam facere vero aliquam sit sapiente optio tenetur. Tempora cupiditate hic aliquam incidunt libero blanditiis ut qui nesciunt ab quasi amet a officia, sed aspernatur iste temporibus laborum doloribus placeat est laudantium vel tempore neque accusantium numquam? Nemo nihil, deserunt reiciendis ad ut consectetur. Delectus deserunt beatae doloremque impedit, facilis dolor quo cum quasi reprehenderit illum molestias veniam odio! Numquam voluptatum nemo nam est reprehenderit blanditiis maiores, ipsam laboriosam id.</p>
    <h2 id="chapter4">章节4</h2>
    <p>Consequuntur excepturi amet laudantium corporis similique sapiente itaque reprehenderit consectetur et eum magni tenetur quos doloremque impedit, atque autem voluptas rem? Necessitatibus quibusdam omnis rerum nulla officiis aut architecto soluta veritatis repudiandae. Ducimus voluptate facilis sit sint! Dolorum possimus necessitatibus quam itaque dignissimos saepe earum placeat nobis vitae? Vitae nostrum voluptatibus, maiores excepturi commodi incidunt aliquid saepe, repellendus officiis, fugit fugiat ducimus? Id, necessitatibus alias reprehenderit cupiditate tempore vero ratione totam sed velit! Nulla labore laudantium quos, atque voluptatibus quisquam molestiae debitis sunt praesentium aut beatae, quo, ea inventore placeat molestias? Ipsa temporibus dolore expedita totam corporis necessitatibus, adipisci iusto.</p>
    <h2 id="chapter5">章节5</h2>
    <p>Sed harum nulla tempore, placeat voluptates quos excepturi debitis! Doloribus est non mollitia iure repudiandae, eos quos tenetur unde cupiditate! Aut distinctio, reprehenderit doloribus laborum itaque est aliquam quod asperiores tenetur. Unde voluptates commodi vero dignissimos consectetur? Libero placeat omnis pariatur ratione adipisci laboriosam distinctio, cumque quae dolorem doloremque amet, aperiam et quos hic voluptatibus culpa porro commodi quaerat eius ex quo voluptates aliquam totam ut. Fuga dolores nemo, similique minima accusamus ipsa facilis cum odit ad. Veniam facere placeat blanditiis harum adipisci odit officiis, ipsa omnis corporis dolor, distinctio delectus sunt ea deserunt aspernatur dignissimos quaerat iure porro est?</p>
    <h2 id="chapter6">章节6</h2>
    <p>Pariatur recusandae dolor, qui dolores perspiciatis fugiat aut quidem laboriosam quos cupiditate repellendus amet incidunt, nostrum earum culpa at suscipit, soluta nulla illo esse ratione consequatur laudantium. Porro dicta fugiat quibusdam doloribus ipsam ab ipsa molestiae iste eius quo deleniti quos maxime explicabo modi esse et, nam vero fugit mollitia necessitatibus in velit. Corrupti facere facilis, dolor atque tempora libero alias voluptate sit tenetur dolore exercitationem explicabo, itaque expedita impedit iusto neque illo voluptatum hic cum est? At culpa iste dicta voluptatum rerum numquam sed ducimus. Architecto quam asperiores beatae provident minima totam harum, illo debitis nemo aliquid eum veniam.</p>

    <!-- 跳转到首页 -->
    <a href="#">回到顶部</a>

c.功能链接(点击后，触发某个功能)

c1:执行JS代码,javascript:

<a href="javascript:alert('你好！')">弹窗:你好</a>

c2:发送邮件(要求客户端安装邮件发送软件),mailto:

<a href="mialto:dkjfhw239402@qq.com">点击给我发送邮件</a>

c3:拨打电话(要求客户端安装拨号软件):tel:

<a href="tel:14128931208">点击给我拨打电话</a>

 

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

 

target属性：表示跳转窗口位置

_self:默认值,在当前页面窗口中打开

    <!-- 当前窗口打开 -->
    <a href="https://www.cnblogs.com/" target="_self">博客园</a>

_blank:在薪窗口中打开

    <!-- 新窗口打开 -->
    <a href="https://www.cnblogs.com/" target="_blank">博客园</a>

 

 

title属性：表示鼠标移动到文本时的提示

<a href="https://www.cnblogs.com/" target="_blank" title="博客园 - 开发者的网上家园">博客园</a>

 

6.图片元素

img元素：image的缩写，空元素

src属性：source，表示图片的资源地址

alt属性：表示当图片资源失效时，将使用该属性的文字代替图片

 

与a元素联用

　　点击图片时跳转到对应地址

与map元素联用

　　map的子元素：area

与figure元素联用

　　指代、定义：通常用于把图片、图片标题、图片描述包裹起来

　　子元素：figcaption

    <figure>
        <a href="https://www.cnblogs.com/xiaopeng4Python/p/16428892.html" target="_blank">
            <img usemap="#aMap" src="img/aMap.jpg" alt="这是一张图">
        </a>

        <figcaption>
            <h2>图片</h2>
        </figcaption>
        
        <p>
            Lorem ipsum dolor sit amet.
        </p>

    </figure>

    <map name="aMap">
        <!-- 圆形circle  x轴、y轴、半径 -->
        <area shape="circle" coords="360,240,50" href="https://www.cnblogs.com/xiaopeng4Python/p/16428892.html">
        <!-- 矩形rect 对角的两个坐标位置 -->
        <area shape="rect" coords="320,280,390,320" href="https://www.cnblogs.com/xiaopeng4Python/p/16428892.html">
        <!-- 多边形poly 每一个角的坐标(如五边形则提供五组坐标) -->
        <area shape="poly" coords="600,320,650,300,700,310,675,300,325,300"
            href="https://www.cnblogs.com/xiaopeng4Python/p/16428892.html">
    </map>