web前端 html基础

最新推荐文章于 2024-08-21 20:15:01 发布

全糖去冰灬

最新推荐文章于 2024-08-21 20:15:01 发布

阅读量55

点赞数

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

本文链接：https://blog.csdn.net/weixin_53416906/article/details/120473577

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

字体：one dark pro

1.基本结构

1.<!DOCTYPE> 位于文档最前面，声明是哪种html版本
2.< html lang=“en”> 定义文档显示的语言
3.< meta charset=“UTF-8”>

4.为< meta http-equiv=“X-UA-Compatible” content=“IE=edge”> 以最高版本IE渲染页面
5.忽略
6.< title>Document</ title> Document为无标题

2.块级标签

2.1基本块级标签

标题 < h1>~< h6
段落 
长横线 < hr>(不常用)

2.2基本块级标签

无序列表

  <!-- ul里面只能有li，li没有限制 -->
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>

在这里插入图片描述

有序列表（不常用）

<!-- ol里面只能有li-->
    <ol>
        <li>你</li>
        <li>我</li>
        <li>他</li>
    </ol>

在这里插入图片描述

自定义列表

<!-- dl只能包含dt跟dd-->
    <dl>
        <dt>名词</dt>
        <dd>补充说明1</dd>
        <dd>补充说明2</dd>
    </dl>

在这里插入图片描述

表格标签(用于展示数据)

<!-- thead跟tbody没有语义，仅是区分头部跟主体 -->
   <table>
       <thead>
            <tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
       </thead>
       <tbody>
            <tr><td>小明</td><td>男</td><td>20</td></tr>
            <tr><td>小红</td><td>女</td><td>20</td></tr>
       </tbody>
    </table>

表格合并
5. 表单标签
表单标签常用的属性

属性	属性值	描述
action	url	规定提交表单向何处发送数据
method	get、post	怎么提交表单
name	自定义	表单名称
target	_blank、_self、_parent_top、_framename_	规定输入字段的最大长度

input标签

属性	属性值	描述
name	用户自定义	定义input元素的名称
value	用户自定义	规定input元素的值
checked	checked	规定input元素首次加载时默认选中
maxlength	正整数	规定输入字段的最大长度
size		指定表单元素的初始宽度

用法

单行文本框 2. 密码 3.单选多选 4.提交表单数据
重置表单数据 6.普通按钮 7.上传文件

<body>
    <form action="提交地址" method="提交方式" name="表单名称" target="提交后显示的页面">
        <!-- 单行文本框 -->
        用户名<input type="text"> <br>
        <!-- 密码 -->
        密码<input type="password"> <br>
        <!-- 单选框 -->
        性别<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="睡觉">睡觉 <br>
        <!-- 提交表单数据 -->
        <input type="submit" value="提交"> <br>
        <!-- 重置表单数据 -->
        <input type="reset" value="重置"> <br>
        <!-- 普通按钮 -->
        <input type="button" value="普通按钮"> <br>
        <!-- 上传文件 -->
        <input type="file" name="files">
    </form>

在这里插入图片描述

3.常用标签

3.1文本标签

粗体 (语义更强烈)
 
斜体 (语义更强烈)
 
删除线< del>< /del>(语义更强烈)
 < s>< /s>
下划线< ins>< /ins>(语义更强烈)

label标签

   <input type="text" id="text">
   <label for="text"> 用户名</label>

在这里插入图片描述

下拉列表

籍贯：
    <select>
        <!-- 默认选择广东 -->
        <option selected="selected">广东</option>
        <option>山东</option>
        <option>北京</option>
    </select>