HTML的笔记

1.HTML的超链接标签:

文字链接:

<a href="https://www.baidu.com">点击进入百度</a>

图片链接:

<a href="https://www.baidu.com"><img src="相对地址" ></a>

锚点链接:

<a href="#c4">点击到达章节4</a>

    <h1> 章节1</h1>

    <p> 段落的内容</p>

    <h1> 章节2</h1>

    <p> 段落的内容</p>

    <h1> 章节3</h1>

    <p> 段落的内容</p>

    <h1 id="c4"> 章节11</h1>

    <p> 段落的内容</p>

2.按钮:

<input type="button">  

3.格式化标签:

  1. <strong>加重语气的的文本

  2. <b>加粗,bold的意思

  3. <em>斜体效果,强调作用

  4. <i>斜体效果

4.列表:

1.无序列表:

<ul>

        <li>5</li>

        <li>5</li>

        <li>5</li>

        <li>5</li>

 </ul>

2.有序列表:

 <ol>

        <li>5</li>

        <li>5</li>

        <li>5</li>

        <li>5</li>

    </ol>

3.自定义列表

<dl>
   <dt>长春</dt>
   <dd>-- 吉林省的省会城市</dd>
   <dt>哈尔滨</dt>
   <dd>-- 黑龙江省的省会城市</dd>
</dl>

5.表格:

<thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>19</td>
                <td>女</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>统计</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
    </table>

6.表单

  • <form> 元素用于创建表单,action 属性定义了表单数据提交的目标 URL,method 属性定义了提交数据的 HTTP 方法(这里使用的是 "post")。

  • <label> 元素用于为表单元素添加标签,提高可访问性。

  • <input> 元素是最常用的表单元素之一,它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型,id 属性用于关联 <label> 元素,name 属性用于标识表单字段。

  • <select> 元素用于创建下拉列表,而 <option> 元素用于定义下拉列表中的选项。

  • 例子:

<form action="abd.do" method="">

        <fieldset>

            <legend>表单演示</legend>

            <label for="username">姓名</label>

            <input type="text" id="username" name="myname">

            <br>

            <label for="mypassword">密码</label>

            <input type="password" id="mypassword" name="mypassword">

            <hr>

            <label for="">性别</label>

            <input type="radio" id="man" name="gender" value="m"><label for="man">男</label>

            <input type="radio" id="woman" name="gender" value="n"><label for="woman">女</label>

            <hr>

            <label for="">爱好</label>

            <input type="checkbox" id="book" name="hobby" value="book"><label for="book">读书</label>

            <input type="checkbox" id="run" name="hobby" value="run"><label for="run">跑步</label>

            <input type="checkbox" id="ball" name="hobby" value="ball"><label for="ball">羽毛球</label>

            <hr>

            <label for="">地址</label>

            <select name="address" id="">

                <option value="cc">长春</option>

                <option value="jl">吉林</option>

                <option value="yj">延吉</option>

                <option value="sy">松原</option>

                <option value="ys">榆树</option>

            </select>

            <hr>

            <label for="">文件上传</label>

            <input type="file" name="myfile">

            <hr>

            <label for="">自我介绍</label>

            <textarea name="myself" id="id1"></textarea>

            <hr>

            <label for="">隐藏信息</label>

            <input type="hidden">

            <hr>

            <input type="submit" value="提交">

        </fieldset>

    </form>

7.HTML区块

7.1<div>元素

<div> 元素是块级元素,可以认为他是其他 HTML 元素的容器。

7.2<span>元素

<body>

    <!-- div:该元素是块级元素,通常用于页面的整体布局

         该元素可以作为其他任何元素的容器 -->

    <div id="main">

        <div id="top">top</div>

        <div id="center">center</div>

        <div id="down">down</div>

    </div>

</body>

8.音频标签和视频标签

8.1音频标签:

<audio> 标签定义声音,比如音乐或其他音频流。

目前,<audio> 元素支持的3种文件格式:MP3、Wav、Ogg。

<body>

    <source>

    <audio src="./../resource/audio.mp3" controls autoplay></audio>

</body>

8.2视频标签:

<video> 标签定义视频,比如电影片段或其他视频流。目前,<video> 元素支持三种视频格式:MP4、WebM、Ogg。

<body>

    <video src="./../resource/flower.webm" controls width="800" height="600"></video>

    <!-- 考虑浏览器不兼容问题,有些格式不支持那就可以使用source子元素,

    让浏览器自上而下寻找可用视频文件。 -->

    <source src="./../resource/flower.webm">

</body>

  • 8
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值