HTML基础入门（二）

最新推荐文章于 2024-07-12 20:49:16 发布

Han_Zhou_Z

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量201

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/Han_Zhou_Z/article/details/120595972

版权

一、列表标签

1、无序列表

<ul type='项目符号的类别'>
    <li>列表内容</li>
    <li>列表内容</li>
    <li>列表内容</li>
</ul>

2、有序列表

<ol type='项目符号的类别' start='起始值'><!--起始值是指从位续第几个开始为第一个开始-->
    <li>列表内容</li>
    <li>列表内容</li>
    <li>列表内容</li>
</ol>

注：其中其注释内容不会在网页中显示。

3、列表的镶嵌

<ul type='项目符号的类别'>
   <li>列表内容</li>
       <ol type='项目符号类别'>
           <li>列表内容</li>
       </ol>
   <li>列表内容</li>
       <ul type='项目符号类别'>
           <li>列表内容</li>
       </ul>
   <li>列表内容</li>
</ul>

在列表中镶嵌列表，有序列表和无序列表可随意搭配进行镶嵌

二、表格标签

1、表格标签的作用

（1）用来做布局：在做规整的网页时，用表格会显得更加的整齐并且容易做出。

（2）作为信息管理页面的控件使用（控件是指给用户做控制的，是指对数据和方法的封装）

2、表格标签

<table border='边框线的宽度' align='表格在页面中的对齐方式' bgcolor='表格的背景颜色' background='表格的背景图片'>
    <caption>表格的标题</caption>
    <thead> <!--语义标签，其表示接下来的行是表格的头部-->
        <tr align='行的对齐方式' bgcolor='行的背景颜色' background='背景图片'>
            <th width='列宽' >表格内容</th>
        </tr>
    </thead>
    <tbody><!--语义标签，其表示接下来的行为表格的主体部分-->
        <tr align='单元格对齐方式'>
            <td>表格内容</td>
        <tr>
    </tbody>
</table>

<caption>标题</caption>定义表格标题，并且会自动居中

<thead></thead>是语义标签，表示接下来的行是表格的头部

<tr></tr>表示表格的行，一个<tr></tr>代表一行

<th></th>表示列头，其中的文字会自动加粗且居中

<tbody><tbody>语义标签，表示接下来的行为表格的主体部分

<td></td>表示表格中的主体部分

3、单元格的合并

（1）跨列合并：一个单元更横跨多列，在<td>标签中添加colspan，该属性的值为占据的列数

<table>
    <tr>
        <td colspan='3'>列表内容</td>
    </tr>
</table>

表示一个单元格占据三列

（2）跨行合并：一个单元更横跨多行，在<td>标签中添加rowspan，该属性的值为占据的行数

<table>
    <tr>
        <td rowspan='3'>列表内容</td>
    </tr>
</table>

表示一个单元格占据三行

4、表格的边框属性：

用border属性来设置边框线的粗细

<table border='2'>
    <tr>
        <td>列表内容</td>
    </tr>
</table>

border的数值越大，则边框线越粗

5、表格的填充属性：

用cellpadding属性来设置单元格内容和单元格之间的边距

<table cellpadding='4'>
    <tr>
        <td>列表内容</td>
    </tr>
</table>

cellpadding的数值越大，则文字内容与边框线的距离越大

6、单元格的间距属性：

用cellspacing属性来设置单元格之间的间距

<table cellspacing='2'>
    <tr>
        <td>列表内容</td>
    </tr>
</table>

cellsapcing的数值越大，则单元格与单元格之间的间距越大

三、表单

1、用途

（1）用户注册

（2）收集信息

（3）信息反馈--调查问卷

（4）搜索引擎

2、标签

（1）表单标签：

所有的变淡空间必须放在该标签下

action属性：表单数据提交的远程服务器的地址（服务器的url）

method属性：表单数据的提交方式

<form action="表单数据提交的远程服务器" method="GET">
    <input type="text"/>
</form>

（2）表单控件：

1、input控件：

a、单行输入文本框：<input type='text'/>

输入的内容是可以显示出来的，并且可以限制字符数

b、密码框：<input type='password' />

当在密码框输入密码时，所打出的密码是表现不出来的，表现形式为**

c、重置按钮：<input type='reset' value='按钮上显示的文字'/>,若没有value属性,按钮上默认显示'重置'

注：只有放在<form></form>中才有效

d、提交按钮：<input type='submit'/>，将表单数据提交给action指定的URL

e、单选按钮：<input type='radio' name='控件的名称' checked/> ,属性'checked'表示选中

f、复选框：<input type='checkbox'/> 可进行多个选项选择

g、数字：<input type='number'> 框中只能输入数字

h、日期选择框：<input type='datar'>

i、时间选择框：<input type='time'>

j、隐藏控件：<input type='hidden'> 不会再页面中显示出来

    <form action="#">
        <input type="text">
        <input type="password">
        <br><br>
        <input type="reset" value="清除">
        <input type="submit">
        <br><br>
        <input type="radio" name="sex" id="c1">
        <label for="c1">男</label>
        <input type="radio" name="sex" id="c2">
        <label for="c2">女</label>
        <br><br>
        <input type="checkbox" name="hobby" id="h1">
        <label for="h1">足球</label>
        <input type="checkbox" name="hobby" id="h2">
        <label for="h2">篮球</label>
        <input type="checkbox" name="hobby" id="h3">
        <label for="h3">游泳</label>
        <input type="checkbox" name="hobby" id="h4">
        <label for="h4">板绘</label>
        <input type="checkbox" name="hobby" id="h5">
        <label for="h5">编织</label>
        <br><br>
        <input type="number">
        <input type="data">
        <br><br>
        <input type="time">
        <br><br>
        <input type="hidden">
    </form>

注：其中，让单选框和文本进行绑定，则需要设置id，而radio和id属性值要与lable的for属性值相同。可以通过name属性值，在后台找到其值的对应标签

2、select控件：

下拉列表控件

    <select name="place">
        <option value="">陕西省</option>
        <option value="">黑龙江省</option>
        <option value="">吉林省</option>
    </select>

3、textarea控件：文本区，可以输入多行、多列数据

<textarea cols='30' rows='10'></textarea>

其中，cols的属性值设置的是横向的文本框长度，rows的属性值设置的是纵向文本框的长度

4、button控件：

按钮控件

type属性的取值：a、type='button'：普通按钮，不含默认功能

b、type='reset'：重置按钮

b、type='submit'：提交按钮，将表单控件的值提交给远程服务器

5、lable控件：用于显示文本

注意：

a、所有的表单控件(标签)都可以有id属性，且id的属性值不能重复

b、所有的表单控件都有value属性，value属性的值会提交给远程服务器

c、所有的表单控件都有name属性，在后台可以通过name属性值找到对应的标签

d、disabled属性表示input是否可用(置灰)

e、readonly属性表示input的值是只读的

f、单行文本输入框(<input type='text'/>)的属性placeholder起提示的作用

g、required属性表示input是必须要输入的

h、maxlength属性表示input输入的最大长度

i、tabIndex属性用于设置表单控件的tab顺序

j、title属性用来设置鼠标经过时的提示文字

<form action="#">
        <input type="text" id="r1" value="123456" readonly>
        <input type="password" maxlength="15" required title="必须填">
        <br><br>
        <input type="checkbox" name="hobby" id="h1" checked disabled>
        <label for="h1">足球</label>
</form>

Han_Zhou_Z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础入门（二）

目录一、列表标签1、无序列表2、有序列表3、列表的镶嵌二、表格标签1、表格标签的作用2、表格标签3、单元格的合并4、表格的边框属性：5、表格的填充属性：6、单元格的间距属性：三、表单1、用途2、标签（1）表单标签：（2）表单控件：一、列表标签1、无序列表<ul type='项目符号的类别'> <li>列表内容</li> <li>列表内容</li>
复制链接

扫一扫