了解Html与Css及其应用

最新推荐文章于 2024-05-11 21:03:27 发布

星辰world

最新推荐文章于 2024-05-11 21:03:27 发布

阅读量108

点赞数

分类专栏：前端 js 文章标签： html css web

本文链接：https://blog.csdn.net/qq_47498988/article/details/119477009

版权

前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

本文介绍了HTML的基础知识，包括表格的创建与样式设置，如表格标签、边框属性、单元格操作以及表单元素如input、form的使用。同时，深入探讨了CSS的基本概念，如选择器、样式添加方式、优先级以及各种选择器的用法，展示了如何通过CSS来装饰和布局网页内容。

摘要由CSDN通过智能技术生成

一、Html

表格:
    table 表格标签
    tr 行
    th 表格头单元格   居中加粗
    td 表格体单元格


    属性样式:
        border边框
        bordercolor 边框颜色
        style="border-collapse: collapse" 双线变单线
        colspan跨列  ****
        rowspan 跨行 ****
        height 高度
        width 宽度
        align 对齐方式

    注意:
        先有行再有列
        内容需要放在单元格中

课程表

课程表
	星期一	星期二	星期三	星期四	星期五
上午	体育课	体育课	体育课	体育课	体育课
	体育课	体育课	体育课	体育课	体育课
	体育课	体育课	体育课	体育课	体育课
下午	体育课	体育课	体育课	体育课	体育课
下午	体育课	体育课	体育课	体育课	体育课

form表单 : 收集用户输入的数据
    form 表单标签
        属性:
            action 提交位置
            name form表单的名字
            method : 提交方式
                get 数据拼接到url地址栏中进行发送  不安全   大小由显示   默认提交方式   效率较高
                post 数据在请求体中, 安全 ,大小没有限制
            enctype :
                当表单中存在文件上传,需要做修改

    表单元素 : 定义在form标签中的元素
    大部分的表单元素都是通过input标签定义

    input 标签
        type属性 :
            text 普通文本框   type,name
            password 密码框  加密效果
            radio 单选框
                多个单选框只能选择一个,需要把它们分成一组,name属性值相等就是一组
            checkbox 多选框
                name属性值相同分为一组,作用相同分为一组
            file 文件上传
                注意修改entype属性值  enctype="multipart/form-data"
            reset 重置
            submit 提交
            button 按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>


            <h3>相亲信息表</h3>
            <form action="http://www.baidu.com" name="form_info" enctype="multipart/form-data">
                <p>
                    姓名 : <input type="text" name="username" value="zhangsan">
                </p>
                <p>
                    微信密码 : <input type="password" name="userpwd">
                </p>
                <p>
                    性别 :
                    <input type="radio" name="gender" value="man"> 男
                    <input type="radio" name="gender" value="woman"> 女
                </p>
                <p>
                    爱好 :
                    <input type="checkbox" name="hobby" value="code"> 敲代码
                    <input type="checkbox" name="hobby" value="read"> 读书
                    <input type="checkbox" name="hobby" value="basketball"> 篮球
                </p>
                <p>
                    个人生活照 : <input type="file" name="pic">
                </p>
                <p>
                    <input type="submit">
                    <input type="button" value="按钮">
                    <input type="reset" value="重置">
                </p>

        </form>
</body>
</html>

二、Css(装饰代码)

1）

css 层叠样式表

添加的语法:
    选择器 {
        样式 -> 样式名 : 样式值;
        属性名 : 属性值;
        ....
    }

如何为添加css?
    行内样式表 :  在元素行的内部为元素添加样式
        优先级最高,但是如果想要我多个元素添加相同样式的时候麻烦,不便于后期维护
    内部样式表 :  在html的内部为html中的元素添加样式
        在head中添加一对标签style标签,在标签对中添加样式
    外部样式表 :  在html的外部为html中的元素添加样式

    样式表的优先级: 行内的优先级最高,谁离元素最近谁的优先级最高
选择器
常用样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css入门</title>

    <link rel="stylesheet" href="../css/first.css">
    <style>
        /*内部样式表*/
        div{
            background: paleturquoise;  /*背景*/
            font-weight: bold; /*加粗*/
        }
    </style>
</head>
<body>

    <div style="color:aqua;font-size: 20px;background: pink">hello,world!!</div>
    <div style="color:aqua;font-size: 20px;">hello,world!!</div>
    <div style="color:aqua;font-size: 20px;background: pink">hello,world!!</div>

</body>
</html>

2）

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
 选择器:
     基础选择器
     组合选择器
     伪类选择器
     微元素选择器

基础选择器 :
     id选择器 : #   id属性唯一的,不可重复
         根据元素的id属性选择1个元素

     类选择器 : .   class属性值可以重复的,可以在值列表中添加多个属性值
         根据与元素的class属性值选择1个或者1组元素

     元素选择器 : 标签名
         根据元素 标签名选中一个 或者一组元素
     通配符 : *

     优先级 : id>类>元素>通配符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*清除浏览器的默认样式*/
        *{
            padding: 0;
            margin: 0;
        }
        /*id选择器*/
        #box1{
            background: hotpink;
            color : #fff;
        }
        /*类选择器*/
        .cla1{
            font-size: 30px;
        }

        .cla2{
            font-style: italic; /*斜体*/
        }

        /*元素选择器*/
        div{
            width: 200px;
            height: 200px;
            background: paleturquoise;
            border-radius: 10px;
        }
        /*通配符*/
        *{
            border:1px solid black;
        }
    </style>
</head>
<body>

    <div id="box1" class="cla2">div1</div>
    <div id="box2" class="cla1 cla2">div2</div>
    <div id="box3" class="cla1">div3</div>
</body>
</html>

3）

注意: css中样式存在继承
    字体样式,颜色样式,背景样式等等都会默认继承
    边框,内外边距等样式不会继承
组合选择器:
    后代选择器
        父级选择器 子级选择器
        选中所有的子元素包括孙子元素
子元素选择器
    用于选择指定标签元素的所有第一代子元素，以大于号分隔
相邻兄弟选择器
    可选择紧接在另一元素后的元素，且二者有相同父元素。以加号分隔
普通兄弟选择器
    选择紧接在另一个元素后的所有元素，而且二者有相同的父元素，以波浪线分隔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*后代选择器*/
        /*.li1 ul{
            border: 1px  solid red;
        }*/

        /*子元素选择器*/
        body > ul{
            border : 1px dotted green;
        }

        /*相邻兄弟选择器*/
        .banana+li{
            font-style: italic;
            color: blue;
        }

        /*普通兄弟选择器*/
        .banana~li{
            background: orchid;
        }
    </style>
</head>
<body>

<h1>食物</h1>
<ul class="food">
    <li class="li1">水果
        <ul>
            <li class="banana">香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li class="li2">蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>
</body>
</html>

4）

群组选择器
    选择器1,选择器2..{
        样式;
    }
伪类选择器 :
    a:link a标签未访问
    a:visited a标签已访问

    :hover 当鼠标悬停在元素上时候,作用的样式
    :active 当鼠标按下时候显,作用的样式
    :first-child 当元素作为父级的第一个子元素时候被选中
    :last-child 当元素作为父级的最后一个元素时候被选中
    :nth-child(num) 当元素作为父级的第n个子元素的时候选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul,.box2{
            background:palegreen;
        }

        a:link{
            color:paleturquoise;
        }

        a:visited{
            color:lightblue;
        }
        a:hover{
            text-decoration: none; /*去除下划线*/
            text-decoration: underline; /*添加下划线*/
            text-decoration: overline; /*添加上划线*/
            text-decoration: line-through; /*添加中划线*/
        }

        .box{
            width: 200px;
            height: 200px;
            background:yellow;
            /*圆形*/
            border-radius: 100px;
        }
        .box:hover{
            background: url("../images/225658-16242874185fa5.jpg");

        }
        .box:active{
            background:lightgray;
        }

        li:first-child{
            border: 1px solid darkred;
        }
        li:last-child{
            background:lightskyblue;
        }
        li:nth-child(2){
            background:lightblue;
        }
    </style>
</head>
<body>
<h1>食物</h1>
<ul class="box1">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨</li>
</ul>

<ol class="box2">
    <li>白菜</li>
    <li>油菜</li>
    <li>卷心菜</li>
</ol>

<a href="#">我是a标签</a>

<div class="box">box</div>
</body>
</html>

星辰world

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
了解Html与Css及其应用

一、Html表格: table 表格标签 tr 行 th 表格头单元格居中加粗 td 表格体单元格属性样式: border边框 bordercolor 边框颜色 style="border-collapse: collapse" 双线变单线 colspan跨列 **** rowspan 跨行 **** height 高度 width 宽
复制链接

扫一扫

专栏目录