HTML+CSS基础知识

一、列表

        (一)、列表定义

                列表分为以下几种格式:无序列表、有序列表以及自定义列表。

                1.无序列表(<ul>)

                这种列表格式前方会自动生成一个黑色圆点。

                代码示例如下:

<!-- 定义一个无序列表 -->
    <ul>
        <li>我真服了</li>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
        <li>离了个大谱</li>
    </ul>

                结果示例如下:

    

                2.有序列表(<ol>)

                这种列表格式前方会自动生成数字序号。

                代码示例如下:

    <!-- 定义一个有序列表 -->
    <ol>
        <li>我真服了</li>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
        <li>离了个大谱</li>
    </ol>

                结果示例如下:

         

                3.自定义列表(<dl>)

                这种列表格式前方没有任何标识,其中<dt>定义列表标题,<dd>定义列表项。

                代码示例如下:

    <!-- dl 自定义列表 -->
    <!-- dt 定义列表标题 -->
    <!-- dd 定义列表项 -->
     <dl>
        <dt>我真服了</dt>
        <dd>第一项</dd>
        <dd>第二项</dd>
        <dd>第三项</dd>
        <dd>离了个大谱</dd>
    </dl>

                结果示例如下:

          

二、表单

        表单在网页中,无论是提交搜索的信息,还是网上注册等都是需要使用表单。使用表单目的是为了用户同服务器进行动态的信息交流。

        (一)、常见属性

属性 属性值   作用
name 名称 用于指定表单的名称,用以区分同一个页面中的多个表单
method  get/post 设置表单数据的提交方式,取值为get或者post
action url地址 用以指定接收并处理表单数据的服务器程序的url地址;为空则提交给当前页

                代码示例如下:

<form>
    <!-- method 提交方式 get明文 不安全  post相对安全 -->
    <div>账号:<input type="text" name="user"></div>
    <!-- text 单行文本输入框 输入的内容没有任何限制 -->

    <div>密码:<input type="password" name="password"></div>
    <!-- password 密码输入框 -->

    <div>
        <input type="button" value="写字">
        <input type="submit" value="提交">
    </div>
</form>

                结果示例如下:

        (二)、input控件

                input 是输入的意思,而在表单元素中 <input> 标签用于收集用户信息在 <input> 标签中,包含一个 type 属性,根据不同的 type 属性值,展示不同的控件(如输入框、密码框、复选框、掩码后的文本控件、单选按钮、按钮等)。

<input type="radio"> 定义单选按钮
<input type="checkbox"> 定义复选框
<input type="text"> 单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符
<input type="password"> 密码字段。该字段中的字符被掩码
<input type="submit"> 提交按钮,将表单里的信息提交给action所指向的地址

                代码示例如下:

    <form method="post">
        <!-- method 提交方式 get明文 不安全  post相对安全 -->
        <div>账号:<input type="text" name="user"></div>
        <!-- text 单行文本输入框 输入的内容没有任何限制 -->
        <div>密码:<input type="password" name="password"></div>
        <!-- password 密码输入框 -->
        <div>
            <input type="radio" name="one" value="a">A
            <input type="radio" name="one" value="b">B
            <input type="radio" name="one" value="c">C
            <input type="radio" name="one" value="d">D
        </div>
        <!-- 单选按钮 选择后无法取消 -->
        
        <div>
            <input type="checkbox" name="two" value="a">A
            <input type="checkbox" name="two" value="b">B
            <input type="checkbox" name="two" value="c">C
            <input type="checkbox" name="two" value="d">D
        </div>
        <!-- 多选按钮 选择后可以取消 -->

        <div>
            <input type="button" value="写字">
            <input type="submit" value="提交">
        </div>
        <!-- 提交或其他按钮 -->
    </form>

                结果示例如下:

三、选择器

        (一)、优先级

                行内样式>id选择器>class选择器>标签名称选择器

        (二)、原则

                在优先级相同的情况下遵循就近原则

四、字体样式

        (一)、color颜色设置

                color  设置字体颜色,也可以设置其他颜色

        (二)、font—size大小设置

                font—size   设置字体大小   单位  px,

        (三)、font-weight粗细设置

                font-weight    设置字体的粗细

        (四)、font-family 指定字体设置

                font-family  可以指定文字的字体

                1.代码示例

<head>
    <style>
        div{color: rgb(239, 11, 197);
            /* 16进制颜色  */
            font-size: 200px;
            /* 文字默认大小为16px */
            font-weight: 200;
            /* 文字加粗 */
            font-family: "华文彩云";
        }
    </style>
</head>
<body>
    <div>
        今天热疯啦!
    </div>
</body>

                2.结果示例

人已经麻了,今天就这样吧.......

相关推荐

  1. HTMLCSS旋转的圣诞树源码附注释

    2024-06-15 03:54:01       41 阅读
  2. SpringMVC的基础知识

    2024-06-15 03:54:01       30 阅读
  3. STM32 基础知识

    2024-06-15 03:54:01       37 阅读
  4. 装饰器基础知识

    2024-06-15 03:54:01       34 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-15 03:54:01       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-15 03:54:01       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-15 03:54:01       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-15 03:54:01       18 阅读

热门阅读

  1. Spring IOC 容器的构建流程?

    2024-06-15 03:54:01       9 阅读
  2. (27)ADC接口--->(002)FPGA实现AD7606接口

    2024-06-15 03:54:01       7 阅读
  3. c++_0基础_讲解1 认识c++

    2024-06-15 03:54:01       9 阅读
  4. echarts 销毁实例

    2024-06-15 03:54:01       10 阅读
  5. JVM垃圾回收的普遍步骤

    2024-06-15 03:54:01       11 阅读
  6. 在 Unreal Engine 5.4 中加载 5.3 版本的插件

    2024-06-15 03:54:01       7 阅读
  7. ExoPlayer 学习笔记

    2024-06-15 03:54:01       8 阅读
  8. MS2024

    MS2024

    2024-06-15 03:54:01      6 阅读