1--Web前端开发（黑马程序员）-HTML、CSS-网页 项目

已于 2024-08-02 17:31:39 修改
阅读量345 收藏 2
点赞数 16
分类专栏： JavaWeb 文章标签： 前端 html css
于 2024-08-02 16:52:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77946674/article/details/140869513
版权

HTML

HTML(HyperText Markup Language)：超文本标记语言。
超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
标记语言：由标签构成的语言
HTML标签都是预定义好的。例如：使用<a>展示超链接，使用<img>展示图片，<video>展示视频。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

CSS：层叠样式表，用于控制页面的样式。

HTML结构标签特点

  • HTML标签不区分大小写
  • HTML标签属性值单双引号都可以
  • HTML语法松散

演示

1、标题-排版

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置浏览器兼容性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <!-- img标签：
    src：图片资源路径
    width：宽度(px:像素；%：相对于父元素的百分比)
    height：高度 (px:像素；%：相对于父元素的百分比)
    
    路径书写方式：
    绝对路径：
    1、绝对磁盘路径：属性-安全-对象名称：C:\Users\admin\Desktop\html\头像\头像1.jpg
    <img src="C:\Users\admin\Desktop\html\头像\头像1.jpg" >
    2、绝对网络路径

    相对路径：
    ./：当前目录，./可省略
     <img src="./头像/头像1.jpg" >
    ../：上一级目录，不可省略
    
    -->
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png" 
width="100px">新浪>正文

    <h1>标题</h1>
    <hr>
    2023年03月02日 21：50 网站
    <hr>
</body>
</html>

2、标题-样式1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
   <!--  方式二：内嵌样式 -->
     <style>
        h1{
            color: #3F3F3F;
            /* color:red;
            color:rgb(255, 0, 0);
            color: #3F3F3F; */
        }
     </style>
    <!--  只针对当前页面有效 -->

    <!--  方式三：外联样式 -->
     <!--  <link rel="stylesheet" href="./CSS/news.css"> -->
</head>
<body>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png" 
width="100px">新浪>正文

   <!--  方式一：行内样式 -->
   <!--  <h1 style="color: chocolate;">标题</h1>
    只对当前有效
 -->

   <h1 >标题</h1>

    <hr>
    2023年03月02日 21：50 网站
    <hr>
</body>
</html>

3、标题-样式2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>

     <style>
        h1{
            color: #3F3F3F;
            
        }
/*         元素选择器 */
       /*  span{
            color: #BEBFC4;
        } */
        /* 类选择器 */
        /* .cls{
            color: #BEBFC4;
        } */
         /* id选择器 */
         #time{
            color: #BEBFC4;
            font-size: 13px;
            /* 字体大小 */
         }
         /* 优先级：id选择器>类选择器>元素选择器 */

     </style>
    
<body>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png" 
    width="100px">新浪>正文


   <h1 >标题</h1>

    <hr>
   <span class="cls" id="time">2023年03月02日 21：50 </span> <span>网站</span>
    <hr>
</body>
</html>

4、超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>

     <style>
        h1{
            color: #4D4F53;
            
        }

         #time{
            color: #8A8A8A;
            font-size: 13px;
            
         }
         a{
            color: black;
            text-decoration: none;
         }
         
     </style>
    
<body>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png" 
width="100px"> 
    <a href="https://gov.sina.com.cn/" target="_self">新浪</a>>正文


   <h1 >标题</h1>

    <hr>
   <span id="time">2023年03月02日 21：50 </span>
    <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" 
target="_blank">网站</a></span>
    <hr>
</body>
</html>

5、正文-排版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>

     <style>
        h1{
            color: #4D4F53;
            
        }

         #time{
            color: #8A8A8A;
            font-size: 13px;
            
         }
         a{
            color: black;
            text-decoration: none;
         }
         p{
            text-indent: 35px;/* 首行缩进 */
            line-height: 45px;/* 设置行高 */
         }
         
         #plast{
            text-align: right;/* 对齐方式 */
            color: #4F5155;
         }
     </style>
    
<body>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png" 
width="100px"> 
    <a href="https://gov.sina.com.cn/" target="_self">新浪</a>>正文


   <h1 >焦标题</h1>

    <hr>
   <span id="time">2023年03月02日 21：50 </span>
    <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" 
target="_blank">网站</a></span>
    <hr>

    <!-- 正文 -->
     <!-- 视频 -->
<video src="./视频/1.mp4" controls width="950px"></video>

    <!-- 音频 -->
    <!--  <audio src="路径" controls></audio> -->
      
    <p>
        <b>连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？
    </p><!-- 或者使用strong标签，表示强调，有加粗效果 -->
    <p>
        人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。
    </p>
    <img src="https://n.sinaimg.cn/spider20230302/652/w950h502/20230302/5faa-c51bf98e99783d765c102a5c0f897b85.jpg" >

    <p>今粮食产量提高了1500亿斤。</p>
    
    <img src="https://n.sinaimg.cn/spider20230302/658/w950h508/20230302/29ec-6593cb9d9763862c6fe7948ec8f16c5e.jpg">

    <p>是一个了不起的成就。”</p>
    <p>把“确保我国粮食安全”放在首位。</p>


    <p id="plast">
        责任编辑：644 SN242
    </p>
    <!-- 空格占位符：&nbsp -->



</body>
</html>

6、正文-布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>

     <style>
        h1{
            color: #4D4F53;
            
        }

         #time{
            color: #8A8A8A;
            font-size: 13px;
            
         }
         a{
            color: black;
            text-decoration: none;
         }
         p{
            text-indent: 35px;
            line-height: 45px;
         }
         #plast{
            text-align: right;/* 对齐方式 */
            color: #4F5155;
         }
         
         #center{
            width: 65%;
            /* margin: 0% 17.5% 0% 17.5%; *//* 外边距：上、右、下、左 */
            margin: 0 auto;/* 居中 */

         }
     </style>
    
<body>
    <div id="center">
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png" width="100px"> 
    <a href="https://gov.sina.com.cn/" target="_self">新浪</a>>正文


   <h1 >标题</h1>

    <hr>
   <span id="time">2023年03月02日 21：50 </span>
    <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">网站</a></span>
    <hr>

    
<video src="./视频/1.mp4" controls width="950px"></video>

    
      
    <p>
        <b>连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？
    </p>
    <p>
        人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。
    </p>
    <img src="https://n.sinaimg.cn/spider20230302/652/w950h502/20230302/5faa-c51bf98e99783d765c102a5c0f897b85.jpg" >

    <p>从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。</p>
    
    <img src="https://n.sinaimg.cn/spider20230302/658/w950h508/20230302/29ec-6593cb9d9763862c6fe7948ec8f16c5e.jpg">

    <p>是一个了不起的成就。”</p>
    <p>2013年12月把“确保我国粮食安全”放在首位。</p>


    <p id="plast">
        责任编辑：464 SN242
    </p>

</div>


</body>
</html>

7、表格-标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
        <table border="lpx" cellspacing="0" width="600px">
        <tr>
        <th>序号</th>
        <th>品牌Logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>
        </tr>
        <tr>
        <td>1</td>
        <td> <img src="img/huawei.jpg" width="100px"> </td>
        <td>华为</td>
        <td>华为技术有限公司</td>
        </tr>
        <tr>
        <td>2</td>
        <td> <img src="img/alibaba.jpg" width="100px"> </td>
        <td>阿里</td>
        <td>阿里巴巴集团控股有限公司</td>
        </tr>
        </table>
       
        
</body>
</html>

得到

8、表单-标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<!-- 
    form表单属性：
action：表单提交的URL，向何处提交数据；如果不指定，默认提交到当前页面
method：表单的提交方式
get:在URL后面拼接表单数据，比如username=小明&age=12，URL长度有限制，默认值
post：在消息体（请求体）中传递的，参数大小无限制的
 -->

 <form action="" method="post">
    用户名：<input type="text" name="username">
    年龄：<input type="text" name="age">

    <input type="submit" value="提交">
 </form>




</body>
</html>

得到

9、表单项-标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- value：表单项提交的值-->
<form action=""method="post">
    姓名：<input type="text"name="name"> <br><br>
    密码：<input type="password" name="password"> <br><br>
    性别：<label><input type="radio" name="gender" value="1"> 男 </label>
    <label><input type="radio" name="gender" value="2">女</label><br><br>
    <!-- 单选框需要将name属性设置为一样 -->
     <!-- 选中label标签内任何值都可以表示选中 -->
      <!-- 无label则必须精确选中按钮，才能选中 -->
    爱好：<label><input type="checkbox" name="hobby"value="java"> java </label>
    <label><input type="checkbox" name="hobby" value="game"> game </label> 
    <label><input type="checkbox" name="hobby"value="sing"> sing </label><br><br>
    图像：<input type="file" name="image"> <br><br>
    生日：<input type="date" name="birthday"> <br><br>
    <!-- 年月日 -->
    时间：<input type="time" name="time"> <br><br>
    <!-- 时间 -->
    日期时间：<input type="datetime-local" name="datetime"> <br><br>
    <!-- 年月日+时间 -->
    邮箱：<input type="email" name="email"> <br><br>
    年龄：<input type="number" name="age"> <br><br>
    学历：<select name="degree">
    <option value="">-----------请选择-----------</option>
    <option value="1">大专</option>
    <option value="2">本科</option>
    <option value="3">硕士</option>
    <option value="4">博士</option>
    </select> <br><br>
    描述：<textarea name="description" cols="30" rows="10"></textarea> <br><br> 
    <input type="hidden" name="id" value="1">
    <!-- 表单常见按钮 -->
    <input type="button"value="按钮">
    <input type="reset" value="重置">
    <input type="submit" value="提交">
    <br> 
</form>
</body>
</html>

得到

灯火不休ᝰ
关注
  • 16
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2018黑马程序员web前端开发视频
12-11
根据提供的文件信息，我们可以推断出这是一套2018年由“黑马程序员”机构发布的Web前端开发视频教程。接下来，我们将围绕这个标题、描述以及部分链接内容来展开相关的知识点介绍。 ### Web前端开发基础 #### 1. ...
黑马程序员前端小白零基础入门HTML5+CSS3
06-19
本教程"黑马程序员前端小白零基础入门HTML5+CSS3"专为初学者设计，旨在帮助那些对前端开发感兴趣的朋友们从零开始学习这两门技术。 HTML5是超文本标记语言的最新版本，它的出现极大地增强了网页的交互性和表现力。...
黑马程序员web前端零基础html5 +css3
欢迎来到“Python算法探索”，我是GT算法工程师，一名热爱计算机算法的博主。在这里，我们将一起深入探索Python世界中的各种算法，从基础到高级，从理论到实践。我参加过很多算法比赛，积累了丰富的经验，希望通过这个播客与你分享。让我们一起用Python探
02-21 588
一：网站基础认识： 1.网页由哪些部分组成？？ 答：文字，图片，音频，视频，超链接 2.程序员写的代码是通过什么软件转换成网页的？ 答：浏览器（是网页显示，运行的平台） 常见五大浏览器（推荐谷歌！！！） 代码用Web标准来写 二：网页初体验 把扩展名后缀txt改成html, Win11找不到文件扩展名在设置里面改 或者在文件--查看--显示--扩展名 HTML文档右击---打开方式--记事本 记事本：Ctrl+S保存 <strong&g
CSS浮动-黑马程序员-web前端零基础
weixin_73579310的博客
12-25 133
昨天的内容终于补完啦！开始今天的
【黑马程序员】1、CSS基础_2023新版前端Web开发HTML5+CSS3+移动Web视频教程_笔记
qq_37581764的博客
07-11 854
层叠样式表 （Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。 CSS 是开放网络的核心语言之一
CSS基础-黑马程序员-web前端零基础
weixin_73579310的博客
12-20 91
CSS基础，选择器，字体 重点是margin还有tex-align，在最后
【黑马程序员】6、CSS高级_2023新版前端Web开发HTML5+CSS3+移动Web视频教程_笔记
qq_37581764的博客
07-17 389
轮播图 子绝父相固定图 固定定位字体图标：展示的是图标，本质是字体。作用：在网页中添加简单纯色的小图标优点：1.灵活性：灵活修改样式，例如尺寸颜色2.轻量级：体积小，渲染快，降低服务器请求次数3.兼容性：几乎兼容所有主流浏览器4.使用方便：先下载再使用。
HTML+CSS+JavaScript网页制作案例教程第2版-黑马程序员-第8章动手实践
weixin_59633478的博客
05-27 497
* rotate1 的动画，持续时间为 10 秒，速度曲线为线性（匀速），延迟时间为 0 秒，且无限次循环。/* 定义一个名为 rotate1 的关键帧动画。从 -360deg 旋转到 0deg，即顺时针旋转一圈。
【黑马程序员】5、学成在线网页制作_2023新版前端Web开发HTML5+CSS3+移动Web视频教程_笔记
qq_37581764的博客
07-15 3107
网站根目录：存档网站的第一层文件夹，内部包含当前网站的所有素材。
【黑马程序员】2、CSS进阶_2023新版前端Web开发HTML5+CSS3+移动Web视频教程_笔记
qq_37581764的博客
07-11 626
但是body的子级有自己的样式，则生效自己的样式，不继承父级样式。比如h1标签，默认有自己的字体大小，再有超链接，默认是蓝的，就不继承body的红色。选择器写法：选择器1选择器2 { CSS 属性}，选择器之间连写，没有任何符号。选择器写法：父选择器 > 子选择器 { CSS 属性}，父子选择器之间用。选择器写法：父选择器 子选择器 { CSS 属性}，父子选择器之间用。注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面。截不了图，鼠标在第一行，字体变红，鼠标在第二行，字体变黄。
【黑马程序员】7、小兔鲜_2023新版前端Web开发HTML5+CSS3+移动Web视频教程_笔记
qq_37581764的博客
07-24 757
iconfont文件夹：字体图标素材common.css: 各个网页相同模块的重复样式，例如：头部，底部。
黑马程序员最新版JavaWeb综合案例(前后端完整版)
热门推荐
鲁棒最小二乘支持向量机
06-28 10万+
黑马程序员最新版JavaWeb综合案例(前后端完整版)
资料-Web前端入门教程资料下载地址.txt
03-30
|- web前端培训班_web前端开发优质教程_前端工程师培训-黑马程序员.png |- HTML入门及基础02资料.zip |- HTML5入门及基础01资料.zip |- CSS3入门及提高 08资料.zip |- CSS3入门及提高 07资料.zip |- CSS3入门及提高 ...
黑马程序员-梅兰商城项目实战
04-25
【梅兰商城项目实战】是黑马程序员推出的一个全面的电商项目开发教程，旨在帮助学员深入理解和实践电商系统的构建。这个项目实战涵盖了从需求分析、设计、编码到测试的全过程，旨在提升学员在实际开发环境中的技能和...
程序员web前端视频教程（文档+代码+视频）.rar
05-29
Web前端开发还包括CSS（Cascading Style Sheets）的学习，它用于定义网页的样式和布局。理解选择器、盒模型、定位、浮动、响应式设计等概念是CSS学习的关键。通过CSS，你可以控制字体、颜色、布局和过渡效果，使网页...
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1289
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 838
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
【前端面试】五、框架
最新发布
weixin_49015558的博客
07-31 437
1 Vue2 2 Vue3 3 React 4 Angular
electron 主进程和渲染进程
qq_21087199的博客
07-29 352
虽然最近一年前端大环境不好，但是大家还是要加油鸭！，努力总不会错，千军万马过独木桥，希望大家都是闯过去那一个。进入正题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值