HTML

简介

​ 这里主要用于自己学习前端过程中的一些比较难记的知识点或是容易出错的地方，所以内容不是那么完整。一些基础的标签建议之间看文档知道意思就行了。在学习其他的内容的过程中会使用，此时就可以练习加深印象。

表格

  • 表格主要用于展示数据

  • 表格所有内容都应该包含在<table>标签中

  • 表头应该包含在<thead>(语义标签)中

  • 表体应该包含在<tbody>(语义标签)中

  • 表位应该包含在<tfoot>(语义标签)中

  • <tr>表示表中的一行是比<table>低一级的

  • <th>表格头，内容居中，加粗显示

  • <td>普通表格，内容左对齐

【注意】：浏览器一般是通过加载全部表格数据后才显示，但是当数据量很大时，希望能加载一部分，即显示一部分？？

— 使用 带结构的表格！！！ 即使用 三个标签

img

【注意】：如果需要单元格合并？？？—使用 跨列属性colspan、rowspan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
</head>
<body>
    <table align="center" border="1" cellspacing="0" cellpadding="0">
        <thead>
            <tr> 
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2" rowspan="2">丁杨维</td><!---这里对表进行了列合并和行合并 都为合并2格->
                <td>20</td>
                <!-- <td>男</td> --><!--合并之后 后写列或是行的元素就是多余的了就可以去掉-->
            </tr>
            <tr>
                <td>丁杨维</td>
                <!-- <td>20</td> -->
                <!-- <td>男</td> -->
            </tr>
        </tbody>
    </table>
</body>
</html>

image-20220425000232732

table标签的属性

img

列表

有序列表

  • <ol>标签标识里面包含的元素都是有序的可以理解为order list

  • <li>标签定义列表项目。

  • ```html

    <ol>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
</ol>


      ![image-20220425000813561](https://ding-blog.oss-cn-chengdu.aliyuncs.com/images/image-20220425000813561.png)

      有着数字序号标识顺序

    ---

    ### **无序列表***

    * `<ul>`标签 标识该标签包含的数据是无序的但`<ul>`标签和`<ol>`标签都无法包含除`<li>`之外的内容
    * `<li>`标签定义列表项目。 但是`<li>`标签中却可以包含任何标签

    ```html
    <!-- 无序列表 -->
        <h4>你喜欢的食物</h4>
        <ul>
            
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>
                5
            </li>
        </ul>

image-20220425001049361

黑点无法像数字序号那样有着顺序的含义.

自定义列表

  • <dl> 标签定义了定义列表（definition list）、**<dl>** 标签用于结合 <dt>（定义列表中的项目）和<dd> （描述列表中的项目）。
  • **<dt>**标签（定义列表中的项目）
  • <dd> （描述列表中的项目）
<!-- 自定义列表 -->

    <dl>
        <dt>关注我们</dt>
        <dd>微信</dd>
        <dd>qq</dd>
        <dd>weibo</dd>
    </dl>

image-20220425001428912

表单

在HTML中，一个完整的表单通常由表单域，表单控件（表单元素）和提示信息3个部分构成。

image-20220425205501066

表单域

表单域是一个包含表单元素的区域

在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。

<form>标签会把它范围内的表单信息提交给服务器。

image-20220425210050698

表单元素

<input> 元素有很多形态，根据不同的 type 属性（必选属性）。

type属性有：

image-20220425210352522

image-20220425212053862

placeholder与value不同 value相当于会是一个默认值的方式显示在文本框中，而placeholder这是以描述的方式显示起到提醒的作用。

<form action="">
    <!-- 文本框 value就是该input的描述信息会显示出来(默认值)-->
    <input type="text" name="username" value="请输入用户名">
    <!-- 密码框 用于用户填写密码 会有非明文显示的功能 placeholder则是真正的描述不会影响内容 只是起提醒的作用-->
    <input type="password" name="pwd" placeholder="请输入密码">

    <!-- 单按钮 可以实现多选一-->
    <!-- name是表单元素的名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
    男<input type="radio" name="sex" checked> 女 <input type="radio" name="sex">
    <!--复选框 可以实现多选-->
    吃饭<input type="checkbox" name="aihao" checked> 睡觉<input type="checkbox" name="aihao">
</form>

image-20220425212312274

input:type

<!--提交表单中的数据-->
   <input type="submit" value="提交">
   <!-- 重置表单中元素的默认值 -->
   <input type="reset" value="重置">

image-20220425213025395

<!-- 普通按钮 长搭配js一起使用 -->
<input type="button" value="button">
<!-- 上传文件 使用此标签即可选择文件上传 -->
<input type="file">

image-20220425214453918

<lable>标签

image-20220425214600618

<form action="">
        <label for="nan">男</label><br>
        <input type="radio" id="nan" name="sex"> 
        <input type="radio" id="nv" name="sex"> <label for="nv">女</label>
    </form>

image-20220425215214816

核心：<label>标签的for属性的值与相关元素的id属性相同

<select>表单元素

image-20220425215400451

<form action="">
        籍贯:
        <select name="" id="">
            <option>山东</option>
            <option value="">北京</option>
        </select>
    </form>

image-20220425215653010

注意：

  • <select>中至少包含一对<option>

  • 在<option>中定义selected = "selected" 时，当前项即为默认选中项

    <option selected>北京</option>

<textarea>表单元素

image-20220425220048166

<form action="">
        今日反馈:
    	<!-- cols:行数 rows:列数-->
        <textarea name="" id="" cols="30" rows="10">留言板:由textarea实现</textarea>
    </form>

image-20220425220432726

该阶段Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>青春不常在,抓紧谈恋爱</h4>
    <table width="500">
        <tr><!--第一行-->
            <td>性别</td>
            <td>
                <input type="radio" name="sex" id="nan"> <label for="nan">男</label> 
                <input type="radio" name="sex" id="nv"> <label for="nv">女</label>
            </td>
        </tr>
        <tr><!--第二行-->
            <td>生日</td>
            <td>
                <select name="" id="">
                    <option value="">--请选择年份--</option>
                    <option value="">2001</option>
                    <option value="">2002</option>
                    <option value="">2003</option>
                </select>
                <select name="" id="">
                    <option value="">--请选择月份--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                </select>
                <select name="" id="">
                    <option value="">--请选择日--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                </select>
            </td>
        </tr>
        <tr><!--第三行-->
            <td>所在地区</td>
            <td>
                <input type="text" name="" id="" value="北京">
            </td>
        </tr>
        <tr><!--第四行-->
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="hyzk" id="jiehun" checked> <label for="jiehun">结婚</label> 
                <input type="radio" name="hyzk" id="yihun"> <label for="yihun">已婚</label>
                <input type="radio" name="hyzk" id="lihun"> <label for="lihun">离婚</label>
            </td>
        </tr>
        <tr><!--第五行-->
            <td>学历</td>
            <td>
                <input type="text" name="" id="" value="博士后">
            </td>
        </tr>
        <tr><!--第六行-->
            <td>喜欢类型</td>
            <td>
                <input type="checkbox" name="xhlx" id="qingchun"><label for="qingchun">清纯</label>
                <input type="checkbox" name="xhlx" id="keai"><label for="keai">可爱</label>
            </td>
        </tr>
        <tr><!--第七行-->
            <td>个人介绍</td>
            <td>
                <textarea name="" id="" cols="30" rows="3">个人简介</textarea>
            </td>
        </tr>
        <tr><!--第八行-->
            <td></td>
            <td>
                <input type="submit" value="免费注册">
            </td>
        </tr>
        <tr><!--第九行-->
            <td></td>
            <td>
                <input type="checkbox" name="" id="" checked>我同意注册条款
            </td>
        </tr>
        <tr><!--第十行-->
            <td></td>
            <td>
                <a href="#a">我是会员,立即登录</a>
            </td>
        </tr>
        <tr><!--第十一行-->
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li> 年满十八、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>

image-20220425222817761

文档

持续更新中。。。。