HTML基础，内联元素和块级元素，表格，表单

最新推荐文章于 2024-08-22 09:26:51 发布

D11_

最新推荐文章于 2024-08-22 09:26:51 发布

阅读量594

点赞数 13

文章标签： html 前端服务器

本文链接：https://blog.csdn.net/Dxh0112_/article/details/139243486

版权

一、html介绍

html注释

写法： 在浏览器中看不到，只能在代码中看到注释的内容。

意义：

1.把暂时不用的代码注释起来，方便以后使用。

2.对开发人员进行提示。

快捷添加注释：

ctrl+/

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

</body>
</html>

二、内联元素和块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联元素和块级元素</title>  <!--元素就是标签的意思-->
</head>
<body>
<!--块级元素每一个标签对要占据单独的一行，因为他需要的宽度，就是你浏览器的宽度，块级元素内部可以放内联元素或者块级元素 -->
<div>abc</div>
<div>def</div>
<!--内联元素，不需要占据页面的全宽，可以紧接着上一个元素的后面开始，他只需要占据他的内容需要的宽度，内联元素的宽高是不可以改变的，内联元素内部不可以放块级元素 ，只可以放内联元素-->
<span>qwe2</span>
<span>ewq2</span>

</body>
</html>

块级元素介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级标签</title>
</head>
<body>
<!--html里面标签可以传参数，但是参数与参数之间或者参数和关键字之间，要用空格隔开-->
<!--段落标签-->
    <p>abc</p>
    <p>def</p>

<!--列表标签，可以分为三种，有序列表，无序列表，定义列表-->
    <!--有序列表，ol代表整个有序列表，li代表里面每一个列表项，默认情况下用数字来作为序号，type可以修改序号的类型，start可以修改起始序号-->
    <ol type="a">
        <li>abc</li>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>

    <!--无序列表-->
    <ul>
        <li>123</li>
        <li>456</li>
        <li>789</li>
        <li>000</li>
    </ul>
    <!--定义列表-->
    <dt>123</dt>
    <dd>意思就是数字123</dd>
    <dt>456</dt>
    <dd>意思就是数字456</dd>

    <!--div标签，也叫盒子标签-->
    <div>000</div>

    <!--标题标签，根据等级可以分为六个，h1到h6，数字越小，字体越大-->
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
</body>
</html>

三、表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--table就代表一个表格，所有这个表格的内容，都要放在这对标签中间-->
<!--border就是边框,cellspacing就是单元格距离-->
<table border="1" cellspacing="0">
    <tr>
<!--        表头-->
         <th>编号</th>
         <th>姓名</th>
         <th>备注</th>
    </tr>
<!--    tr就等于一行-->
    <tr>
<!--        td就等于一行中的一个单元格-->
<!--       rowspan 合并行 -->
        <td rowspan="2">1</td>
        <td>11</td>
        <td>111</td>
    </tr>
    <tr>
         <td>2</td>
         <td>22</td>
         <td>222</td>
    </tr>
        <tr>
         <td>3</td>
         <td>33</td>
         <td>333</td>
    </tr>
        <tr>
<!--           colspan就是让这个td占据两列的位置，叫做合并列 -->
         <td colspan="2">4</td>
         <td>44</td>
         <td>444</td>
    </tr>
</table>
</body>
</html>

四、表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单介绍</title>
</head>
<body>
<!--对于用户输入来说，只有设置了name属性的元素，才能在提交表单时传递他们的值，name属性规定了input元素的名称（随便取），name可以重复-->
<!--对于用户选择来说，只有设置了value属性，才可以在表单提交时，传递他们的值，value属性规定了这个input的值-->
<!--如果决定上面这两个难以区分，那就记住，不管是用户输入还是用户选择，都要写上name和value两个属性，只不过用户输入的value值等于空字符串-->

<!--表单标签，所有表单内容都要放在这个标签对里面-->
<!--action属性是用来设置提交路径的，也就是说你这个表单要提交到哪里去-->
<form action="">
<!--text类型的input标签会在页面显示一个文本框，作用是让用户输入-->
<!--placeholder就是显示在文本框中的提示-->
    用户名：<input type="text" placeholder="请输入用户名" name="user"><br>
<!--type等于password的时候，输入的内容，会自动变成小黑点，目的是为了安全-->
    密&emsp;码：<input type="password" placeholder="请输入密码" name="passwd"><br>
<!--    type等于submit的input，它会变成一个提交按钮，作用就是提交表单数据到action设置的url里面-->
<!--    单选框和复选框-->
<!--    同组的单选框必须设置同样的name，不然它会变成多选-->
    性别：男<input type="radio" name="sex" value="男">
        女<input type="radio" name="sex" value="女"><br>
    兴趣爱好：唱歌<input type="checkbox" name="hobby" value="唱歌">
            跳舞<input type="checkbox" name="hobby" value="跳舞">
            打篮球<input type="checkbox" name="hobby" value="打篮球"><br>

<!--    下拉框，也是用来选择的，跟单选框效果差不多，设置下拉框中具体选项标签是option-->
    籍贯：<select name="select" id="s1">
<!--    selected规定了默认的选项-->
        <option value="湖南">湖南</option>
        <option value="湖北">湖北</option>
        <option value="江苏">江苏</option>
    </select><br>

<!--    文件上传-->
<!--    对上传的内容做出限制的话，就要设置accept属性-->
    头像：<input type="file" name="chooseFile" accept="image/bmp"><br>
<!--    文本域，跟文本域差不多，只不过可以调整宽高，显示一大块文本框-->
    个人简介：<textarea name="ta" id="ta1" cols="30" rows="10"></textarea><br>

<!--    这个按钮会默认显示提交，如果要修改，就要改变他的value值-->
    <input type="submit" value="登录">
<!--type等于reset的input，它会变成重置按钮，作用就是清空表单里面刚刚输入的内容-->
    <input type="reset">
</form>
</body>
</html>

D11_

关注

13
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
HTML基础，内联元素和块级元素，表格，表单

html注释写法： 在浏览器中看不到，只能在代码中看到注释的内容。意义：1.把暂时不用的代码注释起来，方便以后使用。2.对开发人员进行提示。快捷添加注释：ctrl+/--html是用来描述网页的一种语言，中文是超文本标记语言html不是编程语言，是标记语言标记语言的标记，实际上指的是一套标记标签html使用标记标签来描述网页html文档包含了html标签以及文本内容html文档，也可以叫做web页面，或者叫网页。
复制链接

扫一扫