HTML与CSS ——功能元素

1:功能元素

1.1:列表标签

- HTML中列表标签的分类

无序列表(最多)(unordered list) ​

有序列表(最少)(ordered list) ​

定义列表(其次)(definition list)

 1:无序列表

无序列表格式

 <!-- <ul>只能放<li></li></ul> -->
    <!-- <li>相当于一个容器可以放置其他标签</li> -->
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>草莓</li>
        <li>橘子</li>
    </ul>

 无序列表样式

<ul type="value"></ul>
disc    默认值 实心圆
circle  空心圆
square  实心方块
虽然通过标签属性也能修改样式, 但是在企业开发中千万不要这么干 

2:有序列表

有序列表格式

<h2>有序列表</h2>
    <h3>自动加序号</h3>
    <ol>
        <li>10000</li>
        <li>9000</li>
        <li>8000</li>
        <li>7000</li>
    </ol>

 有序列表样式

<ol type="A"></ol>
1   默认值。数字有序列表。(1、2、3、4)
a   按字母顺序排列的有序列表,小写。(a、b、c、d)
A   按字母顺序排列的有序列表,大写。(A、B、C、D)
i   罗马字母,小写。(i, ii, iii, iv)
I   罗马字母,大写。(I, II, III, IV)

3:定义列表

   <h2>自定义列表</h2>
    <!-- <h2><dl>用于自定义列表</dl></h2> -->
    <!-- 会与<dt>定义项目、名字</dt>和<dd>描述每个项目/名字</dd>一起使用 -->
    <dl>
        <dt>名词</dt>
        <dd>名词解释1</dd>
        <dd>名词解释2</dd>

    </dl>
    <br>
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>
    <h1>dt只能包含dd和dt</h1>
    <!-- dt经常是一个dd为多个 -->

定义列表注意点

和ul/ol一样, dl和dt/dd是一个整体, 所以他们一般情况下不会单独出现, 都是一起出现 ​ 和ul/ol一样, 由于dl和dt/dd是一个组合标签, 所以dl中建议只放dt和dd标签 ​ 一个dt可以没有对应的dd,也可以有多个对应的dd, 但是无论有或者没有dd都不推荐使用. ​ 推荐使用一个dt对应一个dd ​ 和li标签一样, 当需要丰富界面时, 我们可以在dt和dd标签中继续添加其它标签

 1.2:表格标签

   表格标签

    表格主要作用展示数据

    <table></table>定义表格的标签

    <tr>定义表格中的行必须套在<table></table>标签中</tr>

    <td>用于定义表格中的单元格,必须套在<tr></tr>标签中</td>

    <td>表格数据,及数据单元格内容</td>

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>身高</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>19</td>
    <td>1.78</td>
  </tr>
</table>

    td 单元格

    tr 一行

    th表头单元格 加粗 居中

表格对齐方式:

   水平对齐 :align :center left right

   垂直对齐:valign: top mid bottom

外边距内边距属性:

  • cellspacing外边距就是单元格和单元格之间的距离, 我们称之为外边距 默认情况下单元格和单元格之间的外边距的距离是2px

  • cellpadding内边距就是单元格的边框和文字之间的间隙, 我们称之为内边距 默认情况下内边距是1

细线表格

细线表格的制作方式: 1.给table标签设置bgcolor="black",cellspacing = "1px" 2.给tr标签设置bgcolor="white" 注意点: table标签和tr标签以及td标签都支持bgcolor属性

 表格的完整结构

  • 表格的标题

  • 表格的表头信息

  • 表格的主体信息

  • 表格的页尾信息

<table>
  <caption>表格的标题</caption>
  <thead>
      <tr>
          <th>每一列的标题</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>数据</td>
      </tr>
  </tbody>
  <tfoot>
      <tr>
          <td>数据</td>
      </tr>
  </tfoot>
</table>
caption作用: 指定表格的标题
thead作用: 指定表格的表头信息
tbody作用: 指定表格的主体信息
tfoot作用: 指定表格的附加信息

 单元格合并

    合并单元格方式

    跨行合并: rowspan=“合并单元格个数”

    跨列合并: colspan=“合并单元格个数”

<table align="center" border="1px" cellpadding="20px" cellspacing="0" width="400px" height="300px">
        <thead>
            <tr>
                <th>姓名</th>】
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">跨行</td>
                <td colspan="2">跨列 </td>
                <td>男</td>

            </tr>
            <tr>

                <td>35</td>
                <td>男</td>
                <td>90</td>
            </tr>
        </tbody>

    </table>

 2:form表单

 表单常用来收集用户信息

  表单组成表单域表单控件提示信息三部分组成

  •     <form action=""></form>用于定义表单域,用于收集信息,提交给后台
  •     <form action="url地址" method="提交方式" name="表单域名称"></form>
  •     action属性值 URL:用于指定接收并处理表单数据的服务器程序的url地址
  •     method属性值 get/post:用于设置表单数据的提交方式
  •     name 属性值 名称:指定表单的名称,区分多个表单
-input标签
	input标签有一个type属性, 这个属性有很多类型的取值,取值的不同就决定了input标签的功能和外观的不同
    -明文输入框 
		<input type="text" name="account" placeholder="请输入用户名">
			name:表单提交时,会作为参数的名称,结合输入的值进行匹配,组成 参数名=参数值的结构
			placeholder:提示
    -暗文输入框 
		<input type="password" name="password" placeholder="请输入密码">

    -输入框设置默认值 
		<input type="xxx" value="xxx">

    -单选框 
		<input type="radio" name="xx" value="xxx">
      注意点:
      1.默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后				name属性还必须设置相同的值。
      2.要想让单选框默认选中某一个, 那么可以给input标签添加一个checked属性。
			3.单选框的value值,才是我们最终需要的值,并不是单选框显示的值。

    -多选框 
		<input type="checkbox" name="xxx" value="xxx">
       多选框默认选中 checked

    -提交按钮 
		<input type="submit">
      作用: 将表单中已经填写好的数据, 提交到远程服务器
      注意点:
      要想把表单中填写好的数据提交到远程服务器, 必须具备两个条件
      1.需要给form表单添加一个action的属性, 通过这个action属性指定需要提交到的服务器地址
      2.需要给需要提交到服务器的表单元素添加一个name属性
        -enctype
            application/x-www-form-urlencoded   
            	查询字符串,在发送前编码所有字符(默认),转换为?a=a&b=b&c=c

            multipart/form-data 
              不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。
              -附件上传 <input type="file">
                  method="POST"
                  enctype="multipart/form-data"

            text/plain  
            	用于发送纯文本内容,空格转换为 "+" 加号,不对特殊字符进行编码,一般用于email之类的;
		
    -普通按钮 
		<input type="button" value="xxx">
      可以通过value属性来给按钮指定标题
      作用: 配合JS完成一些操作

    -图片按钮 
		<input type="image" src="">
       作用: 配合JS完成一些操作
	
    -重置按钮 
		<input type="reset" value="xx">
      作用: 用于清空表单中已经填写好的数据
      注意点:
      如果想想改重置按钮默认的按钮标题可以通过value属性来修改

    -隐藏域 
		<input type="hidden" name="xx" value="xxx">
        隐藏域
        作用 : 配合提交按钮将一些数据默默的悄悄的提交到服务器

-label标签
  1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让					对应的输入框聚焦, 那么就需要让文字和输入框进行绑定
  2.要想让输入框和文字绑定在一起, 那么我们可以使用label标签
  3.绑定的格式:
      3.1将文字利用label标签包裹起来
      3.2给输入框添加一个id属性
      3.3在label标签中通过for属性和输入框中的id进行绑定即可
        <label for="account">
          账号:
        </label>
        <input type="text" id="account">

-select标签
  作用: 用于定义下拉列表
  格式:
  <select>
      <optgroup label="分组名称">
          <option>列表数据</option>
      </optgroup>
  </select>

  注意点:
  1.下拉列表不能输入内容, 但是可以直接在列表中选择内容
  2.可以通过给option标签添加一个selected属性来指定列表的默认值
  3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类

-textarea标签
  作用: 定义一个多行输入框
  格式:
  <textarea>
  </textarea>

  注意点:
  1.默认情况下输入框可以无限换行
  2.默认情况下输入框有自己的宽度和高度
  3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下					输入
  4.默认情况下输入框是可以手动拉伸的

-fieldset组件
  fieldset组件用于在一个web表单中对多个控件和标签进行分组
  格式:
  <form action="">
      <fieldset>
        <legend>请登录</legend>
        账号:<input type="text"><br>
        密码:<input type="password">
        <input type="submit">
      </fieldset>
  </form>

 H5新增元素

-datalist标签
		1.作用: 给输入框绑定待选项
    <input type="text" list="xxx">
    <datalist id="xxx">
        <option>xxx</option>
    </datalist>

    2.datalist格式:
    <datalist>
        <option>待选项内容</option>
    </datalist>

    3.如何给输入框绑定待选列表
    	1.搞一个输入框
    	2.搞一个datalist列表
    	3.给datalist列表标签添加一个id
    	4.给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可

-progress <progress value="70" max="100">70%</progress>
    progress表示任务的完成情况,常用于进度条
        max 定义进度元素所要求的任务的工作量,默认值为1  
        value 定义已经完成的工作量,如果max值为1,该值必须是介于0~1之间的小数。

-邮箱 <input type="email">
    可以自动校验输入的内容是否符合邮箱的格式

-域名 <input type="url">
    可以自动校验输入的内容是否是URL地址

-数字 <input type="number">
    输入框中只能输入数字

-时间 <input type="date">
    可以通过日历来选择时间

-颜色 <input type="color">
    可以通过取色板来选择颜色

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


学习编程是顺着互联网的发展潮流,是一件好事。新手如何学习编程?其实不难,不过在学习编程之前你得先了解你的目的是什么?这个很重要,因为目的决定你的发展方向、决定你的发展速度。
IT行业是什么工作做什么?IT行业的工作有:产品策划类、页面设计类、前端与移动、开发与测试、营销推广类、数据运营类、运营维护类、游戏相关类等,根据不同的分类下面有细分了不同的岗位。
女生学Java好就业吗?女生适合学Java编程吗?目前有不少女生学习Java开发,但要结合自身的情况,先了解自己适不适合去学习Java,不要盲目的选择不适合自己的Java培训班进行学习。只要肯下功夫钻研,多看、多想、多练
Can’t connect to local MySQL server through socket \'/var/lib/mysql/mysql.sock问题 1.进入mysql路径
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 sqlplus / as sysdba 2.普通用户登录
一、背景 因为项目中需要通北京网络,所以需要连vpn,但是服务器有时候会断掉,所以写个shell脚本每五分钟去判断是否连接,于是就有下面的shell脚本。
BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。
假如你已经使用过苹果开发者中心上架app,你肯定知道在苹果开发者中心的web界面,无法直接提交ipa文件,而是需要使用第三方工具,将ipa文件上传到构建版本,开...
下面的 SQL 语句指定了两个别名,一个是 name 列的别名,一个是 country 列的别名。**提示:**如果列名称包含空格,要求使用双引号或方括号:
在使用H5混合开发的app打包后,需要将ipa文件上传到appstore进行发布,就需要去苹果开发者中心进行发布。​
+----+--------------+---------------------------+-------+---------+
数组的声明并不是声明一个个单独的变量,比如 number0、number1、...、number99,而是声明一个数组变量,比如 numbers,然后使用 nu...
第一步:到appuploader官网下载辅助工具和iCloud驱动,使用前面创建的AppID登录。
如需删除表中的列,请使用下面的语法(请注意,某些数据库系统不允许这种在数据库表中删除列的方式):
前不久在制作win11pe,制作了一版,1.26GB,太大了,不满意,想再裁剪下,发现这次dism mount正常,commit或discard巨慢,以前都很快...
赛门铁克各个版本概览:https://knowledge.broadcom.com/external/article?legacyId=tech163829
实测Python 3.6.6用pip 21.3.1,再高就报错了,Python 3.10.7用pip 22.3.1是可以的
Broadcom Corporation (博通公司,股票代号AVGO)是全球领先的有线和无线通信半导体公司。其产品实现向家庭、 办公室和移动环境以及在这些环境...
发现个问题,server2016上安装了c4d这些版本,低版本的正常显示窗格,但红色圈出的高版本c4d打开后不显示窗格,
TAT:https://cloud.tencent.com/document/product/1340