前端学习---HTML

最新推荐文章于 2024-07-25 11:52:08 发布

qq_32476533

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量76

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_32476533/article/details/105174966

版权

前端学习—HTML

在这里插入图片描述
web的标准：结构（HTML）、表现（CSS）、行为（JS）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>文一</h1>
<p>闺中少妇未曾有过相思离别之愁<br />她精心装扮之后兴高采烈登上翠楼。
    忽见野外杨柳青青春意浓，真后悔让丈夫从军边塞，建功封侯。</p>
<hr/>
译文二
<p>闺阁中的少妇从来不知忧愁；初春来临细心装扮，独自登上翠楼。
    忽然见到路边杨柳新绿，心中一阵忧愁，悔不该叫夫君去从军建功封爵。</p>
    <hr/>
</body>
</html>

在这里插入图片描述
span跟div：
span:一行放多个元素，div一行只放一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div>古力娜扎</div><div>迪丽热巴</div>
  <span>古力娜扎</span><span>迪丽热巴</span>
</body>
</html>

在这里插入图片描述

base

表格

表格属性

合并单元格：rowspan（跨行合并） colspan（跨列合并）

表格总结：

无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    用户名：<input type="text" value="请输入用户名" name="yonghuming" /><br />
    密码：<input type="password"><br />
    昵称：<input type="text" value="请输入用户名" name="nicheng" /><br />
    性别：  男<input type="radio" name="sex">  女<input type="radio" name="sex"><br />
    爱好：
        <!-- checked表示一进入页面就默认选中 -->
        睡觉<input type="checkbox" checked="checked">
        看书<input type="checkbox">
        运动<input type="checkbox">
        跑步<input type="checkbox"><br />
            <input type="button" value="获取短信验证码" />
            <input type="submit" value="提交按钮"/>
            <input type="reset" value="重置按钮" /><br>
            <input type="image" src="btn.png" /><br>
        <!-- file文件域，上传文件用的 -->
        <input type="file" />
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>第一种方法用label直接包含input表单</h4>
    <label>用户名：<input type="text" name="username" value="请输入用户名"></label>
    <h4>第二种方法用for属性规定label与哪个表单元素绑定</h4>
    <label for="nicheng">昵称</label>
    <input type="text" name="username" id="nicheng">
</body>
</html>