HTML入门学习笔记

Posted 2023-02-22 春风十里不如写代码

今天主要学习的是关于html中的列表和表格以及form标签的知识，最后进行一个小练习。

首先我们先来认识和了解一下学习的内容：

一、列表

1无序列表.

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

<h2>软件编程语言</h2>
    <ul>
        <li>Java</li>
        <li>C++</li>
        <li>Python</li>
        <li>javascript</li>
    </ul>

2.有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<h2>搜索引擎排名</h2>
    <ol>
        <li>Google</li>
        <li>Baidu</li>
        <li>Bing</li>
        <li>Sogou</li>
    </ol>

3.自定义列表

<h2>健康食品</h2>
    <dl>
        <dt>水果</dt>
        <dd>苹果</dd>
        <dd>香蕉</dd>
        <dt>蔬菜</dt>
        <dd>西兰花</dd>
        <dd>菠菜</dd>

    </dl>

效果：

二、表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

表格的表头

表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本：

在一些例子中会出现空白的单元格，可以在内容里加入空格占位符来便于我们观察。

表格的合并

colspan=“”这个是表格的列合并

rowspan=""这个是表格的行合并，

在一些例子的实例中往往需要我们进行一些单元格的合并才能达到我们预期的效果。

<table align=center border="1" cellpadding="10px" style="border-collapse: collapse;">
			<th>排名</th>
			<th>关键词</th>
			<th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
			<tr>
				<td>1</td>
				<td>鬼吹灯</td>
				<td><img src="up.jpg"></td>
                <td>356</td>
                <td>3560</td>
                <td><a href= "">贴吧</a>&nbsp;<a href= "">图片</a>&nbsp;<a href= "">百科</a>&nbsp;</td>
			</tr>
</table>

在例子中我们为了是表格好看一些，尝试了用style="border-collapse: collapse;"来将表格的boder看起来更美观一些，为表格设置合并边框模型。

效果：

三、form标签

定义和用法

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

本次我们主要用到form表单中的input元素，通过设置type属性来达到我们想要的效果，其中input的以下等：

1.文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

2.密码字段通过标签<input type="password"> 来定义:注意:密码字段字符不会明文显示，而是以星号或圆点替代。

3.<input type="radio"> 标签定义了表单单选框选项

4.<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

5.<input type="submit"> 定义了提交按钮.当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

6.<input type="file">提供了一个文件目录输入的平台，选择上传文件，参数有name，size。

以上是我在练习中用到的一些属性，其他还有很多，暂时没有列出来。

<h2 style="text-align: center;">个人简历</h2>
    <table align="center" border="1">
        <tr>
            <td>姓名</td>
            <td><input type="text"></td>
            <td>性别</td>
            <td><input type="text"></td>
            <td>出生年月</td>
            <td><input type="text"></td>
            <td  rowspan="4"><input style="position: relative;top: -65px;" type="file"></td>
        </tr>

        <tr>
            <td>民族</td>
            <td><input type="text"></td>
            <td>政治面貌</td>
            <td><input type="text"></td>
            <td>身高</td>
            <td><input type="text"></td>
            
        </tr>

        <tr>
            <td>学制</td>
            <td><input type="text"></td>
            <td>学历</td>
            <td><input type="text"></td>
            <td>户籍</td>
            <td><input type="text"></td>
            
        </tr>

        <tr>
            <td>专业</td>
            <td><input type="text"></td>
            <td colspan="2">毕业学校</td>
            
            <td colspan="2"><input type="text"></td>
            
        </tr>

        <tr>
            <td  colspan="7">技能、特长或爱好</td>
          
        </tr>

        <tr>
            <td>外语等级</td>
            <td colspan="2"><input type="text"></td>
            <td>计算机</td>
            <td colspan="3"><input class="in" type="text"></td>
            
        </tr>

        <tr>
            <td colspan="7">个人履历</td>
            
        </tr>

        <tr>
            <td>时间</td>
            
            <td colspan="2">单位</td>
            
            <td colspan="4">经历</td>
            
        </tr>

        <tr>
            <td></td>
            
            <td colspan="2"><input type="text"></td>
            
            <td colspan="4"><input class="in" type="text"></td>
        </tr>

        <tr>
            <td></td>
            
            <td colspan="2"><input type="text"></td>
            
            <td colspan="4"><input class="in" type="text"></td>
        </tr>

        <tr>
            <td></td>
            
            <td colspan="2"><input type="text"></td>
            
            <td colspan="4"><input class="in" type="text"></td>
        </tr>

        <tr>
            <td colspan="7">联系方式</td>
            
        </tr>

        <tr>
            <td>通信地址</td>
            <td colspan="2"><input class="in" type="text"></td>
            <td>联系电话</td>
            <td colspan="3"><input class="in" type="number"></td>
        </tr>

        <tr>
            <td>E-mail</td>
            <td colspan="2"><input class="in" type="email"></td>
            <td>邮编</td>
            <td colspan="3"><input class="in" type="number"></td>
        </tr>

        <tr>
            <td colspan="7">自我评价</td>
          
        </tr>
    </table>

效果：

今天的学习收获就到这里了，明天也是上课发懵的一天。