WEB学习——HTML初步

    科技2022-07-15  127

    HTML初步

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

    1.文本

    p 标签:表示一行,默认过滤文本中换行符,单独成行。 <p>你好:大衣柜在夜里跳舞</p> pre标签:显示多段落文本,不过滤换行符,独立占行。 <pre> 你好: 大衣柜在夜里跳舞 </pre> span 标签:展示文本,默认不会单独成行。 <span>你好:大衣柜在夜里跳舞</span> h1、h2、…h6:六级标题,显示不同字号文本使用&xxx的形式表示特殊符号叫做字符实体(又分实体名称和实体编号两种) <!-->以下两行都将显示“<”即小于符号<---> <span><你好:大衣柜在夜里跳舞</span> <!-->实体名称<---> <span><你好:大衣柜在夜里跳舞</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 水平线
    Processed: 0.014, SQL: 8