学习日记——HTML入门第一课

1.了解HTML的定义，基本结构

①对于超文本标记语言的理解，是超越文本（不限制于字符，包含视频音频）用“<>”这个特殊字符来书写的语言

②基本结构为

复制代码
<!DOCTYPE html>
<html>
    <head>             
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
        网页主体
    </body>
</html>
复制代码

2.认识html的常用标签，并练习使用

常用标签：<title>文档标题标签 、<meta>元信息标签 、<h1>标题标签 <p>段落标签 <br/>换行标签 <hr/>水平线标签 <strong>加粗标签 <em> 斜体标签

<img>图像标签，src：图像地址，width：图片宽度，height：图片高度

<a> 链接标签，href：链接路径，target：链接打开窗口

<a href="demo013.html" target="_self">
            <img src="img/abc.png" width="100px" height="100px"
            alt="在加载中..." title="点击我！">
        </a>

<a href="#marker">锚链接，用于标记位置

<a name="mark"> a </a>
正文内容
<a href="#mark"> b <.a>

3.学习HTML列表，表格，媒体元素的使用
①HTML列表

定义：列表是一种特别的对象集合

无序列表：

 

<ol>
            <li><strong>苹果</strong></li>
            <li>香蕉</li>
            <li>菠萝</li>
        </ol>

 

有序列表：

<ul>
            <li>苹果</li>
            <li>水果</li>
            <li>香蕉</li>
        </ul>

自定义列表：

<dl>
            <dt><a href="demo001.html" target="_blank"><em>水果</em></a></dt>
            <dd>苹果</dd>
            <dd>香蕉</dd>
            
            
        </dl>

 

②HTML表格

 

表格定义：有行有列，多个单元格组成

表格结构：

<table border="5px" background="img/123.png" bordercolor="red" bgcolor="skyblue" cellpadding="5px" cellspacing="5px"  >
            <tr><td>姓名</td><td>张三</td></tr>
            <tr><td>性别</td><td>男</td></tr>
            <tr><td>年龄</td><td>20</td></tr>
            <tr><td>籍贯</td><td>江苏</td></tr>
            <tr><td>体重</td><td>120</td></tr>
        </table>

跨列：colspan

跨行：rowspan

③媒体元素

视频元素：vedio

 

<video controls>
    <source src="video/video.webm" type="video/webm"/>
</video>

音频元素：radio

 

<audio controls>
    <source src="music/music.ogg" type="audio/ogg"/>
</audio>

 

posted @   少年zzz  阅读(21)  评论(0)  编辑  收藏  举报
相关博文：
·  学习日记——表单
·  学习日记——初识JavaScript
·  HTML快速入门第一课
·  初识HTML
·  Day01初识HTML
阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
点击右上角即可分享
微信分享提示
AI IDE Trae