html+css demo

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量125 收藏
点赞数
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58580098/article/details/134227317
版权

html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--    play demo-->
    <link rel="stylesheet" href="./basic.css">
    <style>
        .he{

        }
    </style>
</head>

<body>

<p style="font-size: 10px; color: red"></p>
<!--标签合集-->
<strong></strong>
<!--段落标签-->
<p></p>
<!--标题标签-->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<!--在页面中显示一条水平线-->
<hr>
<!--换行-->
<br>

<div></div>
<!--文本格式化标签      需要让文字加粗、下划线、倾斜、删除线等效果-->
<!--加粗-->
<strong></strong>
<!--下划线-->
<ins></ins>
<!--倾斜-->
<em></em>
<!--删除线-->
<del></del>

<!--媒体标签-->
<!--图片标签-->
<img src="" alt="替换文本" title="悬浮显示文本" width="" height="">

<!--音频标签的介绍-->
<audio src="" controls autoplay loop></audio>
<!-- - src：音频路径-->
<!-- - controls：音频控件-->
<!-- - autoplay：自动播放-->
<!-- - loop：循环播放-->
<!--视频标签-->
<audio src="" controls></audio>
<!--src-->
<!--视频的路径-->
<!--controls-->
<!--显示播放的控件-->
<!--autoplay-->
<!--自动播放（谷歌浏览器中需配合muted实现静音播放）-->
<!--loop-->
<!--循环播放-->
<!--外部链接：  target ：默认值，在当前窗口中跳转（覆盖原网页）_blank
在新窗口中跳转（保留原网页） _self-->
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
<!--内部链接：-->
<a href="./目标网页.html" target="_self">目标网页</a>

<!--空链接（拓展补充）-->
<a href="#">空链接</a>
<!--无序列表
ul
表示无序列表的整体，用于包裹标签
 li 表示无序列表的每一项，用于包含每一行的内容-->
<ui>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ui>
<!--有序列表-->
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>
<!--自定义列表-->
<dl>
    <dt>无序列表</dt>
    <dd>“没有可以顺序的”列表,列表项包含在&lt;li>&lt;/li>标签对中，无序列表以&lt;ul>&lt;/ul>定义，项目前有符号缩进</dd>
    <dt>有序列表</dt>
    <dd>列表项包含在&lt;li>&lt;/li>标签对中，有序列表以&lt;ol>&lt;/ol>定义，项目前有数字或者字母缩进</dd>
    <dt>定义列表</dt>
    <dd>需要逐条给出定义描述的列表</dd>
</dl>

<d1>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
    <dd>订单操作</dd>
</d1>
<!--dl-->
<!--表示自定义列表的整体，用于包裹dt/dd标签-->
<!--dt-->
<!--表示自定义列表的主题-->
<!--dd-->
<!--表示自定义列表的针对主题的每一项内容-->
<!--表格标签 -->
<table border="1" width="600" height="400">
    <tr>
        <td>姓名</td>
        <td>成绩</td>
        <td>评语</td>
    </tr>
    <tr>
        <td>小哥哥</td>
        <td>100分</td>
        <td>孩砸, 真棒啊</td>
    </tr>
    <tr>
        <td>郭德纲</td>
        <td>150分</td>
        <td>没有郭德纲相声早黄了, 有了郭德纲, 相声更黄了</td>
    </tr>
<!--    表单标签-->
    <!-- 写什么就显示什么 -->
    文本框: <input type="text">
    <br>
    <br>
    <!-- 书写的内容都会变成点点显示 -->
    密码框: <input type="password">

    <br>
    <br>
    单选框: <input type="radio">

    <br>
    <br>

    多选框: <input type="checkbox">

    <br>
    <br>

    上传文件: <input type="file">
<!--    占位符-->
    <input type="text" placeholder="请输入用户名">
    <input type="password" placeholder="请输入密码">
<!--    单选框-->
    性别: <input type="radio" name="sex">男
    <input type="radio" name="sex" checked>女
<!--上传文件-->
    <input type="file" multiple>
<!--    按钮-->
    <input type="submit" value="免费注册">
    <input type="reset">
    <input type="button" value="普通按钮">
</table>
<!--下拉框 -->
<select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option selected>深圳</option>
</select>

<!--文本域-->
<textarea cols="60" rows="30"></textarea>
<!--没有语义的标签-->
<div>这是div标签</div>
<div>这是div标签</div>

<span>这是span标签</span>
<span>这是span标签</span>
<!--有语义的标签-->
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>侧边栏</aside>
<section>网页区块</section>
<article>文章</article>
<!-- 网页不认识多个空格, 只认识一个 -->
这是HTML文档, 现在要学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;习字符实体.
<!--表单综合案例-->
<h1>青春不常在，抓紧谈恋爱</h1>
<hr>
<form action="">
    昵称: <input type="text" placeholder="请输入昵称">
    <br>
    <br>
    性别:
    <label><input type="radio" name="sex" checked> 男</label>
    <label><input type="radio" name="sex"> 女</label>
    <br><br>

    所在城市:
    <select>
        <option>北京</option>
        <option selected>上海</option>
        <option>广州</option>
    </select>
    <br>
    <br>
    喜欢的类型:
    <label><input type="checkbox" checked> 可爱</label>
    <label><input type="checkbox" checked> 性感</label>
    <label><input type="checkbox"> 御姐</label>

    <br>
    <br>

    个人介绍: <br>
    <textarea name="" id="" cols="60" rows="10"></textarea>
    <h3>我承诺</h3>
    <ul>
        <li>年满18岁、单身</li>
        <li>年满18岁、单身</li>
        <li>年满18岁、单身</li>
    </ul>
    <!-- 按钮: input button -->
    <input type="submit" value="免费注册">
    <button type="reset">重置</button>
</form>
</body>
</html>

css

三种引入方式

/*引入方式：
1
<p style="font-size: 10px; color: red"></p>

2
<style>
    .he{

    }
</style>

3
<link rel="stylesheet" href="./basic.css">
*/

基础属性

.hehuixin{
    font-size: 10px;
    font-weight: bold;
    font-style: italic;
    font-family: Arial ;

    text-indent: 2em;
    text-align: center;
    text-decoration: none;
    line-height: 20px;
    margin: 0 auto;
}

emmet语法 

 

 

选择器:hover { css }
背景属性
.bg{
    background-color: #fff;
    background-image: url("图片路径");
    background-repeat: no-repeat;
    background-position: 0 0;
    
}

元素显示模式转换

 盒子模型组成
1.内容区域：content 
2.边框区域：border

内

-----------------------------

外
3.内边距区域：padding
4.外边距区域：margin

盒子相关属性

.box{
    border-width: 10px;
    border-style: solid;
    border-color: aqua;
    border-top: 10px dashed yellow;

    padding:10px; 上
    padding:10px 20px; 上下
    padding:10px 20px 30px; 上下左
    padding:10px 20px 30px 40px; 上下左右

    box-sizing: border-box;

    margin:10px;
    margin:10px 20px;
    margin:10px 20px 30px;
    margin:10px 20px 30px 40px;

    margin-left: 20px;
}

北枫_北极
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
springboot+css+js+html Demo
01-20
本Demo将详细讲解如何利用SpringBoot整合CSS、JS和HTML，以创建一个简单的Web应用。 首先，让我们了解SpringBoot的核心理念。SpringBoot旨在简化Spring应用的初始搭建以及开发过程，它通过内嵌Tomcat服务器、自动...
html+css模块demo整理
m0_37109682的博客
02-23 594
html+css模块demo整理   1、图片集旋转显示 　　演示地址：http://www.zolsky.com/web/tj/61.htm （1）:将下面的代码复制到〈BODY〉区 &lt;script type="text/javascript"&gt;// 7 variables to control behavior var Car_Image_Width=140; // ...
大学简单html+css+js项目(古诗demo)
qq_53203517的博客
03-14 420
宣传中国传统文化。比较传统诗词网站，新增背诵功能，更有趣味性。
html，css响应式布局案例练习--星巴克官网demo
weixin_44997264的博客
11-17 2964
html，css响应式布局案例练习--星巴克官网demo 继续练习响应式布局，我这次选的是星巴克的官网，进行一个页面的还原，还原程度达不到100%，不过也是可以进行一个学习过程的一个练习，细节很多，本人由于初学阶段，用了一天的时间就写了一个官网首页，兼容PC,平板，手机三个端
html 布局 demo,css+html简单布局demo
weixin_35682010的博客
06-10 356
在html中引入css样式，可以改变html的块布局方式，使得界面的布局更加美观。接下来看一个基础布局的小例子：margin布局#container{width: 1002px;background: gray;}#header{height: 120px;background: orange;}#main{background: green;height: 600px;}#lside{width...
简单的html+css的小demo
xingstudy
03-05 334
效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单的html加css样式</title> <style> .square { width: 300px; height: 300px; backgr
HTML+JS+CSS Demo.txt 这是一个拿来即用的HTML+JS+CSS的demo, 能让新手快速体验其效果
最新发布
07-15
HTML+JS+CSS Demo ##Demo 1: HTML+JS+CSS Basics ###HTML <!DOCTYPE html> <html> <title>HTML+JS+CSS Demo <link rel="stylesheet" type="text/css" href="style.css"> <h1 id="header">Hello World! ...
HTML+CSS+JS手机端购物车demo
10-18
在本项目"HTML+CSS+JS手机端购物车demo"中，我们将探讨如何利用前端技术栈，特别是HTML、CSS和JavaScript（以及Vue.js框架），来实现一个手机端的购物车功能。这个示例是一个获取JSON数据并使用Vue进行数据绑定和...
html+css实例小demo
05-31
在这个“html+css实例小demo”项目中，我们可以看到一系列实例，涵盖了从基础到高级的HTML和CSS用法，同时也涉及到JavaScript、JQuery以及Vue.js等前端技术。 首先，HTML作为网页的结构语言，用于定义网页内容的...
原生html+css+js+jQuery网页demo.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
Html+css 简单demo
06-12
Html+css 简单demo 这次学到的是div设置背景透明而内元素不会透明
基于html5+css3实现的精美聊天界面demo
07-27
基于HTML5+css3实现的两人即时通讯聊天界面，界面风格相当漂亮，可直接使用，也可简单修改为自己想要的样式，仅供大家参考。
CSS Demo
司天宏的博客
01-14 971
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; * { margin:
[Demo]用简单的html，css做一个漂亮的网页！
热门推荐
爱笑的tycho_的博客
09-14 3万+
下面是实现效果： 代码如下： html <!DOCTYPE html> <html lang="zh_cn"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="sheji.css"> ...
css+html简单布局demo
我们的征途是星辰大海
08-28 3565
在html中引入css样式，可以改变html的块布局方式，使得界面的布局更加美观。接下来看一个基础布局的小例子：         margin布局 #container{ width: 1002px; background: gray; } #header{ height: 120px; background: orange; }
HTML+CSS简单实例（一）
m0_37655876的博客
08-02 1万+
HTML+CSS简单实例（一） 本实例参考https://blog.csdn.net/u010871058/article/details/78511848 目的：实现简单欧莱雅网站。 代码内容： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm...
flex布局
过客如期的博客
05-30 410
一，什么是flex布局 1.flex布局代表弹性盒子，可用于自适应布局。 2.目前所有浏览器都支持flex布局 3.使用flex布局后，弹性盒子内的float无效。 二，flex布局特征 1.我们可以使用display：flex；display:-webkit-flex声明一个盒子为弹性盒子，盒子里的元素可称为项目。 2.在弹性盒子里默认有一条水平的轴线称之为主轴，还有一条垂直的轴线称为交叉轴。所有元素默认排列在主轴上。 三，容器上的属性 1.flex-dirction: row || row-rever
html+css 实现简单的列表
qq_38836118的博客
12-05 3825
实现效果 结构 128.00 0 苏州石公山、明月湾、古樟园一日自驾游 南京-->苏州 出发时间： 2017-12-02 共 1 天 踏青旅游
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 2821
title>充电效果
html+css+javascript笔记
12-29
以下是一个简单的HTML+CSS+JavaScript笔记的示例： ```html <!DOCTYPE html> <html> <head> <title>HTML+CSS+JavaScript笔记</title> <link rel="stylesheet" href="demo.css"> <style> /* 在demo.css中定义的样式 */ div { color: red; } </style> </head> <body> <div> 这是一个HTML文档中的区域部分。 </div> <script> // JavaScript代码示例 var message = "这是一个JavaScript变量"; console.log(message); </script> </body> </html> ``` 在上面的示例中，我们创建了一个HTML文档，引入了名为demo.css的CSS文件，并在HTML中使用了一个div元素来定义一个区域部分。在demo.css中，我们为div元素设置了红色的文字颜色。此外，我们还在JavaScript代码块中定义了一个变量，并使用console.log()函数在浏览器的控制台中输出了该变量的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北枫_北极

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值