HTML基础

最新推荐文章于 2024-10-18 19:19:52 发布

只要名字够长就有猪跟着念

最新推荐文章于 2024-10-18 19:19:52 发布

阅读量325

点赞数 10

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

本文链接：https://blog.csdn.net/JennyXi2001/article/details/136501295

版权

测开专栏收录该内容

15 篇文章 0 订阅

订阅专栏

HTML介绍

在这里插入图片描述

HTML骨架标签

根标签

在这里插入图片描述

浏览器可见
眼睛可见

编写HTML工具

在这里插入图片描述

常用标签

标题标签

标题：h1~h6

<h1>我是h1</h1>
<h6>我是h6</h6>

段落：p

<p>我是段落</p>

超链接 a

<a href="https://www.baidu.com">⽂本</a>

href：跳转的地址或⽂件
target:打开窗⼝模式。新窗⼝：target=“_blank”

图⽚

在这里插入图片描述

<!--
 图像标签：img
 属性：
 src:图⽚路径
 title：悬停显示⽂字
 width:宽100px px:像素
 height:⾼
 alt:图⽚未加载显示
 -->
 <img src="011.jpg" title="希望在⽥野" width="100px" height="200px"
alt="此处有⼀张⽥野照⽚"/>

测试点：必须有title属性（悬停和未加载显示）

空格与换⾏

<!DOCTYPE html>
<html>
<head>
    <title>My HTML Page</title>
</head>
<body>
    <h1>Hello,&nbsp;World!</h1>
    <p>This is a paragraph of text.<br />
    This is a new line.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

空格：   &->shift+7
换⾏： <br />

布局标签

<!DOCTYPE html>
<html>
<head>
    <title>盒子布局</title>
    <style>
        .big-box {
            display: block; /* 独占一行 */
            background-color: lightgray;
            padding: 10px;
            margin-bottom: 10px;
        }
        
        .small-box {
            display: inline; /* 一行可以放多个 */
            background-color: lightblue;
            padding: 5px;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="big-box">
        <span class="small-box">小盒子1</span>
        <span class="small-box">小盒子2</span>
        <span class="small-box">小盒子3</span>
    </div>
    <div class="big-box">
        <span class="small-box">小盒子4</span>
        <span class="small-box">小盒子5</span>
    </div>
</body>
</html>

⼤盒⼦：div、独占⼀⾏
⼩盒⼦：span、⼀⾏可以放多个

列表标签

script:js标签
style:css标签
link:外部加载css标签

表单input标签

    文本框：
    <input type="text" name="" id="">
    <br> 密码框：
    <input type="password" name="" id="" placeholder="请输入密码">
    <br> 单选框:
    <input type="radio" name="" id="">
    <br> 多选框:
    <input type="checkbox" name="" id="">
    <input type="checkbox" name="" id="">
    <input type="checkbox" name="" id="">
    <br> 文件选择:
    <input type="file" name="" id="">
    <br> 提交按钮:
    <input type="submit" name="" id="">
    <br> 重置按钮:
    <input type="reset" name="" id="">
    <br> 普通按钮:
    <input type="button" name="" id="">

⽂本框： <input type="text" />
密码框： <input type="password" />
普通按钮：type=button
提交按钮：type=submit
重置按钮：type=reset

表单标签from

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
    <!DOCTYPE html>
<html>
<head>
    <title>表单元素</title>
</head>
<body>
    <form action="submit.html">
        文本框：<input type="text" name="textbox" id="textbox"><br>
        密码框：<input type="password" name="password" id="password" placeholder="请输入密码"><br>
        单选框：<input type="radio" name="radio" id="radio1"><br>
        多选框：
        <input type="checkbox" name="checkbox1" id="checkbox1">
        <input type="checkbox" name="checkbox2" id="checkbox2">
        <input type="checkbox" name="checkbox3" id="checkbox3"><br>
        文件选择：<input type="file" name="file" id="file"><br>
        提交按钮：<input type="submit" name="submit" id="submit"><br>
        重置按钮：<input type="reset" name="reset" id="reset"><br>
        普通按钮：<input type="button" name="button" id="button">
    </form>
</body>
</html>


	</body>
</html>

作⽤：提交⻚⾯输⼊的数据到指定⻚⾯或后台
补充：面试题目get和post区别
链接: https://blog.csdn.net/youtufeitu/article/details/124306915?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170971818216800211549897%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=170971818216800211549897&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_alltop_positive~default-1-124306915-null-null.142^v99pc_search_result_base6&utm_term=get%E5%92%8Cpost%E5%8C%BA%E5%88%AB&spm=1018.2226.3001.4187