WEB学习——HTML初步

HTML初步

• 1. 文本
• 2. 图片
• 3. 表格
• 4. 列表
• 5. 超链接
• 6. 其它

1.文本

• p 标签：表示一行，默认过滤文本中换行符，单独成行。

    <p>你好:大衣柜在夜里跳舞</p>

• pre标签：显示多段落文本，不过滤换行符，独立占行。

    <pre>
        你好:
        大衣柜在夜里跳舞
    </pre>

• span 标签：展示文本，默认不会单独成行。

    <span>你好:大衣柜在夜里跳舞</span>

• h1、h2、…h6：六级标题，显示不同字号文本
• 使用&xxx的形式表示特殊符号叫做字符实体（又分实体名称和实体编号两种）

    <!-->以下两行都将显示“<”即小于符号<--->
    <span>&lt你好:大衣柜在夜里跳舞</span>
    <!-->实体名称<--->
    <span>&#60你好:大衣柜在夜里跳舞</span>
    <!-->实体编号<--->

• b:加粗；i:斜体；del:删除字; em:倾斜； strong:加粗

2.图片

• img 标签：向网页中嵌入一幅图像。从技术上讲， 标签并不会在网页中插入图像，而是从网页上链接图像。 标签创建的是被引用图像的占位空间。“src”链接到同一目录下的图片文件，“alt”属性在图片加载前显示文本内容，“align”设置图片在网页上的布局，“height”和“width”设置图片的大小。

    <img src="图片路径" alt=“加载图片时提示” align="right" height="250" width="200" >

3.表格

• able标签：对表格属性进行设置，“border”=1表示表格有边线。
• caption标签：显示表名。
• tr标签：对表格中的每一行进行处理。
• th标签：用来设置表格中的行标签与列标签。
• td标签：用来设置表格中的单元格数据。
• colspan:可以实现HTML表格中一行跨越多列;
• rowspan:可以实现HTML表格中一列跨越多行

    <table border="1"> 
    <caption>效果图</caption>
    <tr>
    <th> 奖项</th>
    <th> 机构</th>
    <th> 年份</th>   
    </tr>
    
    <tr>
    <td>Best Paper Award</td>
    <td>CCF</td>
    <td>2020</td>
    </tr>

    <tr>
    <td>Best Paper Award</td>
    <td>CCF</td>
    <td rowspan="2">2019</td>
    </tr>

    <tr>
    <td>Best Paper Award</td>
    <td>CCF</td>
    </tr>
    </table>

4.列表

• ul标签：无序列表，列表中元素为并列关系

    <ul>
    <li>123123</li>    
    <li>123123</li>
    <li>123123</li>
    </ul>

• ol标签：有序列表，列表中元素存在先后关系，在显示时会加上编号

    <ol>
    <li>123</li>    
    <li>123</li>
    <li>123</li>
    </ol>

• li标签：显示列表中某一行信息

5.超链接

• a标签：“href”属性记录目标链接，当目标链接是外部网页时，“href”=目标网页的链接，当目标链接在当前页面时，“href”=“#”+“目标位置的id”

<!-->外部<-->
    <a href="https://www.sjtu.edu.cn/"> Shanghai Jiao Tong University </a>
<!-->内部<-->
    <td><a href="#activities" >Activities</a></td>
    <h4 id="activities"> Professional Activities </h4>

6.其它

• br 换行
• hr 水平线