新手必看，HTML和CSS快速简单入门

最新推荐文章于 2022-09-21 16:10:50 发布

广目无双王

最新推荐文章于 2022-09-21 16:10:50 发布

阅读量421

点赞数

文章标签： html css html5

本文链接：https://blog.csdn.net/JJ_only_love_SS/article/details/107831392

版权

html，css静态资源标签简述入门及用法介绍

静态资源：
* HTML：用于搭建基础网页，展示页面的内容
* CSS：用于美化页面，布局页面
* JavaScript：控制页面的元素，让页面有一些动态的效果
html表单标签（只挑重点）
概念：是最基础的网页开发语言
* Hyper Text Markup Language 超文本标记语言
* 超文本:
* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
* 标记语言:
* 由标签构成的语言。<标签名称> 如 html，xml
* 标记语言不是编程语言

<form action="#" method="get">

    <label for="username"> 用户名 </label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
    密码：<input type="password" name="password" placeholder="请输入密码"><br>
    性别：<input type="radio" name="gender" value="male" >  男
         <input type="radio" name="gender" value="female" checked>  女
            <br>
    爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街
        <input type="checkbox" name="hobby" value="java"  checked> Java
        <input type="checkbox" name="hobby" value="game"> 游戏<br>

    图片：<input type="file" name="file"><br>
    隐藏域：<input type="hidden" name="id" value="aaa"> <br>

    取色器：<input type="color" name="color"><br>
    生日：<input type="date" name="birthday"> <br>
    生日：<input type="datetime-local" name="birthday"> <br>
    邮箱：<input type="email" name="email"> <br>
    年龄：<input type="number" name="age"> <br>

    省份：<select name="province">
            <option value="">--请选择--</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3" selected>合肥</option>
         </select><br>
    自我描述：
        <textarea cols="20" rows="5" name="des"></textarea>
    <br>
    <input type="submit" value="登录" >
    <input type="button" value="一个按钮" ><br>
    <input type="image" src="img/regbtn.jpg">
</form>

css与html结合有三种方式:内联，内部，外部
概念： Cascading Style Sheets 层叠样式表
* 层叠：多个样式可以作用在同一个html的元素上，同时生效
好处：
1. 功能强大
2. 将内容展示和样式控制分离
* 降低耦合度。解耦
* 让分工协作更容易
* 提高开发效率
用最简单的例子举例：

<body>
<!--
内联样式
    * 在标签内使用style属性指定css代码
-->
<div style="color:red;">hello css</div>
</body>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color:blue;
        }
    </style>
</head>
<body>
<!--
内部样式
    * 在head标签内，定义style标签，style标签的标签体内容就是css代码
-->
<div>hello css</div>
<div>hello css</div>
</body>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <!-- <link rel="stylesheet" href="css/a.css">-->

    <style>
        @import "css/a.css";
    </style>
</head>
<body>

<!--

外部样式
    1. 定义css资源文件。
    2. 在head标签内，定义link标签，引入外部的资源文件
-->
<div>hello css</div>
<div>hello css</div>

<p>呵呵</p>

</body>

css选择器

<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        .cls1{
            color: blue;
        }
        div{
            color:green;
        }
        #div1{
               color: red;
           }
    </style>
</head>
<body>
<!--
 基础选择器
    1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
        * 语法：#id属性值{}
    2. 元素选择器：选择具有相同标签名称的元素
        * 语法： 标签名称{}
        * 注意：id选择器优先级高于元素选择器
    3. 类选择器：选择具有相同的class属性值的元素。
        * 语法：.class属性值{}
        * 注意：类选择器选择器优先级高于元素选择器
-->
    <div id="div1">我是钢铁侠</div>
    <div class="cls1">我是蜘蛛侠</div>
    <p class="cls1">我是绿巨人</p>
</body>

CSS常用属性

<head>
    <meta charset="UTF-8">
    <title>css属性</title>
    <style>
        p{
            color: #FF0000;
            font-size: 30px;
            text-align: center;
            line-height: 200px;
            /*
                border 边框
             */
            border: 1px solid red;
        }
        div{
            border: 1px solid red;
            /*
                尺寸
             */
            height: 200px;
            width: 200px;
            /*
                背景
             */
            background: url("img/logo.jpg") no-repeat center;
        }
    </style>
</head>
<body>
    <p>埼玉老师</p>
    <div>
        我是钢铁侠
    </div>
</body>

广目无双王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
新手必看，HTML和CSS快速简单入门

html，css静态资源标签简述入门及用法介绍静态资源：* HTML：用于搭建基础网页，展示页面的内容* CSS：用于美化页面，布局页面* JavaScript：控制页面的元素，让页面有一些动态的效果html表单标签（只挑重点）概念：是最基础的网页开发语言* Hyper Text Markup Language 超文本标记语言* 超文本:* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.* 标记语言:* 由标签构成的语言。<标签名称> 如 html，
复制链接

扫一扫