了解HTML

最新推荐文章于 2024-09-23 17:12:42 发布

ElegantFlower

最新推荐文章于 2024-09-23 17:12:42 发布

阅读量232

点赞数

分类专栏： HTML 文章标签： html 基础

本文链接：https://blog.csdn.net/ElegantFlower/article/details/80030797

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实例1

<!DOCTYPE html>                  <!--声明为HTML5类型文档-->
<html>                           <!--元素是 HTML 页面的根元素，开始标签-->
<head>                           <!--元素包含了文档的元（meta）数据-->
<meta charset="utf-8">
<title>初学者的(csdn.com)</title> <!--元素描述了文档的标题-->
</head>
<body>                           <!--元素包含了可见的页面内容-->

<h1>我的第一个标题</h1>             <!--元素定义一个大标题-->

<p>我的第一个段落。</p>             <!--素定义一个段落-->

</body>                             <!--呈献给用户的内容-->
</html>                             <!--结束标签-->

什么是 HTML？

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)不是一种编程语言，而是一种标记语言 (markup language)，标记语言是一套标记标签 (markup tag)，HTML 使用标记标签来描述网页

HTML标签

HTML 标记标签通常被称为 HTML 标签(HTML tag)。
HTML 标签是由尖括号包围的关键词，比如<html>
HTML 标签通常是成对出现的，比如 <b>'和 '</b>'
标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签

HTML文档称作网页，用来描述网页，包含了HTML标签和纯文本

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

编辑器的话选择notepad ，sublime均可

常见标签

<!DOCTYPE html>
<html>
    <head>
        <mata charset='utf-8'></mata><!-- utf-8编码 -->
        <title>阿磊首页</title><!-- 网页标题 -->
    </head>

    <body>
        <h1 id='top'>顶部</h1>
        <table width="600" border="1" bordercolor="green" cellspacing="0" cellpadding="0" bgcolor="yellow">

        <audio controls="controls" autoplay loop>
            <!--control表示控制音频播放，autoplay表示自动播放音乐，loop表示循环播放，可以设置参数规定播放次数-->
            <source src="images/anjing.mp3"><!--音频存放路径/文件名-->
        </audio>

        <video controls="controls" autoplay loop><!--control表示控制视频播放，autoplay表示自动播放视频，loop表示循环播放，可以设置参数规定播放次数-->
            <source src="images/xiaohua1.MP4"><!--视频存放路径/文件名-->
        </video>

        <!--制作列表快捷代码 table>tr*3>td*4   tr表示行，td代表列，代码表示生成一个三行四列的列表-->
        <table border="1"><!-- 表格边框宽度，制表是有快捷代码的 -->
            <caption>骑士队数据</caption><!-- 表格标题 -->
            <tr  align="center"><!-- 表示第一行的四列数据居中 -->
                <th>球员</th><!-- th表示表头，一般第一行中使用，自动加粗 -->
                <th>得分</th>
                <th>篮板</th>
                <th>助攻</th>
            </tr>

            <tr  align="center"><!-- 表示第二行的四列数据居中 -->
                <td>
                    <img src="images/老詹.jpg" alt="这是老詹" width="40"><br>
                    <!-- 表格中球员名字改为图片，alt表示如果图片添加失败，图片位置出现文字，
                        成功则不出现文字，width表示图片宽度，br表示换行 -->
                    <h9>詹姆斯</h9><br><!-- 图片位置也添加名字 -->
                </td>
                <td colspan="2" align="center">20</td>
                <!-- colspan表示得分篮板这两列数据同为20，相当于合并单元格 -->
                <td>20</td><!-- 老詹助攻20个-->
            </tr>

            <tr  align="center">
                <td>smith</td>
                <td>22</td>
                <td colspan="2" align="center">20</td>

            </tr>

            <tr  align="center">
                <td>队草</td>
                <td colspan="3" align="center">20</td><!-- 队草三项数据全为20 -->
            </tr>
        </table>

        <!-- 标签分为两类，行级标签（元素）块级标签（元素）-->
        <!-- img: image放图片的标签-->
        <img src="images/xiao.jpg" alt="这是基叔" width="200"><br><!-- br为换行符 -->

        <p><img src="images/xiao.jpg" alt="这是基叔" width="200"></p>
        <!--<p> 标签定义段落。会自动在其前后均创建一些空白 -->

        <img src="images/xiao.jpg" alt="这是基叔" width="200">
        <!-- <div> 是一个块级元素。这意味着它的内容自动地开始一个新行，并且行之间有空行-->
        <!-- div:division:代表一个逻辑区域（块级）-->
        <div><img src="images/xiao.jpg" alt="这是基叔" width="200"></div>

        <hr>
        <h1 id="top">Hello,world!</h1><!-- 最大的标题，标题等级分为h1-h6 -->
        <h2>你好，小花</h2><!-- 第二级标题-->
        <h9>没有这个标签</h9><!--超出h6，均相当于默认标题-->

        鹅鹅鹅<br>曲项向天歌<br>白毛浮绿水<br>红掌拨清波<!--br换行-->

        <p>鹅鹅鹅<sup1>1</sup></p><!--sup表示上标-->
        <p>曲项向<sub>2</sub>天歌</p><!--sub表示下标-->
        <p>白毛浮绿水</p>
        <!--<p> 标签定义段落。会自动在其前后均创建一些空白 -->
        <p>红掌拨<strong><em>清波</p>
        <!--strong表示把文本加粗，<em>变为斜体。-->

        <p id = "half">回到中段</p><!--网页长，定义一个按钮，回到网页中段-->

        <!--ul:unordered list 无序列表-->
        <!--ol:ordered list 有序列表-->
        <!--dl:definition list 定义列表-->
        <dl>
            <dt>HTML</dt><!--dt定义的题目 -->
            <dd>超文本标记语言</dd>    <!--dd定义的描述 -->
            <dt>CSS</dt>
            <dd>层叠样式表</dd>  
            <dt>JavaScript</dt>
            <dd>当下非常流行的编程语言可以在浏览器中执行</dd>   
        </dl>
            <ol>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
                <li>Item 6</li>
            </ol>

            <!--a: anchor:超链接标签，可以打开一个超链接/页面链接:可以连接自己和别人-->
            <!--页面链接-->
            <a href="http://www.qq.com" target="_blank">腾讯</a><!--target等于blank表示点击腾讯（超链接）在新窗口打开腾讯首页-->
            <a href="http://www.baidu.com">
                <img src="https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=super" target="_blank"></a>
            <!--点击百度图标，超链接连接到图片访问百度首页-->


            <!--锚点连接-->
            <a href="#top">回顶部</a><!--上下对应-->
            <a href="#half">回中部</a>

            <!--功能性连接--><!--跳转QQ聊天界面-->
            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=939774881&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:939774881:53" alt="你好，联系小磊" title="你好，联系我"/></a>


            <iframe src="http://maps.baidu.com/" frameborder="0" width="800" height="800">
            <!--在自己的网页里嵌入其他的网页，百度地图-->



            <!--表单:method(get,post) ,上传文件enctype-->
    <form action="" method="post" enctype="multipart/form-data">
        <fieldset>
            <legend>必填信息</legend>
            <!--type;指定输入的类型-->
            <p><label >用户名:</label>
            <input type="text" name="uername" required maxlenth='8' placeholder='请输入8位用户名'>
            </p>
            <p><label>密码:</label>
            <input type="password" name="pwd" maxlenth='8' placeholder='请输入8位密码'>
            </p>
            <p><label>性别:</label>
            <!-- radio:单选按钮-->
            <input type="radio" name='sex' checked>男
            <input type="radio" name="sex">女
            </p>
            <p>
            <label>生日:</label>
            <input type="date" name="birth">
            <label>邮箱:</label>
            <input type="email" name='email'>
            </p>
        </fieldset>

        <fieldset>
            <legend>选填信息</legend>
            <!--checkbox:复选按钮-->
            <p><label>爱好:</label>
            <input type="checkbox" name="fav" checked>吃鸡
            <input type="checkbox" name="fav">篮球
            <!--disabled:禁用,不能修改-->
            <input type="checkbox" name="fav" checked disabled>跑步
            <input type="checkbox" name="fav">炒股
            </p>
            <p>
            <label>上传图片:</label>
            <!--multiple:多选文件，一次选够，不能分两次选-->
            <input type="file" name="photo" multiple>
            </p>
            <!--select:下拉菜单-->
            <p>
            <label>籍贯:</label>
            <select name="" id="">
                <option value="1">北京</option>
                <option value="2">重庆</option>
                <option value="3" selected>郑州</option>
            </select>
            </p>

            <!--textarea:文本区-->
            <p>
            <label>文本区:</label>
            <textarea cols="10" rows="10"></textarea>
            </p>
        </fieldset>
        <!--submit:提交-->
        <p>
        <input type="submit" value="注册">
        <input type="reset" value="重填">
        </p>
    </form>
    </body>
</html>