HTML简介_html&tl;-CSDN博客

本文链接：https://blog.csdn.net/tlkhx/article/details/118268096

标签特点：
标签都是尖括号包裹关键字组成
标签不区分大小写 html5 规定必须小写
双标签：第一个是开始标签第二个是结束标签
单标签：自闭和闭合

快级标签介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--标题标签，数字越大，标题越小-->
<h1>蜜雪冰城</h1>
<h2>蜜雪冰城</h2>
<h3>蜜雪冰城</h3>
<h4>蜜雪冰城</h4>
<h5>蜜雪冰城</h5>
<h6>蜜雪冰城</h6>

<!--段落标签，自动换行-->
<p>我爱你</p>
<p>你爱我</p>
<p>蜜雪冰城甜蜜蜜</p>

<!--列表标签-->
<!--有序列表-->
<ol type="">
    <li>冰鲜柠檬水</li>
    <li>圣代冰淇淋</li>
    <li>柠檬金桔</li>
</ol>
<!--无序列表-->
<ul>
    <li>冰鲜柠檬水</li>
    <li>圣代冰淇淋</li>
    <li>柠檬金桔</li>
</ul>
<!--定义列表-->
<dl>
    <dt>冰鲜柠檬水</dt>
    <dd>圣代冰淇淋</dd>
    <dd>柠檬金桔</dd>
</dl>
</body>
</html>

内联标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--路径-->
<!--相对路径 上一级 ../ 下一级 / 同层级-->
<!--图片标签，src：图片路径，alt：路径错误会显示，title：图片的名称-->
<img src="2.jpg" alt="图片错误" title="操场">
<!--超链接标签，可以实现跳转-->
<!--_black新增页面-->
<a href="https://www.baidu.com" target="_blank">百度一下</a>
<!--锚点，实现从网页最下方到最上方或者相反的功能-->
<a href="#button" name="top">回到底部</a>
<div style="height: 300px;width: 100px; border: 1px solid red"></div>
<div style="height: 300px;width: 100px; border: 1px solid red"></div>
<div style="height: 300px;width: 100px; border: 1px solid red"></div>
<div style="height: 300px;width: 100px; border: 1px solid red"></div>
<a href="#top" name="button">回到顶部</a>
</body>
</html>

快级标签：在不设置宽度的情况下，宽度始终和浏览器的宽度保持一致
设置宽高有效
多个快级标签同时存在时
内联标签：宽度只和内容有关设置宽高无效

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="最后点击提交会跳转的网站" method="post">
    <label for="user">用户名</label>
    <input type="text" name="user" placeholder="输入框内显文字" id="user" ><br>
    <label for="pwd">密码</label>
    <input type="password" name="pwd" placeholder="请输入密码" >
    <input type="radio" value="man" name="sex"> 男
    <input type="radio" value="feman" name="sex"> 女<br>

    
    <input type="checkbox" name="hobby" value="kmv" checked="checked"> 看美女
    <input type="checkbox" name="hobby" value="play"> 玩游戏
    <input type="checkbox" name="hobby" value="music"> 听音乐 <br>

    <input type="file" value="files" accept="image/*"> <br>

    <select name="" id="adress">
        <option value="CD" selected>成都</option>
        <option value="WH">武汉</option>
        <option value="HN">湖南</option>
    </select>

    <textarea name="intr" id="text" cols="30" rows="10"></textarea>

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

<button>按钮</button>
</body>
</html>