HTML-由标签构成的语言

注释标签：<!-- -->

标题标签：h1~h6

段落标签：p

换行标签：br

转义字符：/

格式化标签

加粗：<strong>加粗</strong>//<b></b>

倾斜：<em>倾斜</em>//<i></i>

删除线：<del>删除</del>//<s></s>

下划线：<ins>下划线</ins>//<u></u>

虽然我们在html文件中分行编写，但是在页面中是在同一行展示，如果要在页面中分行展示，则需要换行标签br标签，但是像之前的h1~h6，p这些块级元素都是可以独占一行的，格式化标签（行内元素）就不能独占一行，取决于每个标签的特性

图片标签：img

使用img标签来表示图片，img标签属于单标签，不需要结束标签

img里面可以写很多的属性，其中最重要的属性就是src属性：通过src描述图片具体所在的位置

  <img src="E:\新建文件夹 (2)\aadc3801efe23503d2e357d62c121ae.jpg" 
    alt "这是一朵小花，如果图片丢失则显示一个裂开的小图片，配上这里的文字，如果图片正常展示就不会显示" 
    title = “当光标放在图片上时会显示这里的内容” 
    width=“宽度(px)” 
    height=“高度(px)”>

设置尺寸的时候，涉及到一个重要的单位px，像素。每个像素都能显示一个不同的颜色，像素数越多显示效果就越好。如果我们同时设置高度宽度，可能导致图片比例失调，如果只调节其中一个，则另外一份等比例伸缩。

这里的src可以是一个绝对路径，也可以是一个相对路径，还可以是一个网络路径

在html的开始标签（结束标签不可以）里可以给标签设置一些属性，属性都是“键值对”这样的形，键值对之间使用空格来分割（可以是一个空格，也可以是多个空格，还可以是换行），键值之间用 = 来分割，这里的key是不需要加引号的，value一般使用“”来引起来，并且一个标签，可以设置多个属性~~，不同的html标签，支持的属性是不一样的（当然，也有些属性，是每个标签都有的）

超链接 a 标签

效果就是点击后跳转到另外一个页面

<a href="这里写一个正确的网址"> 这里是链接名</a>

a标签也是行内元素，不是块级元素

test1.heml和test2.html

在test1中用a标签<a href="test2.html">进入test2页面</a>可以进入网站中test2页面

#：空连接，是属于在开发阶段，有的连接具体的地址还不确定就可以先用#占个位置

如果href里面的链接，是对应到一个普通文件（不是html之类的），就会触发下载操作

如果把图片放到a标签里面，就可以实现，点击图片之后，跳转的效果

<a href="链接地址">

    <img src="图片地址" alt="">

</a>

锚点链接：

表示点击了之后，是在本页面里面跳转到某个特定的位置，在本页面内跳转，这个机制可以通过锚点链接来实现，也可以通过js来实现（使用js实现可以加入一些动画效果）

表格标签：

table：表示整个表格  tr：表示表格的一行  td：表示一列  th：表示表头中的一列

如果不加任何属性，看到的表格就是一个特别原始的表格，给table了

加一些属性就可以使其更像一个表格

width宽度 height高度 cellspacing调节缝隙

使用css中的text-align属性来使表格的内容居中

        <style>

                td{

                        text-align: center;

                }

        </style>

        <table border="2px" width="" height="" cellspacing="0">

               <tr>

                        <th>姓名</th>

                        <th>学号</th>

                </tr>

                <tr>

                        <td>**</td>

                        <td>**</td>

                </tr>

                <tr>

                        <td>**</td>

                        <td>**</td>

                </tr>

        </table>

       

 如上图所示的给边框加属性的一些操作其实也是可以通过css来实现的，实际开发中很少会直接使用table的属性来做，这些属于历史遗留问题，最开始只有html，只能通过table属性来操作

列表标签：

主要用来罗列一组并列的数据

无序列表（最常用）：

                <ul>

•                         <li>**</li>
•                         <li>**</li>
•                         <li>**</li>

                </ul>           

小圆点可以通过css来修改                

有序列表：         

                  <ol>

1.                         <li>**</li>
2.                         <li>**</li>
3.                         <li>**</li>

                </ol>

自定义列表：

                <dl>

                        <dt>**</dt>

                        <dd>**</dd>

                        <dd>**</dd>

                        <dd>**</dd>

                </dl>

        形如：我的爱好：

                        爱好一

                        爱好二

                        爱好三

表单标签：

是用户和页面之间交互的重要手段。大部分的gtml标签都是给用户“展示”，而表单标签是让用户来输入。

form表示一个表单标签，借助这个form就可以允许用户输入一些信息，并且提交到服务器上。在form里面可以放一些和用户交互的组件。

input标签，有很多形态

• text：单行文本
• password：也是单行文本，可以输入密码，输入的内容显示为小圆点，用于隐藏输入内容
• radio：单选框，可以设定name，相同name的单选框之间会产生互斥，利用checked可使单选框默认选中一个选项，可以让input标签与lable标签关联，使得点击单选框名字，也可以选中
• checkbox：复选框，也可以使用checked表示默认选中，或搭配lable使得点击单选框名字，也可以选中
• button：按钮，value可设置按钮名，onclick属于js代码，点击按钮时触发，内容是alert里的内容，服务器直接执行
• file：点击选择文件可以选择一个本地文件，浏览器会打开这个文件，然后可以进一步实现上传/提交到服务器

<form>
    <input type="text"><br>
    <input type="password"><br>    
    <input type="radio" name="gender" id="male">男
    <lable for="male">男</lable>
    <input type="radio" name="gender" checked="checked" id="female">女
    <lable for="female">女</lable>
    <input type="checkbox" checked="checked">吃饭
    <input type="checkbox">睡觉
    <input type="checkbox">打游戏
    <input type="checkbox">看电影
    <input type="button" value="这是按钮" onclick="alert('hello')">
    <button onclick="alert('hello')">这是按钮</button>
    <input type="file">
</form>

select：下拉菜单

<form>
    <select>
        <option name="1">请选择年份</option>
        <option select="selected">2001</option name="1">
        <option>2002</option name="1">
        <option>2003</option name="1">
        <option>2004</option name="1">
    </select>
</form>

textarea：多行编辑框 

<textarea cols="30" rows="10">

</textarea>

以上这些html标签都是属于搭配form表单使用的标签

无语义标签--div和span：

前面的标签都是“有语义标签”，每个标签都有一个明确的角色，最初HTML诞生的初衷是为了表示“报纸/杂志”这样的媒体，随着时代的发展，HTML不仅仅是为了作为报纸，而是变成了一个应用程序，相比于有语义标签，无语义标签更适合于应用程序

这里的div和span就可以代替上述绝大部分有语义标签的功能，极端来讲，一个网页，可以90%的标签都是div/span，但是这种做法并不常见，div默认是块级元素独占一行，span默认是一个行内元素不独占一行。

<div>
    <span></span>
    <span></span>
    <span></span>
</div>

也可以把div和span想象成一个矩形的盒子，在这个盒子里可以放各种的页面内容。