2019-08-19_Note_Day21

HTML - Hyper Text Markup Language 超文本标记语言

网页的三要素:

1. Tag - 标签 - 承载内容

1） 文本标签

<p><em>我</em>如果<strong>爱你</strong></p>
<p>绝不学<ins>攀援</ins>的凌霄花<sup>1</p>
<p>借你<del>的高枝</del>炫耀自己<sub>2</p>
<p></p>
我如果爱你<br>
绝不学痴情的鸟儿<br>
为绿荫重复单调的歌曲<br>

2）列表标签

<dl>
    <!-- definition title 定义标题 -->
    <dt>Python</dt>
    <dd>一种简单好用的面向对象的解释型语言</dd>
    <dd>由荷兰人吉多·范·罗苏母在1989年发明的标称语言</dd>
</dl>
<h2>今天为你推荐的水果是</h2>
<!-- unordered list 无序列表-->
<ul>
    <!-- list item -->
    <li>苹果</li>
    <li>草莓</li>
    <li>山竹</li>
</ul>
<!-- ordered list 有序列表-->
<ol>
    <!-- list item -->
    <li>苹果</li>
    <li>草莓</li>
    <li>山竹</li>
</ol>

3) 图片标签<img>

        <!-- alt 图片加载失败的替换文字 -->
        <!-- align 图片位置(默认居左显示) -->

<figure>
        <img title="背景图" width="200" src="images/1.jpg">
        <!-- figcaption 图片标题 -->
        <figcaption>图1. 背景图</figcaption>
</figure>
<img align="right" width="250" title="Python" src="images/python-logo@2x.png" alt="Python">

4）超链接标签<a>

a. 页面链接

<a href="https://www.baidu.com/" target="_blank">百度</a>

`href` 网址
`target` 打开方式(默认在当前页面打开,_blank在新的空白页打开)

b. 锚点链接

<a name='top'></a>
<a href="#top">回顶部</a>

c. 功能链接

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1363290184&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
<a href="mailto:123@126.com">联系站长</a>

5）表格标签<table>

<table>
        <!-- 表格标题 -->
        <caption>学生信息表</caption>
            <tr>
                <td width="80">学号</td>
                <td width="100">姓名</td>
                <td width="80">性别</td>
                <td width="100">生日</td>
                <td width="100">籍贯</td>
                <td width="100">语文</td>
                <td width="100">数学</td>
                <td width="100">英语</td>
            </tr>
</table>

6）表单标签<form>

<form action="" method="post" enctype="multipart/form-data">

action: 表单处理方法

method: 表单提交方法

enctype: 文件传输方式

表单信息：

7）字符实体(实体替换符)

空格： 

字符实体替换

2. CSS - 层叠样式表 - 显示

3. JavaScript - JS - 交互式行为