HTML标签

一 课堂内容

1.1标签的写法

标签的写法 <标签名></标签名> 这个是双标签

                    或者 <标签名 /> 这个是单标签

双标签eg：
        <h1></h1>



单标签eg：
        <img/>

1.2标签的属性

在每个HTML标签上都由属性 <标签名 属性名="属性值" 属性名="属性值"></标签名>

<h1 class="title"></h1>
<a href="https://www.baidu.com">百度</a>

1.3标签的分类

双标签和单标签

               双标签：如：  <h1></h1>  <h2></h2>   <p></p>   <a></a>  <b></b>    <strong></strong>    <i></i>    <em></em>      <u></u>    <del></del>   <ul></ul>   <ol></ol>  <li></li>     <table></table>  <tr></tr>  <td></td>   <button></button>  <dl></dl>  <dt></dt>  <dd></dd>

               单标签：如：<img/>  <input />   <br>  <hr>

块级元素

              块级元素：单独占⼀⾏，允许设置宽⾼值

              ⾏内元素：不会单独占⼀⾏，从左往右排列，设置宽⾼值不起效

              ⾏内块级元素： 不会单独占⼀⾏，从左往右排列，能设置宽⾼值  eg：<img />

1.4常用的标签

1 格式标签

        标题标签

                <h1~6 align= "left|right|center">标题 </h1~6>

        段落标签 <p>

                <p align="left|right|center" >段落内容< /p >

        强制换行标签 (用来输入空行，而不是分割段落)

                <br />

        水平线标签

                <hr width="" size="" align="" color="" noshade / >

        无意义标签

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

1.5html文本标签

                字体标签 <font color="" face="" size="1~7" ></font>

                粗体标签 <b></b><strong></strong>

                斜体标签 <i></i><em></em>

                下划线标签 <u></u><ins></ins>

                删除线标签 <del></del>

                上标标签 

                下标标签 

1.6实体字符

                字符实体由三部分组成：

                以&开始

                中间为实体名或实体编号 

                以 ; 结束

二 课堂笔记

1.1图片的格式

            jpg/jpeg: 标准的图片格式，颜色识别度是最高的，文件大小会大

            png/pneg: 半透明图片

            gif:动图

            svg:可缩放，并且大小不会失真，可以通过代码改变颜色

1.2网页小logo的设计

                   shortcut icon

                    1. 下载一张图片（正方形）

                    2. 找一个网站，能把图片转为icon小图标

                    3. 尺寸大小：32*32以上

                    4. 下载图片（ico）

                    5. 添加到网页<link rel="shortcut icon" href="url" type="image/x-icon" />

1.3水平线标签

                     横线标签 <hr/>

                    noshade 去除阴影

                    size 粗细

                    color 颜色

                    width 宽度

                    align 对齐方式

 <hr noshade="noshade" size="1" color="#ccc" width="500px" align="left"/>