HTML基础

最新推荐文章于 2024-10-10 11:15:29 发布

摇光93

最新推荐文章于 2024-10-10 11:15:29 发布

阅读量393

点赞数 1

分类专栏：前端文章标签： html javascript 前端

本文链接：https://blog.csdn.net/qq_73270720/article/details/141812678

版权

前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

基础

  

<!-- html 网页结构 -->

<html>

    <!-- 头部部分 -->

    <head>

        <title>Document</title>

    </head>

    <!-- 主体部分 -->

    <body>

    </body>

</html>

文本标签

 <h1>文本标签</h1>

        <b>粗体</b>

        <strong>粗体</strong>  

        <i>斜体</i>

        <em>斜体</em>

        <u>下划线</u>

        <s>删除线</s>

        <big>正常字体大</big>

        <small>正常字体小</small>

        <sup>上标</sup>

        <sub>下标</sub>

        <p>段落标签</p>

图片标签

 <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="百度logo" title="百度logo" width="200" height="100" />

列表标签

 <h1>列表标签</h1>

        <ul>

            <li>无序列表</li>

            <li>无序列表</li>

            <li>无序列表</li>

        </ul>

        <ol>

            <li>有序列表</li>

            <li>有序列表</li>

            <li>有序列表</li>

        </ol>

超链接

 <h1>链接</h1>

        <!-- 普通链接 -->

        <a href="https://www.baidu.com" target="_blank">百度</a>

        <!-- 书签链接 -->

        <a href="#marker">主题名称</a>

        <a href="#top">头部</a>

        <a href="#bottom">底部</a>

        <h1>书签链接</h1>

  
  
  

        <a name="marker">主题名称</a>

        <a name="top">头部</a>
        <a name="bottom">底部</a>

转义字符

  <h1>转义字符</h1>

        <p>&lt; &gt; &amp; &quot; &apos;&nbsp;</p>

表格

    <h1>表格</h1>

        <table border="1" width="200">

            <caption>标题</caption>

            <tr>

                <th>表头</th>

                <th>表头</th>

                <th>表头</th>

            </tr>

            <tr>

                <td align="center">内容</td>

                <td>内容</td>

                <td rowspan="2">内容</td>  

            </tr>

            <tr>

                <td align="right">内容</td>

                <td>内容</td>

            </tr>

            <tr>

                <td colspan="3">内容</td>

            </tr>

        </table>

多媒体

在网页中插入多媒体的最简单的方法就是利用< a>标签的href属性直接进行链接

 <a href="链接地址">链接源</a>

<h1>多媒体标签</h1>
 <h1>多媒体标签</h1>

        <embed src="https://www.w3school.com.cn/i/movie.ogg" width="200" height="100">embded标签</embed>

        <audio src="https://www.w3school.com.cn/i/song.mp3" controls="controls"></audio>

        <video src="https://www.w3school.com.cn/i/movie.ogg" controls="controls"></video>

        <object data="https://www.w3school.com.cn/i/movie.ogg" width="200" height="100" type="video/ogg">object标签</object>

表单

form

action 值为url,指向处理表单的程序,表单数据将被发送到此程序
method 设定数据传送的方式 get 或 post
name 设定表单的名字

  <form action="https://www.baidu.com" method="get">

            <input type="text" name="username" value="admin" maxlength="10" readonly="readonly" disabled="disabled" />

            <input type="password" name="password" value="123456" maxlength="10" />

            <input type="radio" name="sex" value="male" checked="checked" />男

            <input type="radio" name="sex" value="female" />女

            <input type="checkbox" name="hobby" value="basketball" checked="checked" />篮球

            <input type="checkbox" name="hobby" value="football" />足球

            <input type="checkbox" name="hobby" value="pingpang" />乒乓球

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

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

            <input type="reset" value="重置" />

            <input type="button" value="按钮" onclick="alert('hello')" />

            <select name="city">

                <option value="beijing">北京</option>

                <option value="shanghai" selected="selected">上海</option>

                <option value="guangzhou">广州</option>

            </select>

            <textarea name="desc" cols="30" rows="10">描述</textarea>

        </form>

表单元素

在这里插入图片描述

input

type : text,password,checkbox
name: 输入区的名字
value:对于不同的输入类型,用法不同

select

selected 下拉列表的初始选择状态
value 若设置了value属性,则表单提交的内容即为value属性中设定的内容,而非下拉列表中显示的内容

textarea

name 多行文本框的名称
rows 用于设定最大行数
cols 设定的最大列数

label

当点击该标签的时候,关联的元素会响应

  <input type="radio"  id="c1" value="male">

            <label for="c1">男</label>

filedset

当表单元素很多的时候,讲表单元素用该标签分组,以免用户输入数据时眼花缭乱,而legend标签可为分组设置标题

  <fieldset>

                <legend>标题</legend>

                <input type="text" name="username" value="admin" maxlength="10" readonly="readonly" disabled="disabled" />

            </fieldset>