htmi总结+css

HTML

表单学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置可以是网站,也可以是一个请求的位置
method:post,get提交方式
    get方式提交:我我们可以在url中看到我们要提交的信息,不安全,高效
    post:比较安全,可以传输大文件
-->
<form action="图像标签.html"method="post">
<!--文本输入框:input type = "text"-->
<!--    input type = "text"
name="username"value="周子龙好帅"
maxlength="8"最长能写几个
size="30"-->
<p>名字:<input type = "text" name="username"placeholder="请输入用户名"required maxlength="8"size="30"></p>
<!--密码框:input type = "passward"-->
<p>密码: <input type="password" name="pwd"hidden value="990110"></p>
<!--    单选框-->
    <p>性别：
        <input type="radio"value="boy"name="sex"disabled/>男
        <input type="radio"value="girl"name="sex"/>女
    </p>
<!--    多选框-->
    <p>爱好：
        <input type="checkbox"value="sleep"name="hobby">睡觉
       <input type="checkbox"value="code"name="hobby"checked>敲代码
        <input type="checkbox"value="chat"name="hobby">聊天
        <input type="checkbox"value="game"name="hobby">游戏
    </p>
<!--    按钮
input type="button" 按钮
input type="image" 图片按钮
<input  type="submit"> 提交按钮
<input type="reset"> 重置按钮
-->
    <p>按钮：
        <input type="button"name="btnl"value="点击变长">

<!--        <input type="image"src="../resour/image/1709706565089.jpg">-->
    </p>
<!--    下拉框-->
    <p>下拉框：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="选项的值"selected>瑞士</option>
            <option value="选项的值">印度</option>
            <option value="选项的值">日本</option>
        </select>
    </p>
<!--    文本域-->
    <p>反馈：
        <textarea name="textarea"cols="30" rows="10"></textarea>
    </p>
<!--    文件域-->
    <p>
        <input type="file"name="files">
        <input type="button"value="上传"name="upload">
    </p>
<!--    邮件验证-->
    <p>邮箱：
        <input type="email"name="email"required>
    </p>
<!--    URL-->
    <p>URL：
        <input type="url"name="url"required>
    </p>
<!--    数字-->
    <p>数字：
        <input type="number"name="num"max="100"min="0"step="1">
    </p>
<!--    滑块-->
    <p>音量：
        <input type="range"min="0"max="100"name="voice"step="2">
    </p>
<!--   搜索框 -->
    <p>搜索：
        <input type="search"name="search">
    </p>
<!--    增强鼠标可用性-->
    <p>
        <label for="mark">你点我试试</label>
    <input type="text"id="mark">
<!--    与id有关系-->
    </p>
    <p>自定义邮箱：
        <input type="text"name="diymail"pattern="^([1-9][0-9]*)+(.[0-9]{1,2})?$"></input>
    </p>
    <input  type="submit">
    <input type="reset"value="清空表单">
</form>
</body>
</html>

HTML的总结

html的基本结构

网页的基本特征标题标签title

基本标签

  1. h1，h2...标题标签

  2. p段落标签

  3. br换行标签

  4. hr水平线标签

  5. strong粗体 em斜体

图像标签img

超链接

  1. 描链接href---需要一个标记
  2. 功能性链接

行内元素和块元素

列表标签

  1. ol有序
  2. ul无序
  3. dl自定义

表格标签

表格table
行 tr
列 td
  1. colspm跨列
  2. rowspan跨行

媒体元素

  1. 图片=====一定要规范分类
  2. 音频

网页的简单布局

  1. 头部header
  2. 主体seaction
  3. 脚部footer

内连框架

  1. lframe

表单

  1. 上方代码

表单应用

  1. 隐藏域
  2. 只读
  3. 禁用

表单的初级验证

  1. 用户提示placrhoder
  2. 非交互性requested
  3. 正则表达式parrent

CSS

三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    内部-->
    <style>
        h1{
            color: gold;
       }
  </style>
  外部样式
    <link rel="stylesheet"href="css/style.css">
</head>
<body>
<!--行内样式，在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: aqua">我是标题</h1>
</body>
</html>
<!--优先级：就近原则-->

/*外部样式*/
h1{
    color:red;
}

扩展：外部样式两种写法

  1. 链接式 HTML标签
  2. 导入式@import是CSS2.1特有的

1.选择器

作用：选择页面上面的某一个

2.1基本选择器

  1. 标签选择器 h1选择一类标签

  2. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
<!--标签选择器会选择到这个封面上全部的元素-->
        h1{
            color: aqua;
        }
        p{
            font-size: 81px;
        }
    </style>
</head>
<body>
<h1>学Java</h1>
<h1>学Java</h1>
<p>听狂神说</p>
</body>
</html>

  3. 类 选择器 class：选择所有class一致的

  5. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--类选择器的格式= .class的名称{}
        好处，可以多个标签归类，是同一个class，可以复用
-->
    <style>
        .zzl{
            color: gold;
        }
        .kuangshen{
            color: black;
        }
        .jyl{
            color: aqua;
        }

    </style>
</head>
<body>
<h1 class="zzl">标题1</h1>
<h1 class="kuangshen">标题1</h1>
<h1 class="jyl">标题1</h1>
<p class="zzl">标题1</p>
</body>
</html>

  6. id 选择器：唯一！#id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/*id选择器
#id名称{} id必须唯一
不遵循就近原则，固定的
id选择器》class选择器》标签选择器
*/
    #zzl{
        color: aqua;
    }
    #jyl{
        color: black;
    }
    .zsn{
        color: gold;
    }
    h1{
        color: brown;
    }
    </style>
</head>
<body>
<h1 class="zsn"id="zzl">标题1</h1>
<h1 id="jyl">标题2</h1>
<h1 class="zsn">标题3</h1>
<h1 class="zsn">标题4</h1>
<h1>标题5</h1>
</body>
</html>

优先级：id选择器》class选择器》标签选择器

2.2 层次选择器

  1. 后代选择器 ：在某个元素的后面 祖爷爷 爷爷 爸爸 你

        /*后代选择器
    body后面的所有p标签
    */
      body p{
            background: brown;
        }
    </style>

  2. 子选择器 一代仅仅后面一代

    /*子选择器*/
    body>p{
        background: brown;
    }

  3. 相邻兄弟选择器 同辈相邻

    /*兄弟选择器*/只有一个
    .active+p{
        background: brown;
    }

  4. 通用选择器

    /*通用选择器对下不对上*/
    .active~p{
        background: brown;
    }

posted on 2024-03-07 22:59  大聪明小周  阅读(58)  评论(0)    收藏  举报

导航