HTML与CSS基础详解-优快云博客

一、HTML

（一）基础

（1）基础标签

在这里插入图片描述

（2）音视频标签

在这里插入图片描述

（3）超链接标签&列表标签

在这里插入图片描述

（4）表格标签

在这里插入图片描述

（5）布局标签

在这里插入图片描述

（6）表单标签

概览：
在这里插入图片描述

form标签

注意指定name属性
在这里插入图片描述

表单项

在这里插入图片描述

<form action="#" method="post">
    <!-- label标签用于和下面的text做关联；for和input的id相同就可以关联 -->
    <label for="username">用户名：</label>
    <input type="text" name="username" id="username"><br>

    <label for="password">密码：</label>
    <input type="password" name="password" id="password"><br>

    <!-- 单选框的name值要相同，用来互斥选项，不然没有单选框的效果，value是提交的值 -->
    性别：
    <input type="radio" value="男" name="sex" id="male"> <label for="male">男</label>
    <input type="radio" value="女" name="sex" id="female"> <label for="female">女</label>
    <br>

    爱好：
    <!-- 多选和单选类似，但多选框的name值相同并不会产生互斥，只是看作一个整体 -->
    <input type="checkbox" name="hobby" value="1"> 旅游
    <input type="checkbox" name="hobby" value="2"> 电影
    <input type="checkbox" name="hobby" value="3"> 游戏
    <br>

    文件：
    <input type="file">
    <br>

    <!-- 隐藏字段，在页面不可见，但点击提交按钮会自动提交 -->
    <input type="hidden" name="id" value="111">

    <!-- value用于指定按钮上显示啥文字 -->
    <input type="submit" value="免费注册">
    <input type="reset" value="重置所有">
    <input type="button" value="一个按钮">

    <!-- 文本域,rows表示有5行,cols列表示每行可以写20个字符 -->
    <textarea rows="5" cols="20" name="desc"></textarea>
    
</form>

二、CSS

（一）导入方式

内联样式：在标签内部使用style属性，值是css的属性键值对。
<div style="color:red">Hello CSS</div>
内部样式：在<head></head>中定义<style>标签，在标签内定义css样式。

    <style>
        div{
            color: red;
        }
    </style>

外部样式：定义link单标签，使用href属性引入外部css文件。
html中：

    <link rel="stylesheet" href="demo.css">
    <div>hello</div>

css中：

div{
    color: red;
}

（二）选择器&属性

（1）选择器

选择器：选取需要设置样式的html标签，有以下三种方法(同时指定一个标签时，谁的作用范围越小，谁就生效）

（2）属性

属性就是CSS设置样式，如color:red的color就是一个属性
属性参考手册

HTML&CSS

一、HTML

（一）基础

（1）基础标签

（2）音视频标签

（3）超链接标签&列表标签

（4）表格标签

（5）布局标签

（6）表单标签

form标签

表单项

二、CSS

（一）导入方式

（二）选择器&属性

（1）选择器

（2）属性