HTML基础

最新推荐文章于 2024-05-23 20:09:14 发布

Az_plus

最新推荐文章于 2024-05-23 20:09:14 发布

阅读量789

点赞数 20

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

本文链接：https://blog.csdn.net/AZURE060606/article/details/135977950

版权

前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

HTML基础

基础概念和语法

HTML结构由注释<--! -->，根元素<html>，头<head>，主体<body>以及其他部分组成

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

<body>
<table border="1"> <!-- 边框像素设置为1-->
    <thead> <!-- 表头部分-->
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
    </thead>

    <tbody> <!-- 表格主体-->
    <tr>    <!-- 每一行信息-->
        <td>张三</td><td>18</td><td>男</td>
    </tr>

    <tr>    <!-- 每一行信息-->
        <td>李四</td><td>21</td><td>女</td>
    </tr>

    <tr>    <!-- 每一行信息-->
        <td>陈五</td><td>22</td><td>男</td>
    </tr>
    </tbody>
</table>
</body>

结果：

列表`ul li` 、`ol li`

<body>
<h2>无序列表</h2>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
<h2>有序列表</h2>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</body>

结果：

表单`form`

action表示将数据传入何处，method为请求方式

<form action="https://www.baidu.com" method="get">
        <!-- form 中的数据-->
    </form>

text：文本信息
password：密码
radio：单选框
checkbox：复选框
file：文件标签
date：日期
color：颜色
select：下拉菜单
submit：提交按钮
reset：重置按钮
button：自定义按钮

<form action="https://www.baidu.com"
      method="get">
    姓名<input type="text"><br>
    密码<input type="password"><br>
    性别 <input type="radio" name="sex" value="男">男
    <input type="radio" name="sex" value="女">女
    <input type="radio" name="sex" value="保密">保密 <br>
    爱好 <input type="checkbox">听歌
    <input type="checkbox">看书
    <input type="checkbox">跑步 <br>
    城市 <select>
    <option>北京</option> <!-- 默认第一个-->
    <option>上海</option>
    <option>深圳</option>
</select>
    头像 <input type="file"> <br>
    日期 <input type="date"> <br>
    颜色 <input type="color">
    <input type="reset">
    <input type="submit">
    <input type="button" value="自定义按钮">
</form>

结果：

Az_plus

关注

20
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

表格的头部区域(注意和 th 区分, 范围是比 th 要大的): 表示表头单元格. 会居中加粗。：当图像无法显示时显示替代文本。可以使用相对路径和绝对路径。注释信息不会作为代码执行。: 表格得到主体区域.：表示这个图片的路径。标签: 表示整个表格。表示将数据传入何处，
复制链接

扫一扫